<!--历史评价弹窗-->
<template>
  <el-dialog title="季度评价记录" width="60%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false">
    <el-descriptions class="margin-top" title="" :column="2" border style="width: 100%">
      <el-descriptions-item label="供应商名称" :label-style="labelStyle" :content-style="contentStyle">{{ dataInfo.supplierName }}</el-descriptions-item>
      <el-descriptions-item label="供应商编号" :label-style="labelStyle">{{ dataInfo.supplierCode }}</el-descriptions-item>
      <el-descriptions-item label="供应商状态">{{ dataInfo.supplierStatusName }}</el-descriptions-item>
    </el-descriptions>

    <div style="margin-top: 30px; font-size: 1rem">评价记录</div>
    <el-table :data="tableData" style="width: 100%" max-height="400px" :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 label="评价季度" width="200">
        <template v-if="scope.row.evaluateYearName !== ''" slot-scope="scope">
          {{ scope.row.evaluateYearName }}年{{ scope.row.evaluateQuarterlyName }}
        </template>
      </el-table-column>
      <el-table-column prop="quarterlyEvaluateResultName" label="评价结果" width="150"></el-table-column>
      <el-table-column prop="quarterlyEvaluateIllustration" label="评价结果说明"></el-table-column>
      <el-table-column prop="quarterlyEvaluateDate" label="评价日期" width="150" />
      <el-table-column label="评价结果附件" width="300">
        <template slot-scope="scope">
          <el-link v-for="(item, index) in scope.row.quarterlyEvaluateFileList" :key="item.id" :href="baseUrl + item" :disabled="item === ''" type="primary" target="_blank" style="margin-right: 10px;">附件{{ index + 1 }}</el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { historyEvaluate } from '@/api/supplier/supplier'

export default {
  name: 'HistoryEvaluateDialog',
  data() {
    return {
      isShowInfo: false,
      tableData: [],
      dataInfo: {

      },
      baseUrl: '',
      labelStyle: {
        width: '20%'
      },
      contentStyle: {
        width: '30%'
      }
    }
  },
  methods: {
    initHistoryDialog(row) {
      this.dataInfo = row
      this.getHistoryEvaluate(row.supplierCode)
      this.isShowInfo = true
      this.baseUrl = this.baseConfig.baseUrl + 'static/'
    },
    getHistoryEvaluate(supplierCode) {
      historyEvaluate({ supplierCode: supplierCode }).then(res => {
        res.forEach(record => {
          if (record.quarterlyEvaluateDate !== '' && record.quarterlyEvaluateDate.length > 10) {
            record.quarterlyEvaluateDate = record.quarterlyEvaluateDate.substring(0, 10)
          }
          if (record.quarterlyEvaluateFile !== '') {
            record.quarterlyEvaluateFileList = record.quarterlyEvaluateFile.split(',')
          }
        })
        res = res.filter(item => item.quarterlyEvaluateDate)
        this.tableData = res
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.historyEvaluateDialog {
  width: 975px;
  padding: 0 20px;
  box-sizing: border-box;

  .Dialog-input {
    padding: 10px 20px;
    display: flex;

    .inputContent {
      margin-right: 30px;
      display: flex;
      flex: 1;
      flex-direction: column;

      .inputBox {
        display: flex;
        justify-content: inherit;
        align-items: center;
      }
    }

  }

  .Dialog-table {
    margin: 20px;
  }

}
</style>