<template>
  <div>
    <ele-pro-table
      ref="table"
      :needPage="false"
      :columns="columns"
      :datasource="datasource"
      cache-key="systemRoleTable4"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="handlAdd"
        >
          新增
        </el-button>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-popconfirm
          class="ele-action"
          title="确定要删除此角色吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <staffSelection
      ref="staffSelection"
      @confirm="confirmStaffSelection"
    ></staffSelection>
  </div>
</template>
<script>
  import staffSelection from './staffSelection.vue';
  export default {
    components: {
      staffSelection
    },
    data () {
      return {
        columns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            prop: 'code',
            label: '设备编码'
          },
          {
            prop: 'name',
            label: '设备名称'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        datasource: []
      };
    },
    methods: {
      remove (row) {
        let index = this.datasource.findIndex((n) => n.id == row.id);
        if (index !== -1) {
          this.datasource.splice(index, 1);
        }
      },
      handlAdd () {
        this.$refs.staffSelection.open(
          JSON.parse(JSON.stringify(this.datasource))
        );
      },
      confirmStaffSelection (data) {
        this.datasource = data;
      },

      // 清空表格
      restTable () {
        this.datasource = [];
      }
    }
  };
</script>
