<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 255px)"
        :need-page="false"
        cache-key="systemRoleTable15"
      >

        <template v-slot:description="{ row }">
          <div v-html="row.description"></div>
        </template>
        <template v-slot:userNames="{ row }">
          <div>
            <el-tag
              v-for="item in row.userNames.split(',')"
              :key="item.id"
              size="mini"
              type="primary"
              :disable-transitions="true"
            >
              {{ item }}
            </el-tag>
          </div>

        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">

          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-finished"
            @click="openUser(row)"
          >
           管理用户
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-finished"
            @click="openAuth(row)"
          >
            管理菜单
          </el-link>

        </template>
        <template v-slot:tableHeaderTitle="{ column }">
          <span style="display: inline-block;text-align: center; width: 100%;">{{column.label}}</span>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 权限分配弹窗 -->
    <role-auth :data="current" :visible.sync="showAuth"/>
    <staffSelection
      ref="staffSelection"
      @reload="reload"
    ></staffSelection>
  </div>
</template>

<script>
import {threeMembersPageAPI} from "@/api/system/threeMembers/api";
import RoleAuth from "@/views/system/role/components/role-auth.vue";
import staffSelection from "./components/staffSelection.vue";
import {deepClone} from "@/utils";

export default {
  name: 'threeMembers',
  components: {staffSelection, RoleAuth},
  data() {
    return {
      current:{},
      showAuth:false,
      // 表格列配置
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'name',
          label: '角色',
          align: 'center',
          showOverflowTooltip: true,
          width: 120
        },
        {
          prop: 'userNames',
          label: '用户账户',
          minWidth: 100,
          slot: 'userNames',
          align: 'center',
          headerSlot: 'tableHeaderTitle',
        },
        {
          prop: 'description',
          label: '说明',
          minWidth: 250,
          slot: 'description',
          headerSlot: 'tableHeaderTitle',
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 300,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],
    };
  },
  created() {
  },
  methods: {
    /* 表格数据源 */
    datasource({page, limit, where, order}) {
      return threeMembersPageAPI({pageNum: page, size: limit, ...where});
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({page: 1, where});
    },
    /* 显示分配权限 */
    openAuth(row) {
      if (row) {
        this.isUpdate = true;
        this.current = Object.assign({}, row);
      } else {
        this.isUpdate = false;
      }
      this.showAuth = true;
    },
    openUser(row){
      let params = deepClone(row)
      this.$refs.staffSelection.open(params);
    },
  }
};
</script>
