<template>
  <SysDialog
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @onClose="onClose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-tree
        ref="assignTree"
        :data="assignTreeData.list"
        node-key="id"
        :props="defaultProps"
        empty-text="暂无数据"
        :show-checkbox="true"
        default-expand-all
        :highlight-current="true"
        :default-checked-keys="assignTreeData.assignTreeChecked"
      />
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { reactive, ref, nextTick } from "vue";
import { ElTree } from "element-plus";
import { isArrayLength } from "@/utils/is";
import { DataPermissionDepartmentDto } from "@/api/dataPermission/dataPermissionModel";
import { DataPermissionType } from "@/composables/dataPermission/usedataPermissionSet";


interface Props {
  dataType: DataPermissionType.USER | DataPermissionType.ROLE//用户/角色
}
// withDefaults ==> 用于辅助defineProps设置默认值
const props = withDefaults(defineProps<Props>(), {
  dataType: DataPermissionType.USER
});
const emit = defineEmits(["changeChecked"]);
//弹框属性
const { dialog, onShow, onClose } = useDialog();
//权限树的ref属性
const assignTree = ref<InstanceType<typeof ElTree>>();
//树的属性配置
const defaultProps = reactive({
  children: "children",
  label: "name",
});
//权限树数据
const assignTreeData = reactive({
  list: [],
  assignTreeChecked: [],
  currentAssignTreeData: {} as Recordable,
});

//确定事件
const confirm = async () => {
  //获取选中的数据
  let checkedIds = assignTree.value?.getCheckedKeys(false) || [];
  //获取半节点ids
  let hlfIds = assignTree.value?.getHalfCheckedKeys() || [];
  // 获取选择对象节点
  const checkedNodes = assignTree.value?.getCheckedNodes(true);
  const dataPermissionDepartmentDtoList: DataPermissionDepartmentDto[] = [];
  const currentAssignTreeData = assignTreeData.currentAssignTreeData;
  // 用户
  if(props.dataType === DataPermissionType.USER) {
    checkedNodes?.forEach((item) => {
      if (item) {
        dataPermissionDepartmentDtoList.push({
          userDataPermissionId: currentAssignTreeData.dataPermissionType,
          departmentId: item.id,
        });
      }
    });
  } else {
    // 角色
    checkedNodes?.forEach((item) => {
      if (item) {
        dataPermissionDepartmentDtoList.push({
          roleDataPermissionId: currentAssignTreeData.dataPermissionType,
          departmentId: item.id,
        });
      }
    });
  }
  emit("changeChecked", {
    _id: currentAssignTreeData._id,
    dataPermissionDepartmentDtoList,
  });
  onClose();
};
/**
 * 弹框展示
 * @param row 当前行数据
 * @param departmentList 部门树数据 
 */
const show = (row, departmentList) => {
  assignTreeData.list = []
  assignTreeData.assignTreeChecked = [];
  //查询权限树的数据
  assignTreeData.currentAssignTreeData = row;
  if (isArrayLength(row.dataPermissionDepartmentDtoList)) {
    assignTreeData.assignTreeChecked = row.dataPermissionDepartmentDtoList.map(
      (item) => item.departmentId
    );
  }
  nextTick(() => {
    assignTreeData.list = departmentList
  })
  //设置弹框的属性
  dialog.height = 500;
  dialog.width = 520;
  dialog.title = "设置部门人员";
  onShow();
};

//暴露方法给父组件调用
defineExpose({
  show,
});
</script>
