<!--供应商详情弹窗-->
<template>
  <el-dialog title="供应商详情" width="1165px" :visible.sync="isShowInfo" append-to-body @close="close">
    <div class="deviceDialog ">
      <!-- {{personInfo}} -->
      <div class="headInfo">
        <div class="inputContent">
          <input-vue v-model="baseInfo.supplierCode" title="单位编号" width="200px" disabled="true" />
          <input-vue v-model="baseInfo.supplierName" title="单位名称" width="200px" disabled="true" />
          <input-vue v-model="baseInfo.supplierAreaName" title="所在区域" width="200px" disabled="true" />
        </div>
        <div class="inputContent">
          <input-vue v-model="baseInfo.companyNatureName" title="单位性质" width="200px" disabled="true" />
          <input-vue v-model="baseInfo.companyTypeName" title="企业类型" width="200px" disabled="true" />
          <input-vue v-model="baseInfo.companyAddress" title="企业地址" width="200px" disabled="true" />
        </div>
      </div>
      <div class="content">
        <div class="content_nav">
          <div class="nav_item" :class="{ selectNav: navSelect == 0 }" @click="changeNav(0)">
            三证信息
          </div>
          <div class="nav_item" :class="{ selectNav: navSelect == 1 }" @click="changeNav(1)">
            联系人信息
          </div>
          <div class="nav_item" :class="{ selectNav: navSelect == 2 }" @click="changeNav(2)">
            业务信息
          </div>
          <div class="nav_item" :class="{ selectNav: navSelect == 3 }" @click="changeNav(3)">
            经营信息
          </div>
          <div class="nav_item" :class="{ selectNav: navSelect == 4 }" @click="changeNav(4)">
            评审信息
          </div>
          <div class="nav_item" :class="{ selectNav: navSelect == 5 }" @click="changeNav(5)">
            其他信息
          </div>
        </div>
        <div class="content_content">
          <div v-if="navSelect == 0" class="baseInfo">
            <div class="inputContent">
              <input-vue
                v-model="certificateInfo.threeCertificatesInOne"
                title="是否三证合一"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.licenseRegisterNumber"
                title="营业执照注册号"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.legalPerson"
                title="法人代表"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.businessScope"
                title="经营范围"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.organizeCodeScan"
                title="组织机构代码"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.taxpayerNature"
                title="纳税人性质"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
            </div>
            <div class="inputContent">
              <input-vue
                v-model="certificateInfo.unifiedSocialCreditCode"
                title="统一社会信用代码"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.registerCapital"
                title="注册资金"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.establishDate"
                title="成立日期"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.licenseScan"
                title="执照扫描件"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.organizeCodeScan"
                title="组织代码扫描件"
                width="200px "
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.taxRegisterCode"
                title="税务登记号"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
            </div>
            <div class="inputContent">
              <div style="height: 40px;" />
              <input-vue
                v-model="certificateInfo.registerAddress"
                title="注册地址"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <input-vue
                v-model="certificateInfo.businessTerm"
                title="营业期限"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
              <div style="height: 40px;" />
              <div style="height: 40px;" />
              <input-vue
                v-model="certificateInfo.taxRegisterCodeScan"
                title="税务登记扫描"
                width="200px"
                style="justify-content: space-between;"
                disabled="true"
              />
            </div>
          </div>
          <div v-if="navSelect == 1" class="relation">
            <div class="topbox">
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.legalPersonName"
                  title="法人代表姓名"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.legalPersonCertificateBackScan"
                  title="法人代表证件"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.legalPersonCertificateFrontScan"
                  title="经法人代表证件号"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.legalPersonPhone"
                  title="法人代表手机号"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
                <input-vue title="法人代表证件类型" width="200px" style="flex:1">
                  <div class="doulbe">
                    <el-input v-model="personInfo.legalPersonCertificateBackScan" style="width:200px" :disabled="true" />
                    <el-input v-model="personInfo.legalPersonCertificateBackScan" style="width:200px" disabled="true" />
                  </div>
                </input-vue>
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.businessLeaderCertificateTypeName"
                  title="业务负责人姓名"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.businessLeaderCertificateType"
                  title="业务负责人证件类型"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.businessLeaderCertificateCode"
                  title="业务负责人证件号"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.businessLeaderPhone"
                  title="业务负责人手机号"
                  width="200px"
                  class="input-vue"
                  disabled="true"
                />
                <input-vue title="业务负责人证件上传" width="200px">
                  <div class="doulbe2">
                    <el-input
                      v-model="personInfo.businessLeaderCertificateBackScan"
                      style="width:200px"
                      :disabled="true"
                    />
                    <el-input
                      v-model="personInfo.businessLeaderCertificateFrontScan"
                      style="width:200px"
                      :disabled="true"
                    />
                  </div>
                </input-vue>
              </div>
            </div>
            <div class="dataInfo">
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.backupPersonName"
                  title="备用联系人姓名"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.technicalLeaderName"
                  title="技术负责人姓名"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.saleLeaderName"
                  title="售后负责人姓名"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.financeLeaderName"
                  title="财务负责人姓名"
                  width="130px"
                  disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.backupPersonCertificateTypeName"
                  title="备用联系人证件类型"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.technicalLeaderCertificateTypeName"
                  title="技术负责人证件类型"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.saleLeaderCertificateTypeName"
                  title="售后负责人证件类型"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.financeLeaderCertificateTypeName"
                  title="财务负责人证件类型"
                  width="130px"
                  disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.backupPersonCertificateCode"
                  title="备用联系人证件号"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.technicalLeaderCertificateCode"
                  title="技术负责人证件号"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.saleLeaderCertificateCode"
                  title="售后负责人证件号"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.financeLeaderCertificateCode"
                  title="财务负责人证件号"
                  width="130px"
                  disabled="true"
                />
              </div>
              <div class="inputContent">
                <input-vue
                  v-model="personInfo.backupPersonPhone"
                  title="备用联系人手机号"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.technicalLeaderPhone"
                  title="技术负责人手机号"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.saleLeaderPhone"
                  title="售后负责人手机号"
                  width="130px"
                  disabled="true"
                />
                <input-vue
                  v-model="personInfo.financeLeaderPhone"
                  title="财务负责人手机号"
                  width="130px"
                  disabled="true"
                />
              </div>
            </div>
          </div>
          <div v-if="navSelect == 2" class="business">
            <div class="inputContent">
              <input-vue
                v-model="businessInfo.businessTypeName"
                title="业务类别"
                width="200px"
                class="input-vue"
                disabled="true"
              />
              <input-vue
                v-model="businessInfo.mainCategory"
                title="主营类型"
                width="200px"
                class="input-vue"
                disabled="true"
              />
              <input-vue
                v-model="businessInfo.businessNatureName"
                title="业务性质"
                width="200px"
                class="input-vue"
                disabled="true"
              />
            </div>
            <el-table
              height="200"
              :data="businessInfo.brandList"
              :row-class-name="tableRowClassName"
              :header-cell-style="{
                'text-align': 'center',
                background: '  #2483b3',
                color: 'white',
              }"
              :row-style="{ 'text-align': 'center' }"
              style="width: 100%"
            >
              <el-table-column prop="brandCode" label="序号" />
              <el-table-column prop="brandName" label="产品品牌" />
              <el-table-column prop="brandProperty" label="品牌性质" />
              <el-table-column prop="brandRegisterCertificate" label="品牌注册证" />
              <el-table-column prop="brandAuthCertificate" label="品牌授权证明" />
            </el-table>
            <div class="inputContent">
              <input-vue
                v-model="businessInfo.manageAddress"
                title="经营地址"
                width="200px"
                class="input-vue"
                disabled="true"
              />
              <input-vue
                v-model="businessInfo.officeNatureName"
                title="办公场所性质"
                width="200px"
                class="input-vue"
                disabled="true"
              />
              <input-vue
                v-model="businessInfo.officeSpace"
                title="办公面积"
                width="200px"
                class="input-vue"
                disabled="true"
              />
            </div>
          </div>
          <div v-if="navSelect == 3" class="manage">
            <div class="title">
              经营信息
            </div>
            <div class="inputbox">
              <input-vue
                v-model="businessInfo.yearIncome"
                title="上年度收入"
                style="margin-right: 28px;width: 374px;"
                width="240px"
                disabled="true"
              />
              <input-vue
                v-model="businessInfo.yearProfit"
                title="上年度利润"
                style="width: 352px;"
                width="240px"
                disabled="true"
              />
            </div>
            <div class="inputContent">
              <input-vue title="近三年资产负债表" width="200px">
                <div class="tableDown">
                  <input v-model="businessInfo.threeYearLiabilitiesTable" disabled="true"> <span>下载</span>
                </div>
              </input-vue>
              <input-vue title="近三年损益表" width="200px">
                <div class="tableDown">
                  <input v-model="businessInfo.threeYearLossTable" disabled="true"> <span>下载</span>
                </div>
              </input-vue>
              <input-vue title="近三年现金流量表" width="200px">
                <div class="tableDown">
                  <input v-model="businessInfo.threeYearFlowTable" disabled="true"> <span>下载</span>
                </div>
              </input-vue>
            </div>
            <div class="title">
              经营许可信息
            </div>
            <div class="inputContent">
              <input-vue v-model="businessInfo.licenseName" title="许可证名称" width="200px" disabled="true" />
              <input-vue v-model="businessInfo.licenseTerm" title="许可证期限" width="200px" disabled="true" />
              <input-vue title="许可证扫描件" width="200px">
                <div class="tableDown">
                  <input v-model="businessInfo.licenseScan" disabled="true"> <span>下载</span>
                </div>
              </input-vue>
            </div>
          </div>
          <div v-if="navSelect == 4" class="reviewbox">
            <div class="inputContent">
              <input-vue
                v-model="reviewInfo.supplierStatusName"
                title="供应商状态"
                width="200px"
                disabled="true"
              />
              <input-vue
                v-model="reviewInfo.preReviewResultName"
                title="资料预审结果"
                width="200px"
                disabled="true"
              />
              <input-vue
                v-model="reviewInfo.inputReviewResult"
                title="录库评审结果"
                width="200px"
                disabled="true"
              />
            </div>
            <div class="title">
              历史季度评价
            </div>
            <el-table
              height="200"
              :data="reviewInfo.quarterlyEvaluateList"
              :row-class-name="tableRowClassName"
              :header-cell-style="{
                'text-align': 'center',
                background: '  #2483b3',
                color: 'white',
              }"
              :row-style="{ 'text-align': 'center' }"
              style="width: 100%"
            >
              <el-table-column prop="supplierCode" label="序号" />
              <el-table-column prop="evaluateQuarterly" label="评价季度" />
              <el-table-column prop="quarterlyEvaluateResult" label="季度评价结果" />
              <el-table-column prop="quarterlyEvaluateIllustration" label="季度评价说明" />
              <el-table-column prop="quarterlyEvaluateDate" label="季度评价时间" />
              <el-table-column prop="quarterlyEvaluateFile" label="评价详情" />
            </el-table>
            <div class="title">
              历史年度考核
            </div>
            <el-table
              height="200"
              :data="reviewInfo.annualAssessList"
              :row-class-name="tableRowClassName"
              :header-cell-style="{
                'text-align': 'center',
                background: '  #2483b3',
                color: 'white',
              }"
              :row-style="{ 'text-align': 'center' }"
              style="width: 100%"
            >
              <el-table-column prop="supplierCode" label="序号" />
              <el-table-column prop="assessAnnual" label="考核年度" />
              <el-table-column prop="annualAssessResult" label="年度考核结果" />
              <el-table-column prop="annualAssessIllustration" label="年度考核时说明" />
              <el-table-column prop="annualAssessDate" label="年度考核时间" />
              <el-table-column prop="annualAssessFile" label="考核详情" />
            </el-table>
          </div>
          <div v-if="navSelect == 5" class="othernfo">
            <div class="title">
              历史年度考核
            </div>
            <el-table
              height="200"
              :data="businessInfo.bankList"
              :row-class-name="tableRowClassName"
              :header-cell-style="{
                'text-align': 'center',
                background: '  #2483b3',
                color: 'white',
              }"
              :row-style="{ 'text-align': 'center' }"
              style="width: 100%"
            >
              <!-- <el-table-column prop="date" label="序号" > </el-table-column> -->
              <el-table-column prop="accountName" label="账户名称" />
              <el-table-column prop="accountNumber" label="银行账号" />
              <el-table-column prop="depositBank" label="开户行" />
              <el-table-column prop="depositBankName" label="开户行名称" />
              <el-table-column prop="depositBankNumber" label="开户行号" />
              <!-- <el-table-column prop="address" label="操作"> </el-table-column> -->
            </el-table>
            <div class="title">
              历史年度考核
            </div>
            <div class="inputContent">
              <input-vue
                v-model="businessInfo.systemCertificateName"
                title="管理体系认证名称"
                width="200px"
                disabled="true"
              />
              <input-vue
                v-model="businessInfo.systemCertificateTerm"
                title="管理体系认证期限"
                width="200px"
                disabled="true"
              />
              <input-vue
                v-model="businessInfo.systemCertificateScan"
                title="管理体系扫描件"
                width="200px"
                disabled="true"
              />
            </div>
            <div class="title">
              历史年度考核
            </div>
            <el-table
              height="200"
              :data="businessInfo.qualifyCertificateList"
              :row-class-name="tableRowClassName"
              :header-cell-style="{
                'text-align': 'center',
                background: '  #2483b3',
                color: 'white',
              }"
              :row-style="{ 'text-align': 'center' }"
              style="width: 100%"
            >
              <el-table-column prop="id" label="序号" />
              <el-table-column prop="qualifyName" label="资质需要名称" />
              <el-table-column prop="qualifyDesc" label="资质需求描述" />
              <el-table-column prop="proveMaterialDesc" label="资质要求材料" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>

