<template>
  <div class="information-container">
    <div class="information-title">
      信息填报
    </div>
    <div class="information-from">
      <div class="from-title">
        基础信息
      </div>
      <base-info ref="supplierBaseInfo"/>
    </div>

    <div class="information-from">
      <div class="from-title">
        三证信息
      </div>
      <cert-info ref="supplierCertInfo"/>
    </div>

    <div class="information-from">
      <div class="from-title">
        联系人信息
      </div>
      <person-info ref="supplierPersonInfo"/>
    </div>

    <div class="information-from">
      <div class="from-title">
        业务信息
      </div>
      <business-info ref="supplierBusinussInfo"/>
    </div>

    <div class="information-from">
      <div class="from-title">
        经营信息
      </div>
      <operation-info ref="supplierOperationInfo"/>
    </div>

    <div class="information-from">
      <div class="from-title">
        经营许可信息
      </div>
      <licence-info ref="supplierLicenceInfo"/>
    </div>

    <div class="information-from">
      <div class="from-title">
        银行账户信息
      </div>
      <bank-info ref="supplierBankInfo"/>
      <!--        <div style="margin-left: 2px;margin-top:20px">-->
      <!--          <el-table :data="tableData" border class="el-tab">-->
      <!--            <el-table-column prop="id" label="序号" width="55" />-->
      <!--            <el-table-column prop="name" label="账户名称" width="200" />-->
      <!--            <el-table-column prop="address" label="银行账号" width="200" />-->
      <!--            <el-table-column prop="address" label="开户行" width="200" />-->
      <!--            <el-table-column prop="address" label="开户行名称" width="300" />-->
      <!--            <el-table-column prop="address" label="开户行行号" width="200" />-->
      <!--            <el-table-column label="操作" width="200">-->
      <!--              <template slot-scope="">-->
      <!--                <el-checkbox v-model="checked">-->
      <!--                  是否启用-->
      <!--                </el-checkbox>-->
      <!--              </template>-->
      <!--            </el-table-column>-->
      <!--          </el-table>-->
      <!--        </div>-->
    </div>

    <div class="information-from">
      <div class="from-title">
        管理体系认证信息
      </div>
      <man-system-info ref="supplierManSystemInfo"/>
    </div>


<!--        <div class="from-title">-->
<!--          资质认证信息-->
<!--        </div>-->
<!--        <div class="from-table">-->
<!--          <div style="margin-left: 2px;margin-top:20px">-->
<!--            <el-table :data="tableData" border class="el-tab">-->
<!--              <el-table-column prop="id" label="序号" width="100" />-->
<!--              <el-table-column prop="name" label="资质要求名称" width="350" />-->
<!--              <el-table-column prop="address" label="资质要求描述" width="550" />-->
<!--              <el-table-column-->
<!--                prop="address"-->
<!--                label="资质要求材料上传"-->
<!--                width="350"-->
<!--              />-->
<!--            </el-table>-->
<!--          </div>-->
<!--          <div>-->
<!--            <el-button class="table-btn">-->
<!--              添加资质要求-->
<!--            </el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-form>-->
<!--    </div>-->

    <div class="btnBox">
      <el-button type="primary" class="save" style="background-color: #2483b3" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import BaseInfo from '@/views/account/baseInfo'
import CertInfo from '@/views/account/certInfo'
import PersonInfo from '@/views/account/personInfo'
import BusinessInfo from '@/views/account/businessInfo'
import OperationInfo from '@/views/account/operationInfo'
import LicenceInfo from '@/views/account/licenceInfo'
import BankInfo from '@/views/account/bankInfo'
import ManSystemInfo from '@/views/account/manSystemInfo'
export default {
  components: { BaseInfo, CertInfo, PersonInfo, BusinessInfo, OperationInfo, LicenceInfo, BankInfo, ManSystemInfo },
  data() {
    return {
      checked: false,
      val: '',
      companyFormInfo: {
        baseInfo: {
          supplierName: undefined,
          supplierArea: undefined,
          companyNature: undefined,
          companyType: undefined,
          companyProvince: undefined,
          companyCity: undefined,
          companyArea: undefined,
          companyAddress: undefined
        },
        certificateInfo: {

        },
        personInfo: {

        },
        businessInfo: {
        },
        busDetailBrands: [],
        busDetailBanks: [],
        busDetailQualifyCertificates: []
      }
    }
  },
  methods: {
    save: function() {
      // this.$refs.supplierBaseInfo.validateForm()
      // this.$refs.supplierCertInfo.validateForm()
      // this.$refs.supplierPersonInfo.validateForm()
      // this.$refs.supplierOperationInfo.validateForm()
      // this.$refs.supplierLicenceInfo.validateForm()
      // this.$refs.supplierManSystemInfo.validateForm()
      this.$refs.supplierBusinussInfo.validateForm()
      // console.log('baseInfo object', this.$refs.supplierBaseInfo.baseInfo)
      // console.log('certInfo object', this.$refs.supplierCertInfo.certInfo)
      // console.log('personInfo object', this.$refs.supplierPersonInfo.personInfo)
      // console.log('operInfo object', this.$refs.supplierOperationInfo.operationInfo)
      // console.log(this.$refs.supplierLicenceInfo.licenceInfo)
      // console.log(this.$refs.supplierManSystemInfo.manSystemInfo)
      console.log(this.$refs.supplierBusinussInfo.businessInfo)
      this.$message.success(this.$refs.supplierBusinussInfo.businessInfoValid + '')
    }
  }
}
</script>

<style lang='scss' scoped>
.information-container {
  .information-title {
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 10px 20px;
  }

  .information-from {
    .from-title {
      font-size: 22px;
      font-weight: bold;
      background-color: #2483b3;
      color: white;
      padding: 10px 0 10px 20px;
    }

    .from-inputBox {
      display: flex;
      margin-left: 20px;

      .input-item {
        width: 540px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .from-table {
      display: flex;
      margin: 10px 20px;

      .el-tab {
      }

      .table-btn {
        margin-left: 100px;
      }
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
.certificateInfoForm {
}
</style>