<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 title="单位编号" width="200px" v-model="baseInfo.supplierCode" disabled='true' ></input-vue>
        <input-vue title="单位名称" width="200px" v-model="baseInfo.supplierName" disabled='true' ></input-vue>
        <input-vue title="所在区域" width="200px" v-model="baseInfo.supplierAreaName" disabled='true' ></input-vue>
      </div>
       <div class="inputContent">
        <input-vue title="单位性质" width="200px" v-model="baseInfo.companyNatureName" disabled='true' ></input-vue>
        <input-vue title="企业类型" width="200px" v-model="baseInfo.companyTypeName" disabled='true' ></input-vue>
        <input-vue title="企业地址" width="200px" v-model="baseInfo.companyAddress" disabled='true' ></input-vue>
      </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 class="baseInfo" v-if="navSelect == 0">
          <div class="inputContent">
            <input-vue title="是否三证合一" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.threeCertificatesInOne" disabled='true' ></input-vue>
            <input-vue title="营业执照注册号" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.licenseRegisterNumber" disabled='true' ></input-vue>
            <input-vue title="法人代表" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.legalPerson" disabled='true' ></input-vue>
            <input-vue title="经营范围" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.businessScope" disabled='true' ></input-vue>
            <input-vue title="组织机构代码" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.organizeCodeScan" disabled='true' ></input-vue>
            <input-vue title="纳税人性质" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.taxpayerNature" disabled='true' > </input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="统一社会信用代码" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.unifiedSocialCreditCode" disabled='true' ></input-vue>
            <input-vue title="注册资金" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.registerCapital" disabled='true' ></input-vue>
            <input-vue title="成立日期"  width="200px" style="justify-content: space-between;"  v-model="certificateInfo.establishDate" disabled='true' ></input-vue>
            <input-vue title="执照扫描件" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.licenseScan" disabled='true' ></input-vue>
            <input-vue title="组织代码扫描件" width="200px " style="justify-content: space-between;"  v-model="certificateInfo.organizeCodeScan" disabled='true' ></input-vue>
            <input-vue title="税务登记号" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.taxRegisterCode" disabled='true' ></input-vue>
           
          </div>
          <div class="inputContent">
            <div style="height: 40px;"></div>
            <input-vue title="注册地址" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.registerAddress" disabled='true' ></input-vue>
            <input-vue title="营业期限" width="200px" style="justify-content: space-between;"  v-model="certificateInfo.businessTerm" disabled='true' ></input-vue>
            <div style="height: 40px;"></div>
             <div style="height: 40px;"></div>
            <input-vue title="税务登记扫描" width="200px" style="justify-content: space-between;" v-model="certificateInfo.taxRegisterCodeScan" disabled='true' ></input-vue>
          </div>
        
        </div>
        <div class="relation" v-if="navSelect == 1">
          <div class="topbox">
            <div class="inputContent">
            <input-vue title="法人代表姓名" width="200px" class="input-vue" v-model="personInfo.legalPersonName" disabled='true'></input-vue>
            <input-vue title="法人代表证件" width="200px"  class="input-vue" v-model="personInfo.legalPersonCertificateBackScan" disabled='true'></input-vue>
            <input-vue title="经法人代表证件号" width="200px" class="input-vue" v-model="personInfo.legalPersonCertificateFrontScan" disabled='true'></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="法人代表手机号" width="200px" class="input-vue" v-model="personInfo.legalPersonPhone" disabled='true'></input-vue>
            <input-vue title="法人代表证件类型" width="200px" style="flex:1">
            <div class="doulbe"  ><el-input style="width:200px" v-model="personInfo.legalPersonCertificateBackScan" :disabled='true'/><el-input style="width:200px"  v-model="personInfo.legalPersonCertificateBackScan" disabled='true'/></div>
            </input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="业务负责人姓名" width="200px"  class="input-vue" v-model="personInfo.businessLeaderCertificateTypeName" disabled='true'></input-vue>
            <input-vue title="业务负责人证件类型" width="200px" class="input-vue" v-model="personInfo.businessLeaderCertificateType" disabled='true'></input-vue>
            <input-vue title="业务负责人证件号" width="200px" class="input-vue" v-model="personInfo.businessLeaderCertificateCode" disabled='true'></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="业务负责人手机号" width="200px" class="input-vue" v-model="personInfo.businessLeaderPhone" disabled='true'></input-vue>
            <input-vue title="业务负责人证件上传" width="200px">
            <div class="doulbe2"><el-input style="width:200px"  v-model="personInfo.businessLeaderCertificateBackScan" :disabled='true'/><el-input style="width:200px"  v-model="personInfo.businessLeaderCertificateFrontScan" :disabled='true' /></div>
            </input-vue>
          </div>
          </div>
          <div class="dataInfo">
          <div class="inputContent">
            <input-vue title="备用联系人姓名" width="130px" v-model="personInfo.backupPersonName" disabled='true'></input-vue>
            <input-vue title="技术负责人姓名" width="130px" v-model="personInfo.technicalLeaderName" disabled='true'></input-vue>
            <input-vue title="售后负责人姓名" width="130px" v-model="personInfo.saleLeaderName" disabled='true'></input-vue>
            <input-vue title="财务负责人姓名" width="130px" v-model="personInfo.financeLeaderName" disabled='true'></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="备用联系人证件类型" width="130px" v-model="personInfo.backupPersonCertificateTypeName" disabled='true'></input-vue>
            <input-vue title="技术负责人证件类型" width="130px" v-model="personInfo.technicalLeaderCertificateTypeName" disabled='true'></input-vue>
            <input-vue title="售后负责人证件类型" width="130px" v-model="personInfo.saleLeaderCertificateTypeName" disabled='true'></input-vue>
            <input-vue title="财务负责人证件类型" width="130px" v-model="personInfo.financeLeaderCertificateTypeName" disabled='true'></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="备用联系人证件号" width="130px" v-model="personInfo.backupPersonCertificateCode" disabled='true'></input-vue>
            <input-vue title="技术负责人证件号" width="130px" v-model="personInfo.technicalLeaderCertificateCode" disabled='true'></input-vue>
            <input-vue title="售后负责人证件号" width="130px" v-model="personInfo.saleLeaderCertificateCode" disabled='true'></input-vue>
            <input-vue title="财务负责人证件号" width="130px" v-model="personInfo.financeLeaderCertificateCode" disabled='true'></input-vue>
          </div>
          <div class="inputContent">
            <input-vue title="备用联系人手机号" width="130px" v-model="personInfo.backupPersonPhone" disabled='true'></input-vue>
            <input-vue title="技术负责人手机号" width="130px" v-model="personInfo.technicalLeaderPhone" disabled='true'></input-vue>
            <input-vue title="售后负责人手机号" width="130px" v-model="personInfo.saleLeaderPhone" disabled='true'></input-vue>
            <input-vue title="财务负责人手机号" width="130px" v-model="personInfo.financeLeaderPhone" disabled='true'></input-vue>
          </div>
        </div>
        </div>
        <div class="business" v-if="navSelect == 2">
          <div class="inputContent">
            <input-vue title="业务类别" width="200px" class="input-vue" v-model="businessInfo.businessTypeName" disabled='true'></input-vue>
            <input-vue title="主营类型" width="200px"  class="input-vue" v-model="businessInfo.mainCategory" disabled='true'></input-vue>
            <input-vue title="业务性质" width="200px" class="input-vue" v-model="businessInfo.businessNatureName" disabled='true'></input-vue>
          </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>
      <el-table-column prop="brandName" label="产品品牌"> </el-table-column>
      <el-table-column prop="brandProperty" label="品牌性质"> </el-table-column>
      <el-table-column prop="brandRegisterCertificate" label="品牌注册证"> </el-table-column>
      <el-table-column prop="brandAuthCertificate" label="品牌授权证明"> </el-table-column>
           </el-table>
          <div class="inputContent">
            <input-vue title="经营地址" width="200px" class="input-vue"  v-model="businessInfo.manageAddress" disabled='true'></input-vue>
            <input-vue title="办公场所性质" width="200px"  class="input-vue"  v-model="businessInfo.officeNatureName" disabled='true'> </input-vue>
            <input-vue title="办公面积" width="200px" class="input-vue"  v-model="businessInfo.officeSpace" disabled='true'></input-vue>
          </div>
        </div>
        <div class="manage" v-if="navSelect == 3">
          <div class="title">经营信息</div>
          <div class="inputbox">
            <input-vue title="上年度收入" style="margin-right: 28px;width: 374px;" width="240px"  v-model="businessInfo.yearIncome" disabled='true'></input-vue>
            <input-vue title="上年度利润" style="width: 352px;" width="240px"  v-model="businessInfo.yearProfit" disabled='true'></input-vue>
            
          </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 title="许可证名称" width="200px" v-model="businessInfo.licenseName" disabled='true'></input-vue>
            <input-vue title="许可证期限" width="200px" v-model="businessInfo.licenseTerm" disabled='true'></input-vue>
            <input-vue title="许可证扫描件" width="200px">
            <div class="tableDown">
                 <input v-model="businessInfo.licenseScan" disabled='true'/> <span >下载</span>
              </div>
            </input-vue>
          </div>
        </div>
        <div class="reviewbox" v-if="navSelect == 4">
          <div class="inputContent">
            <input-vue title="供应商状态" width="200px"  v-model="reviewInfo.supplierStatusName" disabled='true'></input-vue>
            <input-vue title="资料预审结果" width="200px"  v-model="reviewInfo.preReviewResultName" disabled='true'></input-vue>
            <input-vue title="录库评审结果" width="200px"  v-model="reviewInfo.inputReviewResult" disabled='true'></input-vue>
          </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>
      <el-table-column prop="evaluateQuarterly" label="评价季度"> </el-table-column>
      <el-table-column prop="quarterlyEvaluateResult" label="季度评价结果"> </el-table-column>
      <el-table-column prop="quarterlyEvaluateIllustration" label="季度评价说明"> </el-table-column>
      <el-table-column prop="quarterlyEvaluateDate" label="季度评价时间"> </el-table-column>
      <el-table-column prop="quarterlyEvaluateFile" label="评价详情"> </el-table-column>
           </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>
      <el-table-column prop="assessAnnual" label="考核年度"> </el-table-column>
      <el-table-column prop="annualAssessResult" label="年度考核结果"> </el-table-column>
      <el-table-column prop="annualAssessIllustration" label="年度考核时说明"> </el-table-column>
      <el-table-column prop="annualAssessDate" label="年度考核时间"> </el-table-column>
      <el-table-column prop="annualAssessFile" label="考核详情"> </el-table-column>
           </el-table>
        </div>
        <div class="othernfo" v-if="navSelect == 5">
          <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>
      <el-table-column prop="accountNumber" label="银行账号"> </el-table-column>
      <el-table-column prop="depositBank" label="开户行"> </el-table-column>
      <el-table-column prop="depositBankName" label="开户行名称"> </el-table-column>
      <el-table-column prop="depositBankNumber" label="开户行号"> </el-table-column>
      <!-- <el-table-column prop="address" label="操作"> </el-table-column> -->
           </el-table>
          <div  class="title">历史年度考核</div>
          <div class="inputContent">
            <input-vue title="管理体系认证名称" width="200px" v-model="businessInfo.systemCertificateName" disabled='true'></input-vue>
            <input-vue title="管理体系认证期限" width="200px" v-model="businessInfo.systemCertificateTerm" disabled='true'></input-vue>
            <input-vue title="管理体系扫描件" width="200px" v-model="businessInfo.systemCertificateScan" disabled='true'></input-vue>
          </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>
      <el-table-column prop="qualifyName" label="资质需要名称"> </el-table-column>
      <el-table-column prop="qualifyDesc" label="资质需求描述"> </el-table-column>
      <el-table-column prop="proveMaterialDesc" label="资质要求材料"> </el-table-column>
   
           </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 {
  props:{
    isShowInfo:{
      type:Boolean,
      default:'false'
    },
    dataInfo:'',
   
  },
  components: {
    inputVue,
    
},
  data() {
    return {
      navSelect: 0, // 0 1 2 为导航栏的选项
      baseInfo:{},
      certificateInfo:'',
      personInfo:'',
      businessInfo:'',
      reviewInfo:'',
      
    };
  },
  methods:{
    tableRowClassName: tableRowClassName,
    changeNav(index){
      this.navSelect =index
    },
    close(){
      this.$emit('close')
    }
  },
  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
        })
      }
    }
  }
};
</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>