<template>
  <div>
    <div class="content">
      <dataTable :table-data="tableData" :columns="columns" :page-obj="pageObj" :breads="breads" :checklist="checklist">
        <el-table-column slot="operate" label="备注" align="center" fixed="right" width="100">	
          <template slot-scope="scope">
            <el-popover
              :content="scope.row.remark"
              placement="top-start"
              title="拒绝原因"
              width="200"
              trigger="hover">
              <div slot="reference">{{ scope.row.remark }}</div>
            </el-popover>
            
          </template>
        </el-table-column>
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleSee">编辑</el-button>
          </template>
        </el-table-column>
      </dataTable>
    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'failList',
  components: {
    dataTable
  },
  data() {
    return {
      checklist: [{
        title: '采购商',
        type: 'input',
        model: 'purchaser'
      }, {
        title: '项目名称',
        type: 'input',
        model: 'name'
      },
      {
        title: '状态',
        type: 'select',
        model: 'state',
        selectlist: [{
          value: '1',
          label: '项目待审核'
        }, {
          value: '2',
          label: '项目待审核'
        }]
      },
      {
        title: '项目类型',
        type: 'select',
        model: 'type',
        selectlist: [{
          value: '1',
          label: '公开招标'
        }, {
          value: '2',
          label: '邀请招标'
        }],
        change: row => ''
      }
      ],
      breads: ['招投标管理', '招标项目列表'],
      tableData: [{
        code: 'CSGSZB20200069',
        name: '智慧工地',
        date: '2016-05-02',
        purchaser: '博大智慧',
        type: '公开招标',
        state: '项目待修改',
        remark: '拒绝原因',
        person: '王五'
      }, {
        code: 'CSGSZB20200069',
        name: '智慧工地',
        date: '2016-05-02',
        purchaser: '博大智慧',
        type: '公开招标',
        state: '项目待修改',
        remark: '拒绝原因',
        person: '王五'
      },
      {
        code: 'CSGSZB20200069',
        name: '智慧工地',
        date: '2016-05-02',
        purchaser: '博大智慧',
        type: '公开招标',
        state: '项目待修改',
        remark: '拒绝原因',
        person: '王五'
      }
      ],
      columns: [{
        label: '项目编号',
        prop: 'code',
        width: 300
      },
      {
        label: '项目名称',
        prop: 'name'
      },
      {
        label: '采购商',
        prop: 'purchaser'
      },
      {
        label: '项目类型',
        prop: 'type'
      },
      {
        label: '创建时间',
        prop: 'date',
        sortable: true
      },
      {
        label: '状态',
        prop: 'state'
      },
      {
        label: '审核人',
        prop: 'person'
      },

      {
        slot: 'operate'
      }
      ], // 操作列

      pageObj: {
        size: 10,
        total: 1,
        currentPage: 1,
        sizes: [100, 200, 300],
        func: (currentPage) => {
          this.pageTurning(currentPage)
        }
      }
    }
  },
  methods: {
    handleSee() {

    }
  }
}
</script>

<style scoped>

</style>
