<template>
    <!-- 用户清单的抽屉 -->
    <el-drawer
      v-model="userListDrawer.visible"
      @opened="userListDrawerOpened"
      class="drawer-show-table"
    >
      <template #header>
        <div class="drawer-show-table-title">
          <svg-icon icon-class="close" width="20px" height="20px" @click="userListDrawer.visible = false"/>
          <span>{{userListDrawer.title}}</span>
        </div>
        <el-button type="primary" @click="openAddUserDialog()" v-has-perm="['sys:user-group:designUser']">添加用户</el-button>
      </template>
      <el-table
        border
        :data="linkUserList"
        highlight-current-row
        row-key="id"
        style="width: 100%"
      >
        <el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jobNo" label="工号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
        <el-table-column
          width="60"
          label="操作"
          align="center"
          class-name="table-operation"
          fixed="right"
        >
          <template #default="scope">
            <el-button type="danger" link @click="deleteLinkUser(scope.row)" v-has-perm="['sys:user-group:userlist:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!-- 添加用户的弹窗  -->
    <AddUserDialog
      v-if="addUserDialog.visible"
      :selectGroup="[selectItem]"
      :selectedUsers="linkUserList"
      :addUserDialog="addUserDialog"
      @updateVisible="updateVisible"
    ></AddUserDialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from 'vue';
import { ElForm, ElMessageBox  } from 'element-plus';
import {
  getLinkUser, deleteLinkUserData
} from '@/api/userGroup';
import AddUserDialog from './addUserDialog.vue'

const props = defineProps({
  userListDrawer: {
    type: Object
  },
  selectItem: {
    type: Object
  },
});

const { proxy }: any = getCurrentInstance();
const state = reactive({
  linkUserList: [] as any,
  addUserDialog:{// 分配用户
    title: '分配用户',
    visible: false
  }
})
const {
  linkUserList,
  addUserDialog
} = toRefs(state);

/******************************* 用户清单 start *****************************/
function userListDrawerOpened() {
  // 获取用户清单
  getLinkUser({dataId:props.selectItem!.dataId}).then((res)=>{
    state.linkUserList = res.data;
  }).catch(()=>{})
}
// 删除关联的用户
function deleteLinkUser(row: any) {
  ElMessageBox.confirm(
    '确认删除此用户?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteLinkUserData({
        data:{
          userId: row.dataId,
          groupId: props.selectItem!.dataId
        }
      }).then(() => {
        proxy.$ElMessage.success('删除用户成功');
        userListDrawerOpened();
      });
    })
    .catch(() => {

    })
}
// 添加用户弹框
function openAddUserDialog() {
  state.addUserDialog.visible = true;
}
function updateVisible() {
  state.addUserDialog.visible = false;
  userListDrawerOpened();
}

</script>
<style scoped lang="scss">

</style>
