<!--经销商详情弹窗-->
<template>
  <el-dialog title="经销商详情" width="75%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false">
    <el-descriptions title="" :column="2" border>
      <el-descriptions-item label="经销商名称">{{ baseInfo.distributorName }}</el-descriptions-item>
      <el-descriptions-item label="经销商编号">{{ baseInfo.distributorCode }}</el-descriptions-item>
      <el-descriptions-item label="单位性质">{{ baseInfo.companyNatureName }}</el-descriptions-item>
      <el-descriptions-item label="单位类型">{{ baseInfo.companyTypeName }}</el-descriptions-item>
      <el-descriptions-item label="详细地址" span="2">
        {{ baseInfo.companyProvince }} / {{ baseInfo.companyCity }} / {{ baseInfo.companyArea }} / {{ baseInfo.companyAddress }}
      </el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeTabName" style="margin-top: 20px;">
      <el-tab-pane label="三证信息" name="certDetail">
        <cert-info-detail ref="certDetail"/>
      </el-tab-pane>

      <el-tab-pane label="联系人信息" name="personDetail">
        <person-info-detail ref="personDetail" />
      </el-tab-pane>

      <el-tab-pane label="业务信息" name="businessDetail">
        <business-info-detail ref="businessDetail" />
      </el-tab-pane>

      <el-tab-pane label="经营信息" name="operationDetail">
        <operation-info-detail ref="operationDetail" />
      </el-tab-pane>

      <el-tab-pane label="其他信息" name="extraDetail">
        其他附加
      </el-tab-pane>
    </el-tabs>

<!--    <div class="deviceDialog ">-->
<!--      &lt;!&ndash; {{personInfo}} &ndash;&gt;-->
<!--      <div class="headInfo">-->
<!--      </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 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%"-->
<!--            >-->
<!--              &lt;!&ndash; <el-table-column prop="date" label="序号" > </el-table-column> &ndash;&gt;-->
<!--              <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="开户行号" />-->
<!--              &lt;!&ndash; <el-table-column prop="address" label="操作"> </el-table-column> &ndash;&gt;-->
<!--            </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 CertInfoDetail from '@/views/companyDetail/certInfoDetail'
import PersonInfoDetail from '@/views/companyDetail/personInfoDetail'
import BusinessInfoDetail from '@/views/companyDetail/businessInfoDetail'
import OperationInfoDetail from '@/views/companyDetail/operationInfoDetail'
import { tableRowClassName } from '@/utils/myUtils/changeTableTr'
import { certificateDetail, personDetail, businessDetail } from '@/api/distributor/distributor'

export default {
  name: 'DistributorDetail',
  components: {
    CertInfoDetail, PersonInfoDetail, BusinessInfoDetail, OperationInfoDetail
  },
  data() {
    return {
      baseInfo: {
        distributorCode: '',
        distributorName: '',
        companyNatureName: '',
        companyTypeName: '',
        companyProvince: '',
        companyCity: '',
        companyArea: '',
        companyAddress: ''
      },
      activeTabName: 'certDetail',
      certificateInfo: '',
      personInfo: '',
      businessInfo: '',
      reviewInfo: '',
      isShowInfo: false
    }
  },
  methods: {
    tableRowClassName: tableRowClassName,
    initDialog(dialogStatus, row = null) {
      this.isShowInfo = true
      this.activeTabName = 'certDetail'
      if (row !== null) {
        this.baseInfo.distributorCode = row.distributorCode
        this.baseInfo.distributorName = row.distributorName
        this.baseInfo.companyNatureName = row.companyNatureName
        this.baseInfo.companyTypeName = row.companyTypeName
        this.baseInfo.companyProvince = row.companyProvince
        this.baseInfo.companyCity = row.companyCity
        this.baseInfo.companyArea = row.companyArea
        this.baseInfo.companyAddress = row.companyAddress
      }

      this.getCertDetail(row.distributorCode)
      this.getPersonDetail(row.distributorCode)
      this.getBusinessDetail(row.distributorCode)
    },
    getCertDetail(distributorCode) {
      certificateDetail({ distributorCode: distributorCode }).then(res => {
        if (res !== null && res !== undefined && res !== '') {
          this.$refs.certDetail.showCertDetail(res)
        }
      })
    },
    getPersonDetail(distributorCode) {
      personDetail({ distributorCode: distributorCode }).then(res => {
        if (res !== null && res !== undefined && res !== '') {
          this.$refs.personDetail.showPersonDetail(res)
        }
      })
    },
    getBusinessDetail(distributorCode) {
      businessDetail({ distributorCode: distributorCode }).then(res => {
        if (res !== null && res !== undefined && res !== '') {
          this.$refs.businessDetail.showBusinessDetail(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>