<template>
  <el-dialog title="历史评审" width='975px' :visible.sync="isShowInfo" append-to-body @close='close'>
    <div class="historyReviewDialog ">
      <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="inputReviewResultName" label="录库评审结果" width="150">
          </el-table-column>
          <el-table-column prop="inputReviewIllustration" label="录库评审说明" width="150">
          </el-table-column>
          <el-table-column prop="inputReviewDate" label="录库评审日期" width="150">
          </el-table-column>
          <el-table-column prop="inputReviewFile" 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>
  </el-dialog>
</template>

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

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

<style lang='scss' scoped>
.historyReviewDialog {
  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>