<template>
  <div>
    <div style="margin-top: 30px; font-size: 1rem">银行账户信息</div>
    <el-table :data="busDetailBanks" style="width: 100%" max-height="300px" :highlight-current-row="true">
      <el-table-column label="序号" width="75">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="accountName" label="账户名称"></el-table-column>
      <el-table-column prop="accountNumber" label="银行账号" width="300"></el-table-column>
      <el-table-column prop="depositBank" label="开户行" width="200"></el-table-column>
      <el-table-column prop="depositBankName" label="开户行名称" width="300"></el-table-column>
      <el-table-column prop="depositBankNumber" label="开户行号" width="200"></el-table-column>
    </el-table>

    <div style="margin-top: 30px; margin-bottom: 10px; font-size: 1rem">管理体系认证信息</div>
    <el-descriptions class="margin-top" title="" :column="2" border style="width: 100%">
      <el-descriptions-item label="管理体系认证名称" :label-style="labelStyle">{{ manSystemInfo.systemCertificateName }}</el-descriptions-item>
      <el-descriptions-item label="管理体系认证期限" :label-style="labelStyle">{{ manSystemInfo.systemCertificateTerm }}</el-descriptions-item>
      <el-descriptions-item label="附件下载" span="2">
        <el-link :href="baseUrl + manSystemInfo.systemCertificateScan" :disabled="manSystemInfo.systemCertificateScan === '#'" type="primary" target="_blank">管理体系扫描件</el-link>
      </el-descriptions-item>
    </el-descriptions>

    <div style="margin-top: 30px; margin-bottom: 10px; font-size: 1rem">资质认证信息</div>
    <el-table :data="busDetailQualifyCertificates" style="width: 100%" max-height="300px" :highlight-current-row="true">
      <el-table-column label="序号" width="75">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="qualifyName" label="资质要求名称" width="300"></el-table-column>
      <el-table-column prop="qualifyCode" label="资质要求编号" width="300"></el-table-column>
      <el-table-column prop="qualifyDesc" label="资质要求描述"></el-table-column>
      <el-table-column prop="proveMaterialDesc" label="附件下载" width="200">
        <template slot-scope="scope">
          <el-link :href="baseUrl + scope.row.proveMaterialDesc" :disabled="scope.row.proveMaterialDesc === ''" type="primary" target="_blank">查看附件</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ExtraInfoDetail',
  data() {
    return {
      manSystemInfo: {
        systemCertificateName: '',
        systemCertificateTerm: '',
        systemCertificateScan: ''
      },
      busDetailBanks: [],
      busDetailQualifyCertificates: [],
      baseUrl: '',
      labelStyle: {
        width: '20%'
      }
    }
  },
  methods: {
    showExtraDetail(extra) {
      this.baseUrl = this.baseConfig.baseUrl + '/static/'
      this.manSystemInfo.systemCertificateName = extra.systemCertificateName
      this.manSystemInfo.systemCertificateTerm = extra.systemCertificateTerm
      this.manSystemInfo.systemCertificateScan = extra.systemCertificateScan

      this.busDetailBanks = extra.bankList
      this.busDetailQualifyCertificates = extra.qualifyCertificateList
    }
  }
}
</script>

<style scoped>

</style>