<template>
  <div class="userList">
    <div class="content">
      <el-button type="primary" class="absolut" @click="handleEdit">新建角色</el-button>
      <dataTable 
        :table-data="itemList" 
        :columns="columns" 
        :page-obj="pageObj" 
        :breads="breads" 
        :table-top="60">
        <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </dataTable>

    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'powerList',
  components: {
    dataTable
  },
  data() {
    return {
      columns: [{
        label: '角色名称',
        prop: 'name'
      },
      {
        label: '备注',
        prop: 'remark'
      },
  
      {
        label: '创建时间',
        prop: 'date',
        sortable: true
      },
      {
        slot: 'operate'
      }
      ],
      breads: ['供应商管理', '供应商权限管理'],
      itemList: [{
        date: '2016-05-02',
        name: '部长',
        remark: '角色'
      },
      {
        date: '2016-05-02',
        name: '部长',
        remark: '角色'
      },
      {
        date: '2016-05-02',
        name: '部长',
        remark: '角色'
      },
      {
        date: '2016-05-02',
        name: '部长',
        remark: '角色'
      }
      ],
      pageObj: {
        size: 10,
        total: 1,
        currentPage: 1,
        sizes: [100, 200, 300],
        func: (currentPage) => {
          this.pageTurning(currentPage)
        }
      }
    }
  },
  methods: {
    //跳转编辑页面
    handleEdit() {
      this.$router.push('/admin/supply/powerEdit')
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功')
          this.itemList.splice(index, 1)
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
	.absolut {
		position: absolute;
		top: 66px
	}
</style>
