<template>  
  <div >
    <div class="content">
      <dataTable :table-data="tableData" :columns="columns" :page-obj="pageObj" :breads="breads" :checklist="checklist" @sendSelection="getSelection">
        <el-button slot="moreButton">删除</el-button>
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.$index<3" type="text" size="small" @click="handleTop(scope.row)">取消置顶</el-button>
            <el-button v-else type="text" size="small" @click="handleTop(scope.row,scope.$index)">设为置顶</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </dataTable>
     
    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'list',
  components: {
    dataTable
  },
  data() {
    return {
      checklist: [{
        title: '标题',
        type: 'input',
        model: 'title'
      }, {
        title: '分类',
        type: 'select',
        selectlist: [{
          value: '1',
          label: '系统公告'
        }, {
          value: '2',
          label: '法律法规'
        }, {
          value: '3',
          label: '行业动态'
        }, {
          value: '4',
          label: '系统公告'
        }],
        change: row => '',
        model: 'type'
      }, {
        title: '状态',
        type: 'select',
        selectlist: [{
          value: '1',
          label: '已发布'
        }, {
          value: '2',
          label: '待发布'
        }],
        change: row1 => '',
        model: 'state'
      }],
      breads: ['信息公告管理 ', '信息公告列表'],
      tableData: [{
        title: '山东省清理规范招标投标有关规定',
        type: '新闻资讯',
        data: '2017-10-01 15：00',
        describe: '一段描述'
      },
      {
        title: '山东省清理规范招标投标有关规定',
        type: '平台动态',
        data: '2017-10-01 15：00',
        describe: '一段描述'
      },
      {
        title: '山东省清理规范招标投标有关规定',
        type: '法律法规',
        data: '2017-10-01 15：00',
        describe: '一段描述'
      },
      {
        title: '山东省清理规范招标投标有关规定',
        type: '关于我们',
        data: '2017-10-01 15：00',
        describe: '一段描述'
      },
      {
        title: '山东省清理规范招标投标有关规定',
        type: '关于我们',
        data: '2017-10-01 15：00',
        describe: '一段描述'
      }
      ],
      columns: [
        {
          selection: true
        }, {
          label: '标题',
          prop: 'title'
        },
        {
          label: '分类',
          prop: 'type'
        },
        {
          label: '发布时间',
          prop: 'data',
          sortable: true
        },
        {
          slot: 'operate'
        }
      ], // 操作列
     
      pageObj: {
        size: 10,
        total: 1,
        currentPage: 1,
        sizes: [100, 200, 300],
        func: (currentPage) => {
          this.pageTurning(currentPage)
        }
      }
    }
  },
  methods: {
    getSelection(val) {
      console.log(val)
    },
    // 设为置顶
    handleTop(row, index) {
      this.tableData.splice(index, 1)
      this.tableData.unshift(row)
    },
    // 删除操作
    handleDelete(row, index) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
          this.tableData.splice(index, 1)
        })
        .catch(() => {})
    },
    // 编辑
    handleEdit(row) {
      const id = '1'
      this.$router.push({
        path: `/admin/information/release/edit`,
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped>
	.absolute{
		position: absolute;
		top:67px;
		left:50px
	}
</style>
