<template>
  <div class="historyAssessDialog dialog">
    <dialog-header title="历史考核" @close="close"></dialog-header>
    <div class="Dialog-input">
      <div class="inputContent">
        <div class="inputBox">
          <red-star />
          <input-vue title="供应商编号" disabled v-model="dataInfo.supplierCode" placeholder="请输入编号" class="inputWidth"
            width="200px"></input-vue>
        </div>
        <div class="inputBox">
          <red-star />
          <input-vue title="供应商状态" disabled v-model="dataInfo.supplierStatusName" placeholder="请输入状态" class="inputWidth"
            width="200px"></input-vue>
        </div>
      </div>
      <div class="inputContent">
        <div class="inputBox">
          <red-star />
          <input-vue title="供应商名称" disabled v-model="dataInfo.supplierName" placeholder="请输入供应商名称" class="inputWidth"
            width="200px"></input-vue>
        </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>
        <el-table-column prop="assessAnnualName" label="考核年度" width="150">
        </el-table-column>
        <el-table-column prop="annualAssessResultName" label="年度考核结果" width="150">
        </el-table-column>
        <el-table-column prop="annualAssessIllustration" label="年度考核说明" width="150">
        </el-table-column>
        <el-table-column prop="annualAssessDate" label="年度考核时间" width="150">
        </el-table-column>
        <el-table-column prop="annualAssessFile" label="考核详情">
        </el-table-column>
        <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 {
  props: {
    dataInfo: {
      type: Object,
      dataInfo: {}
    }
  },
  components: { inputVue, dialogHeader, RedStar },
  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>