<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>
<!--      <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>

    <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>
      <man-system-info ref="supplierManSystemInfo"/>
    </div>

<!--        <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>-->

<!--        <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'
import PersonInfo from '@/views/account/personInfo'
import OperationInfo from '@/views/account/operationInfo'
import LicenceInfo from '@/views/account/licenceInfo'
import ManSystemInfo from '@/views/account/manSystemInfo'
export default {
  components: { BaseInfo, CertInfo, PersonInfo, OperationInfo, LicenceInfo, 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: []
      },

      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
        }
      ]
    }
  },
  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()
      // 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)
      this.$message.success(this.$refs.supplierManSystemInfo.manSystemInfoValid + '')
    }
  }
}
</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>