<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="filter-container">
        <groupSearch @search="reload"></groupSearch>
      </div>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable5"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="openEdit('add', {})"
            class="ele-btn-icon"
            >新建
          </el-button>
        </template>
        <template v-slot:status="{ row }">
          <el-tag size="medium" v-if="row.status === 0"> 开启 </el-tag>
          <el-tag size="medium" type="info" v-if="row.status === 1">
            关闭
          </el-tag>
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="openEdit('upDate', row)"
            >修改</el-button
          >

          <el-popconfirm
            class="ele-action"
            title="确定要删除此信息吗？"
            @confirm="remove(row.id)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
    <add-dialog ref="addDialogRef" @done="reload"></add-dialog>
  </div>

</template>

<script>
  import { deleteUserGroup, getUserGroupPage } from '@/api/bpm/userGroup';
  import groupSearch from './components/groupSearch.vue';
  import addDialog from './components/addDialog.vue';

  // import {CommonStatusEnum} from "@/utils/constants";
  // import {listSimpleUsers} from "@/api/system/user";

  export default {
    name: 'BpmUserGroup',
    components: { groupSearch, addDialog },
    data() {
      return {
        // 遮罩层
        loading: true,
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'id',
            label: '编号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'name',
            label: '组名',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'description',
            label: '描述',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'status',
            slot: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ]
      };
    },
    created() {
      // this.getList();
      // 获得用户列表
      // listSimpleUsers().then(response => {
      //   this.users = response.data;
      // })
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getUserGroupPage({
          pageNum: page,
          size: limit,
          ...where
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      //新增编辑
      openEdit(type, row) {
        this.$refs.addDialogRef.open(type, row, row.id);
        this.$refs.addDialogRef.$refs.form &&
          this.$refs.addDialogRef.$refs.form.clearValidate();
      },

      //删除接口
      remove(delData) {
        deleteUserGroup(delData).then((res) => {
          this.$message.success('删除成功！');
          this.reload();
        });
      }
    }
  };
</script>