import inputVue from '../../input/inputVue.vue'
import { tableRowClassName } from '../../../../utils/myUtils/changeTableTr'
import { BaseInfo, certificate, person, business, review } from '../../../../api/supplier/supplierInfo'

export default {
  components: {
    inputVue

  },
  props: {
    isShowInfo: {
      type: Boolean,
      default: 'false'
    },
    dataInfo: ''

  },
  data() {
    return {
      navSelect: 0, // 0 1 2 为导航栏的选项
      baseInfo: {},
      certificateInfo: '',
      personInfo: '',
      businessInfo: '',
      reviewInfo: ''

    }
  },
  watch: {
    dataInfo: {
      handler(vls) {
        if (!vls.id) return
        BaseInfo({ id: vls.id }).then(res => {
          this.baseInfo = res
        })
      },
      deep: true,
      immediate: true
    },
    baseInfo: {
      handler(vls) {
        certificate({ supplierCode: vls.supplierCode }).then(res => {
          this.certificateInfo = res
        })
        person({ supplierCode: vls.supplierCode }).then(res => {
          this.personInfo = res
        })
        business({ supplierCode: vls.supplierCode }).then(res => {
          this.businessInfo = res
        })
        review({ supplierCode: vls.supplierCode }).then(res => {
          this.reviewInfo = res
        })
      }
    }
  },
  methods: {
    tableRowClassName: tableRowClassName,
    changeNav(index) {
      this.navSelect = index
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.deviceDialog {
  border-radius: 5px;
  // overflow: hidden;
  // padding: 10px ;
  width: 1125px;
  height: 100%;
  box-sizing: border-box;
}

.selectNav {
  border: 1px solid #999;
  border-bottom: 3px solid #fff;
  position: relative;
  z-index: 9;
  box-sizing: border-box;
  top: 2px;
}

.content {
  width: 100%;

  .content_nav {
    box-sizing: border-box;
    display: flex;
    margin: 10px 0;
    border-bottom: 1px solid #999;

    .nav_item {
      width: 130px;
      height: 60px;
      margin: 0 10px;
      line-height: 60px;
      text-align: center;
    }
  }
}

.content_content {
  // padding: 20px 0 60px 0;
  // box-sizing: border-box;

}

.headInfo {
  width: 1000px;

  .inputContent {
    // flex: 1;
    display: flex;
    // flex-direction: column;

    justify-content: space-between;
    align-items: center;
  }
}

.baseInfo {
  width: 1000px;
  display: flex;

  .inputContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 10px;
    // justify-content: space-between;
    // align-items: center;
  }
}

.deviceInfo {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: 100%;

  .inputContent {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.dataInfo {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: 100%;

  .inputContent {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.relation {
  .topbox {
    .inputContent {
      display: flex;
      justify-content: space-between;

      .input-vue {
        // flex: 1;
        width: 364px;
      }

      .doulbe {
        // width: 572px;
        width: 602px;
        padding-left: 27px;
        // padding-left: 4px;
      }

      .doulbe2 {
        padding-left: 12px;
        width: 588px;
      }
    }
  }
}

.business, .reviewbox {
  .inputContent {
    display: flex;
    justify-content: space-between;
  }

  .title {
    padding: 10px 0;
  }
}

.manage {
  .title {
    background-color: rgb(40, 115, 158);
    color: #fff;
    font-size: 22px;
    padding: 10px;
    font-weight: bold;
  }

  .inputContent {
    display: flex;
    justify-content: space-between;

    .tableDown {
      width: 200px;
      display: flex;
      align-items: center;
      padding: 0 10px;

      input {
        outline: none;
        border: none;
        width: 140px;
      }

      span {
        margin-left: 5px;
      }

      color: rgb(40, 115, 158);
      border: 1px solid lightgray;
      height: 40px;
    }
  }

  .inputbox {
    display: flex;
  }

}

.othernfo {
  .title {
    background-color: rgb(40, 115, 158);
    color: #fff;
    font-size: 22px;
    padding: 10px;
    font-weight: bold;
    margin: 10px 0;
  }

  .inputContent {
    display: flex;
    justify-content: space-between;
  }
}

</style>