<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>-->
<!--      <el-form-->
<!--        ref="elForm2"-->
<!--        :model="personInfo"-->
<!--        :rules="rules2"-->
<!--        size="medium"-->
<!--        label-width="134px"-->
<!--        style="margin-top: 20px"-->
<!--      >-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label-width="111px"-->
<!--              label="法人代表姓名"-->
<!--              prop="legalPersonName"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.legalPersonName"-->
<!--                placeholder="请输入法人代表姓名"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label="法人代表证件类型"-->
<!--              prop="legalPersonCertificateType"-->
<!--            >-->
<!--              <el-select-->
<!--                v-model="personInfo.legalPersonCertificateType"-->
<!--                placeholder="请选择法人代表证件类型"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in legalPersonCertificateTypeOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="法人代表证件号" prop="code">-->
<!--              <el-input-->
<!--                v-model="personInfo.legalPersonCertificateCode"-->
<!--                placeholder="请输入法人代表证件号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="法人代表手机号" prop="legalPersonPhone">-->
<!--              <el-input-->
<!--                v-model="personInfo.legalPersonPhone"-->
<!--                placeholder="请输入法人代表手机号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="5">-->
<!--            <el-form-item-->
<!--              label="法人代表证件上传"-->
<!--              prop="legalPersonCertificateFrontScan"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="legalPersonCertificateFrontScan"-->
<!--                :file-list="legalPersonCertificateFrontScanfileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="legalPersonCertificateFrontScanBeforeUpload"-->
<!--                accept="image/*"-->
<!--                name="legalPersonCertificateFrontScan"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  证件照正面.jpg-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label-width="0"-->
<!--              prop="legalPersonCertificateBackScan"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="legalPersonCertificateBackScan"-->
<!--                :file-list="legalPersonCertificateBackScanfileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="legalPersonCertificateBackScanBeforeUpload"-->
<!--                accept="image/*"-->
<!--                name="legalPersonCertificateBackScan"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  证件照背面.jpg-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="业务负责人姓名" prop="businessLeaderName">-->
<!--              <el-input-->
<!--                v-model="personInfo.businessLeaderName"-->
<!--                placeholder="请输入业务负责人姓名"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label-width="148px"-->
<!--              label="业务负责人证件类型"-->
<!--              prop="businessLeaderCertificateType"-->
<!--            >-->
<!--              <el-select-->
<!--                v-model="personInfo.businessLeaderCertificateType"-->
<!--                placeholder="请选择业务负责人证件类型"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in businessLeaderCertificateTypeOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label="业务负责人证件号"-->
<!--              prop="businessLeaderCertificateCode"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.businessLeaderCertificateCode"-->
<!--                placeholder="请输入业务负责人证件号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="业务负责人手机号" prop="businessLeaderPhone">-->
<!--              <el-input-->
<!--                v-model="personInfo.businessLeaderPhone"-->
<!--                placeholder="请输入业务负责人手机号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="5">-->
<!--            <el-form-item-->
<!--              label-width="153px"-->
<!--              label=" 业务负责人证件上传"-->
<!--              prop="businessLeaderCertificateFrontScan"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="businessLeaderCertificateFrontScan"-->
<!--                :file-list="businessLeaderCertificateFrontScanfileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="businessLeaderCertificateFrontScanBeforeUpload"-->
<!--                accept="image/*"-->
<!--                name="businessLeaderCertificateFrontScan"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  点击上传-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label-width="0"-->
<!--              prop="businessLeaderCertificateBackScan"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="businessLeaderCertificateBackScan"-->
<!--                :file-list="businessLeaderCertificateBackScanfileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="businessLeaderCertificateBackScanBeforeUpload"-->
<!--                accept="image/*"-->
<!--                name="businessLeaderCertificateBackScan"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  证件照背面.jpg-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="备用联系人姓名" prop="backupPersonName">-->
<!--              <el-input-->
<!--                v-model="personInfo.backupPersonName"-->
<!--                placeholder="请输入姓名"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label-width="140px"-->
<!--              label=" 备用联系人手机号"-->
<!--              prop="backupPersonPhone"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.backupPersonPhone"-->
<!--                placeholder="请输入手机号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label-width="148px"-->
<!--              label="备用联系人证件类型"-->
<!--              prop="backupPersonCertificateType"-->
<!--            >-->
<!--              <el-select-->
<!--                v-model="personInfo.backupPersonCertificateType"-->
<!--                placeholder="请选证件类型"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in backupPersonCertificateTypeOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label="备用联系人证件号"-->
<!--              prop="backupPersonCertificateCode"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.backupPersonCertificateCode"-->
<!--                placeholder="请输入证件号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="技术负责人姓名" prop="technicalLeaderName">-->
<!--              <el-input-->
<!--                v-model="personInfo.technicalLeaderName"-->
<!--                placeholder="请输入姓名"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label-width="140px"-->
<!--              label=" 技术负责人手机号"-->
<!--              prop="technicalLeaderPhone"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.technicalLeaderPhone"-->
<!--                placeholder="请输入手机号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label-width="148px"-->
<!--              label="技术负责人证件类型"-->
<!--              prop="technicalLeaderCertificateType"-->
<!--            >-->
<!--              <el-select-->
<!--                v-model="personInfo.technicalLeaderCertificateType"-->
<!--                placeholder="请选择证件类型"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in technicalLeaderCertificateTypeOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label="技术负责人证件号"-->
<!--              prop="technicalLeaderCertificateCode"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.technicalLeaderCertificateCode"-->
<!--                placeholder="请输入证件号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="售后负责人姓名" prop="saleLeaderName">-->
<!--              <el-input-->
<!--                v-model="personInfo.saleLeaderName"-->
<!--                placeholder="请输入姓名"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="售后负责人手机号" prop="saleLeaderPhone">-->
<!--              <el-input-->
<!--                v-model="personInfo.saleLeaderPhone"-->
<!--                placeholder="请输入手机号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label-width="148px"-->
<!--              label="售后负责人证件类型"-->
<!--              prop="saleLeaderCertificateType"-->
<!--            >-->
<!--              <el-select-->
<!--                v-model="personInfo.saleLeaderCertificateType"-->
<!--                placeholder="请选择证件类型"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in saleLeaderCertificateTypeOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label="售后负责人证件号"-->
<!--              prop="saleLeaderCertificateCode"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.saleLeaderCertificateCode"-->
<!--                placeholder="请输入证件号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="财务负责人姓名" prop="financeLeaderName">-->
<!--              <el-input-->
<!--                v-model="personInfo.financeLeaderName"-->
<!--                placeholder="请输入姓名"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item label="财务负责人手机号" prop="financeLeaderPhone">-->
<!--              <el-input-->
<!--                v-model="personInfo.financeLeaderPhone"-->
<!--                placeholder="请输入手机号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label-width="148px"-->
<!--              label="财务负责人证件类型"-->
<!--              prop="financeLeaderCertificateType"-->
<!--            >-->
<!--              <el-select-->
<!--                v-model="personInfo.financeLeaderCertificateType"-->
<!--                placeholder="请选择证件类型"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in financeLeaderCertificateTypeOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <el-form-item-->
<!--              label="财务负责人证件号"-->
<!--              prop="financeLeaderCertificateCode"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="personInfo.financeLeaderCertificateCode"-->
<!--                placeholder="请输入证件号"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form>-->
<!--    </div>-->

