<!-- 
    TODO 用户、角色数据权限设置
 -->
<template>
  <SysDialog
    class="data-permissionset-set"
    :visible="dialog.visible"
    v-bind="getBindValue"
    :confirm-loading="dialog.confirmLoading"
    @onClose="onclose"
    @onConfirm="onconfirm"
  >
    <template #content>
      <div class="content-warp">
        <VxeBasicTable
          v-bind="dataPermissionOptions"
          ref="dataPermissionTableRef"
          @cell-click="hanleCellClick"
        >
          <!-- 权限名称 -->
          <template #default_dataPermissionId="{ row }">
            {{
              deal_FindItemName(
                row.dataPermissionId,
                getDataPermissionList
              )
            }}
          </template>
          <template #edit_dataPermissionId="scoped">
            <div v-if="scoped.row.dataPermissionId">
              <BaseSelect
                v-model:modelValue="scoped.row.dataPermissionId"
                :options="filterOnPermissionList(scoped.row.dataPermissionId)"
                placeholder="权限名称"
                @change="updateStatus(scoped)"
              />
            </div>
            <div v-else>
              <BaseSelect
                v-model:modelValue="scoped.row.dataPermissionId"
                :options="addFilterPermissionList"
                placeholder="权限名称"
                @change="updateStatus(scoped)"
              />
            </div>
          </template>
          <!-- 数据权限 -->
          <template #default_dataPermissionType="{ row }">
            {{
              deal_FindItemName(
                row.dataPermissionType,
                storeSystemType.getDataPermissionTypeList
              )
            }}
          </template>
          <template #edit_dataPermissionType="scoped">
            <BaseSelect
              v-model:modelValue="scoped.row.dataPermissionType"
              clearable
              :options="storeSystemType.getDataPermissionTypeList"
              placeholder="数据权限"
              @change="updateStatus(scoped)"
            />
          </template>
          <!-- 部门选择 -->
          <template #default_dataPermissionDepartment="{ row }">
            {{ getDepartmentName(row.dataPermissionDepartmentDtoList) }}
          </template>
          <template #edit_dataPermissionDepartment="{ row }">
            <div v-show="row.dataPermissionType === DataPermissionTypes.DEP">
              <el-input
                type="hidden"
                v-model="row.dataPermissionDepartmentDtoList"
              ></el-input>
              <el-input
                @click="selectDepartment(row)"
                readonly
                placeholder="部门选择"
                v-model="dataPermissionSetState.departmentName"
              ></el-input>
            </div>
          </template>
          <!-- 操作栏 -->
          <template #header_action>
            <el-button
              type="primary"
              link
              :icon="Plus"
              @click="hanleAdd"
              style="font-size: 18px"
              v-permission="['sys:userDataPermission:delete']"
            />
          </template>
          <template #default_action="scoped">
            <el-button
              type="primary"
              link
              :icon="Minus"
              @click="hanleDelete(scoped)"
              style="font-size: 18px"
              v-permission="['sys:userDataPermission:delete']"
            />
          </template>
        </VxeBasicTable>
      </div>
    </template>
  </SysDialog>
  <!-- 部门选择 -->
  <AssignAuthorityData
    ref="assignAuthorityDataRef"
    :data-type="dataType"
    :department-list="getLeftTreeData"
    @change-checked="changeChecked"
  />
</template>
<script lang="ts" setup>
import { Plus, Minus } from "@element-plus/icons-vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { reactive } from "vue";
import { DataPermissionType, useDataPermissionListComputed, useDataPermissionSet } from "@/composables/dataPermission/usedataPermissionSet";
import { deal_FindItemName } from "@/utils/dealFindData";
import AssignAuthorityData from "@/components/AssignAuthorityData.vue";
import { useVxeGridHanleHooks } from "@/components/VxeTable/hooks";

enum DataPermissionTypes {
  /**
   * 部门
   */
  DEP = 1
}
interface Props {
  dataType: DataPermissionType.USER |  DataPermissionType.ROLE//用户/角色
}
// withDefaults ==> 用于辅助defineProps设置默认值
const props = withDefaults(defineProps<Props>(), {
  dataType: DataPermissionType.USER
});
const emit = defineEmits<{
  (e: "saveConfirm", params: any, onclose: Fn, setLoading: Fn): void;
}>();
// 弹框一些配置
const getBindValue = reactive({
  title: "数据权限设置",
  width: 680,
  height: 0,
  closeOnClickModal: false,
});
const { dialog, onClose, onShow, setLoading } = useDialog();

const {
  dataPermissionOptions,
  dataPermissionTableRef,
  show,
  onclose,
  onconfirm,
  hanleAdd,
  hanleDelete,
  storeSystemType,
  assignAuthorityDataRef,
  selectDepartment,
  dataPermissionSetState,
  getDataPermissionList,
  getLeftTreeData,
  changeChecked,
  getDepartmentName,
  hanleCellClick
} = useDataPermissionSet(onClose, onShow, emit, props, setLoading);
const { updateStatus } = useVxeGridHanleHooks(dataPermissionTableRef)
const {
  addFilterPermissionList,
  filterOnPermissionList,
} = useDataPermissionListComputed(dataPermissionOptions, getDataPermissionList)
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.data-permissionset-set {
  .content-warp {
    padding: 10px;
  }
}
</style>
