<!--历史考核弹窗-->
<template>
  <div class="historyAssessDialog dialog">
    <dialog-header title="历史考核" @close="close" />
    <div class="Dialog-input">
      <div class="inputContent">
        <div class="inputBox">
          <red-star />
          <input-vue
            v-model="dataInfo.supplierCode"
            title="供应商编号"
            disabled
            placeholder="请输入编号"
            class="inputWidth"
            width="200px"
          />
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue
            v-model="dataInfo.supplierStatusName"
            title="供应商状态"
            disabled
            placeholder="请输入状态"
            class="inputWidth"
            width="200px"
          />
        </div>
      </div>
      <div class="inputContent">
        <div class="inputBox">
          <red-star />
          <input-vue
            v-model="dataInfo.supplierName"
            title="供应商名称"
            disabled
            placeholder="请输入供应商名称"
            class="inputWidth"
            width="200px"
          />
        </div>
      </div>
    </div>
    <div class="Dialog-table">
      <el-table :data="tableData" height="250" border style="width: 100%" :header-cell-style="headerStyle">
        <el-table-column type="index" :index="indexMethod" label="序号" width="100" />
        <el-table-column prop="assessAnnualName" label="考核年度" width="150" />
        <el-table-column prop="annualAssessResultName" label="年度考核结果" width="150" />
        <el-table-column prop="annualAssessIllustration" label="年度考核说明" width="150" />
        <el-table-column prop="annualAssessDate" label="年度考核时间" width="150" />
        <el-table-column prop="annualAssessFile" label="考核详情" />
        <el-table-column label="考核详情">
          <template slot-scope="scope">
            <el-button type="text" size="small">
              预览
            </el-button>
            <el-button type="text" size="small">
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import dialogHeader from './dialogHeader.vue'
import inputVue from '../input/inputVue.vue'
import RedStar from '../redStar.vue'

import { historyAssess } from '../../../api/supplier/supplier'

export default {
  components: { inputVue, dialogHeader, RedStar },
  props: {
    dataInfo: {
      type: Object,
      dataInfo: {}
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.getHistoryAssess()
  },
  methods: {
    // 生成序号
    indexMethod(index) {
      return index + 1
    },
    // 合并表头
    headerStyle({ row, column, rowIndex, columnIndex }) {
      row[5].colSpan = 2 // 第三列的表头占据2个单元格
      row[6].colSpan = 0
      if (columnIndex === 6) {
        return 'display: none'
      }
    },
    close() {
      this.$emit('close')
    },
    getHistoryAssess() {
      historyAssess().then(res => {
        console.log(res)
        this.tableData = res
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.historyAssessDialog {
  width: 60%;
  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>