<!--    <div class="information-from">-->
<!--      <div class="from-title">-->
<!--        业务信息-->
<!--      </div>-->
<!--      <el-form-->
<!--        ref="elForm2"-->
<!--        :model="personInfo"-->
<!--        :rules="rules2"-->
<!--        size="medium"-->
<!--        label-width="134px"-->
<!--        style="margin-top: 20px"-->
<!--      >-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="业务类别" prop="businessType">-->
<!--              <el-select-->
<!--                v-model="personInfo.businessType"-->
<!--                placeholder="请选择业务类别"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in businessTypeOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="主营品类" prop="mainCategory">-->
<!--              <el-select-->
<!--                v-model="personInfo.mainCategory"-->
<!--                placeholder="请选择主营品类"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in mainCategoryOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="业务性质" prop="businessNature">-->
<!--              <el-select-->
<!--                v-model="personInfo.businessNature"-->
<!--                placeholder="请选择业务性质"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in businessNatureOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <div class="from-table">-->
<!--          <div style="margin-left: 2px">-->
<!--            <el-table :data="tableData" border class="el-tab">-->
<!--              <el-table-column prop="id" label="序号" width="150" />-->
<!--              <el-table-column prop="name" label="品牌名称" width="250" />-->
<!--              <el-table-column prop="address" label="品牌性质" width="250" />-->
<!--              <el-table-column prop="address" label="品牌性质" width="350" />-->
<!--              <el-table-column-->
<!--                prop="address"-->
<!--                label="品牌授权证明"-->
<!--                width="400"-->
<!--              />-->
<!--            </el-table>-->
<!--          </div>-->
<!--          <div>-->
<!--            <el-button class="table-btn">-->
<!--              添加主营品牌-->
<!--            </el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="经营地址" prop="manageAddress">-->
<!--              <el-input-->
<!--                v-model="personInfo.manageAddress"-->
<!--                placeholder="请输入经营地址"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="办公场所性质" prop="officeNature">-->
<!--              <el-select-->
<!--                v-model="personInfo.officeNature"-->
<!--                placeholder="请选择办公场所性质"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="(item, index) in officeNatureOptions"-->
<!--                  :key="index"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :disabled="item.disabled"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label=" 办公面积" prop="officeSpace">-->
<!--              <el-input-->
<!--                v-model="personInfo.officeSpace"-->
<!--                placeholder="请输入办公面积"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <div class="from-title">-->
<!--          经营信息-->
<!--        </div>-->
<!--        <el-row style="margin-top: 20px">-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="当前年度" prop="currentYear">-->
<!--              <el-input-->
<!--                v-model="personInfo.currentYear"-->
<!--                placeholder="请输入当前年度"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="上年度收入" prop="yearIncome">-->
<!--              <el-input-->
<!--                v-model="personInfo.yearIncome"-->
<!--                placeholder="请输入上年度收入"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="上年度利润" prop="yearProfit">-->
<!--              <el-input-->
<!--                v-model="personInfo.yearProfit"-->
<!--                placeholder="请输入上年度利润"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label="近三年资产负债表"-->
<!--              prop="threeYearLiabilitiesTable"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="threeYearLiabilitiesTable"-->
<!--                :file-list="threeYearLiabilitiesTablefileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="threeYearLiabilitiesTableBeforeUpload"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  资产负债表.xlsx-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label="近三年损益表"-->
<!--              prop="threeYearLossTable"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="threeYearLossTable"-->
<!--                :file-list="threeYearLossTablefileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="threeYearLossTableBeforeUpload"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  损益表.xlsx-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label="近三年现金流量表"-->
<!--              prop="threeYearFlowTable"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="threeYearFlowTable"-->
<!--                :file-list="threeYearFlowTablefileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="threeYearFlowTableBeforeUpload"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  现金流量表.xlsx-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <div class="from-title">-->
<!--          经营许可信息-->
<!--        </div>-->
<!--        <el-row style="margin-top:20px">-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="许可证名称" prop="licenseName">-->
<!--              <el-input-->
<!--                v-model="personInfo.licenseName"-->
<!--                placeholder="请输入许可证名称"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="许可证期限" prop="licenseTerm">-->
<!--              <el-input-->
<!--                v-model="personInfo.licenseTerm"-->
<!--                placeholder="请输入许可证期限"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="许可证扫描件" prop="licenseScan" required>-->
<!--              <el-upload-->
<!--                ref="licenseScan"-->
<!--                :file-list="licenseScanfileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="licenseScanBeforeUpload"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  扫描件.pdf-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <div class="from-title">-->
<!--          银行账户信息-->
<!--        </div>-->
<!--        <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 class="from-title">-->
<!--          管理体系认证信息-->
<!--        </div>-->
<!--        <el-row style="margin-top:20px">-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="管理体系认证名称" prop="systemCertificateName">-->
<!--              <el-input-->
<!--                v-model="personInfo.systemCertificateName"-->
<!--                placeholder="请输入管理体系认证名称"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item label="管理体系认证期限" prop="systemCertificateTerm">-->
<!--              <el-input-->
<!--                v-model="personInfo.systemCertificateTerm"-->
<!--                placeholder="请输入管理体系认证期限"-->
<!--                clearable-->
<!--                :style="{ width: '100%' }"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item-->
<!--              label="管理体系扫描件"-->
<!--              prop="systemCertificateScan"-->
<!--              required-->
<!--            >-->
<!--              <el-upload-->
<!--                ref="systemCertificateScan"-->
<!--                :file-list="systemCertificateScanfileList"-->
<!--                :auto-upload="false"-->
<!--                :before-upload="systemCertificateScanBeforeUpload"-->
<!--              >-->
<!--                <el-button-->
<!--                  size="small"-->
<!--                  type="primary"-->
<!--                  icon="el-icon-upload"-->
<!--                >-->
<!--                  扫描件.pdf-->
<!--                </el-button>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <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'
export default {
  components: { BaseInfo, CertInfo },
  data() {
    return {
      checked: false,
      datevalue: '',
      val: '',
      options: [{ value: '境内', label: '境内' }],
      companyFormInfo: {
        baseInfo: {
          supplierName: undefined,
          supplierArea: undefined,
          companyNature: undefined,
          companyType: undefined,
          companyProvince: undefined,
          companyCity: undefined,
          companyArea: undefined,
          companyAddress: undefined
        },
        certificateInfo: {

        },
        personInfo: {
          legalPersonName: undefined,
          legalPersonPhone: undefined,
          legalPersonCertificateCode: undefined,
          legalPersonCertificateType: undefined,
          legalPersonCertificateFrontScan: null,
          legalPersonCertificateBackScan: null,
          businessLeaderName: undefined,
          businessLeaderCertificateType: undefined,
          businessLeaderCertificateCode: undefined,
          businessLeaderPhone: undefined,
          businessLeaderCertificateFrontScan: null,
          businessLeaderCertificateBackScan: null,
          backupPersonName: undefined,
          backupPersonPhone: undefined,
          backupPersonCertificateType: undefined,
          backupPersonCertificateCode: undefined,
          technicalLeaderName: undefined,
          technicalLeaderPhone: undefined,
          technicalLeaderCertificateType: undefined,
          technicalLeaderCertificateCode: undefined,
          saleLeaderName: undefined,
          saleLeaderPhone: undefined,
          saleLeaderCertificateType: undefined,
          saleLeaderCertificateCode: undefined,
          financeLeaderName: undefined,
          financeLeaderPhone: undefined,
          financeLeaderCertificateType: undefined,
          financeLeaderCertificateCode: undefined
        },
        businessInfo: {
        },
        busDetailBrands: [],
        busDetailBanks: [],
        busDetailQualifyCertificates: []
      },

      field102Options: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],

      companyNatureOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      companyTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      companyProvinceOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      companyCityOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      companyAreaOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],

      rules1: {
        threeCertificatesInOne: [
          {
            required: true,
            message: '请选择是否三证合一',
            trigger: 'change'
          }
        ],
        unifiedSocialCreditCode: [
          {
            required: true,
            message: '请输入统一社会信用代码',
            trigger: 'blur'
          }
        ],
        licenseRegisterNumber: [
          {
            required: true,
            message: '请输入营业执照注册号',
            trigger: 'blur'
          }
        ],
        registerCapital: [
          {
            required: true,
            message: '请输入注册资金',
            trigger: 'blur'
          }
        ],
        registerAddress: [
          {
            required: true,
            message: '请输入注册地址',
            trigger: 'blur'
          }
        ],
        legalPerson: [
          {
            required: true,
            message: '请输入法人代表',
            trigger: 'blur'
          }
        ],
        establishDate: [
          {
            required: true,
            message: '请选择成立日期',
            trigger: 'change'
          }
        ],
        businessTerm: [
          {
            required: true,
            message: '请输入营业期限',
            trigger: 'blur'
          }
        ],
        businessScope: [
          {
            required: true,
            message: '请输入经营范围',
            trigger: 'blur'
          }
        ],
        organizeCode: [
          {
            required: true,
            message: '请输入组织机构代码',
            trigger: 'blur'
          }
        ],
        taxpayerNature: [
          {
            required: true,
            message: '请选择纳税人性质',
            trigger: 'change'
          }
        ],
        taxRegisterCode: [
          {
            required: true,
            message: '请输入税务登记证号',
            trigger: 'blur'
          }
        ]
      },
      taxRegisterCodeScanAction: 'https://jsonplaceholder.typicode.com/posts/',
      taxRegisterCodeScanfileList: [],
      threeCertificatesInOneOptions: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 2
        }
      ],
      taxpayerNatureOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],

      rules2: {
        legalPersonName: [
          {
            required: true,
            message: '请输入法人代表姓名',
            trigger: 'blur'
          }
        ],
        legalPersonCertificateType: [
          {
            required: true,
            message: '请选择法人代表证件类型',
            trigger: 'change'
          }
        ],
        legalPersonCertificateCode: [
          {
            required: true,
            message: '请输入法人代表证件号',
            trigger: 'blur'
          }
        ],
        legalPersonPhone: [
          {
            required: true,
            message: '请输入法人代表手机号',
            trigger: 'blur'
          },
          {
            pattern:
              /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        businessLeaderName: [
          {
            required: true,
            message: '请输入业务负责人姓名',
            trigger: 'blur'
          }
        ],
        businessLeaderCertificateType: [
          {
            required: true,
            message: '请选择业务负责人证件类型',
            trigger: 'change'
          }
        ],
        businessLeaderCertificateCode: [
          {
            required: true,
            message: '请输入业务负责人证件号',
            trigger: 'blur'
          }
        ],
        businessLeaderPhone: [
          {
            required: true,
            message: '请输入业务负责人手机号',
            trigger: 'blur'
          },
          {
            pattern:
              /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        backupPersonName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        backupPersonPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern:
              /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        backupPersonCertificateType: [
          {
            required: true,
            message: '请选证件类型',
            trigger: 'change'
          }
        ],
        backupPersonCertificateCode: [
          {
            required: true,
            message: '请输入证件号',
            trigger: 'blur'
          }
        ],
        technicalLeaderName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        technicalLeaderPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern:
              /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        technicalLeaderCertificateType: [
          {
            required: true,
            message: '请选择证件类型',
            trigger: 'change'
          }
        ],
        technicalLeaderCertificateCode: [
          {
            required: true,
            message: '请输入证件号',
            trigger: 'blur'
          }
        ],
        saleLeaderName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        saleLeaderPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern:
              /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        saleLeaderCertificateType: [
          {
            required: true,
            message: '请选择证件类型',
            trigger: 'change'
          }
        ],
        saleLeaderCertificateCode: [
          {
            required: true,
            message: '请输入证件号',
            trigger: 'blur'
          }
        ],
        financeLeaderName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        financeLeaderPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern:
              /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        financeLeaderCertificateType: [
          {
            required: true,
            message: '请选择证件类型',
            trigger: 'change'
          }
        ],
        financeLeaderCertificateCode: [
          {
            required: true,
            message: '请输入证件号',
            trigger: 'blur'
          }
        ]
      },
      legalPersonCertificateTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      businessLeaderCertificateTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      backupPersonCertificateTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      technicalLeaderCertificateTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      saleLeaderCertificateTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      financeLeaderCertificateTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      businessTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      mainCategoryOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      businessNatureOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      officeNatureOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ]
    }
  },
  created() {},
  methods: {
    taxRegisterCodeScanBeforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    save: function() {
      this.$refs.supplierBaseInfo.validateForm()
      this.$refs.supplierCertInfo.validateForm()
      console.log('baseInfo valid', this.$refs.supplierBaseInfo.baseInfoValid)
      console.log('baseInfo object', this.$refs.supplierBaseInfo.baseInfo)
      console.log('certInfo valid', this.$refs.supplierCertInfo.certInfoValid)
      console.log('certInfo object', this.$refs.supplierCertInfo.certInfo)
    }
  }
}
</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>