<!--历史评价弹窗-->
<template>
  <el-dialog title="历史评价" width="975px" :visible.sync="isShowInfo" append-to-body @close="close">
    <div class="historyEvaluateDialog">
      <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="evaluateQuarterlyName" label="评价季度" width="150" />
          <el-table-column prop="quarterlyEvaluateResult" label="录库评审结果" width="150" />
          <el-table-column prop="quarterlyEvaluateIllustration" label="录库评审说明" width="150" />
          <el-table-column prop="quarterlyEvaluateDate" label="录库评审日期" width="150" />
          <el-table-column prop="quarterlyEvaluateFile" 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>
  </el-dialog>
</template>

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

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

export default {
  components: { inputVue, dialogHeader, RedStar },
  props: {
    dataInfo: {
      type: Object,
      dataInfo: {}
    }
  },
  data() {
    return {
      isShowInfo: true,
      tableData: []
    }
  },
  mounted() {
    this.getHistoryEvaluate()
  },
  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')
    },
    getHistoryEvaluate() {
      historyEvaluate().then(res => {
        console.log(res)
        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>