<template>
    <!-- 角色清单的抽屉 -->
    <el-drawer
      v-model="roleListDrawer.visible"
      @opened="roleListDrawerOpened"
      class="drawer-show-table"
    >
      <template #header>
        <div class="drawer-show-table-title">
          <svg-icon icon-class="close" width="20px" height="20px" @click="roleListDrawer.visible = false"/>
          <span>{{roleListDrawer.title}}</span>
        </div>
        <el-button type="primary" @click="openAddRoleDialog()" v-has-perm="['sys:user-group:designRole']">添加角色</el-button>
      </template>
      <el-table
        border
        :data="linkRoleList"
        highlight-current-row
        row-key="id"
        style="width: 100%"
      >
        <el-table-column prop="code" label="角色编码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remark" 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="deleteLinkRole(scope.row)" v-has-perm="['sys:user-group:rolelist:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!-- 添加角色的弹窗  -->
    <AddRoleDialog
      v-if="addRoleDialog.visible"
      :selectGroup="[selectItem]"
      :selectedRoles="linkRoleList"
      :addRoleDialog="addRoleDialog"
      @updateVisible="updateVisible"
    ></AddRoleDialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from 'vue';
import { ElForm, ElMessageBox  } from 'element-plus';
import {
  getLinkRole, deleteLinkRoleData
} from '@/api/userGroup';
import AddRoleDialog from './addRoleDialog.vue'

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

const { proxy }: any = getCurrentInstance();
const state = reactive({
  linkRoleList: [] as any,
  addRoleDialog:{// 分配角色
    title: '分配角色',
    visible: false
  }
})
const {
  linkRoleList,
  addRoleDialog
} = toRefs(state);

/******************************* 角色清单 start *****************************/
function roleListDrawerOpened() {
  // 获取角色清单
  getLinkRole({dataId:props.selectItem!.dataId}).then((res)=>{
    state.linkRoleList = res.data;
  }).catch(()=>{})
}
// 删除关联的角色
function deleteLinkRole(row: any) {
  ElMessageBox.confirm(
    '确认删除此角色?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteLinkRoleData({
        data:{
          roleId: row.dataId,
          groupId: props.selectItem!.dataId
        }
      }).then(() => {
        proxy.$ElMessage.success('删除角色成功');
        roleListDrawerOpened();
      });
    })
    .catch(() => {

    })
}
// 添加角色弹框
function openAddRoleDialog() {
  state.addRoleDialog.visible = true;
}
function updateVisible() {
  state.addRoleDialog.visible = false;
  roleListDrawerOpened();
}

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

</style>
