<template>
  <Skeleton active :paragraph="{ rows: 8 }" :loading="showTreeSkeleton">
    <BasicTree
      v-if="deptTreeArray.length"
      :fieldNames="{ title: 'label', key: 'id' }"
      :tree-data="deptTreeArray"
      :showLine="{ showLeafIcon: false }"
      :search="true"
      v-model:searchValue="searchValue"
      defaultExpandAll
      @select="$emit('select')"
      v-model:selectedKeys="selectDeptId"
    />
    <!-- 仅本人数据权限 可以考虑直接不显示 -->
    <div class="mt-5" v-else>
      <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" />
    </div>
  </Skeleton>
</template>

<script setup lang="ts">
import { Skeleton, Empty } from "ant-design-vue";
import { BasicTree } from "@/components/Tree";
import { onMounted, ref } from "vue";
import type { DeptTree } from "@/api/system/user/model";
import { departmentTree } from "@/api/system/user";
import { eachTree } from "@/utils/helper/treeHelper";

defineEmits<{
  (e: "select"): void;
}>();

const selectDeptId = defineModel("selectDeptId", {
  type: Array as PropType<string[]>,
  required: true,
});

const searchValue = defineModel("searchValue", {
  type: String,
  default: "",
});

/** 部门数据源 */
type DeptTreeArray = DeptTree[];
const deptTreeArray = ref<DeptTreeArray>([]);
/** 骨架屏加载 */
const showTreeSkeleton = ref<boolean>(true);

onMounted(() => {
  // const ret = await departmentTree();
  // 添加部门前图标 不需要 注释eachTree即可

  const ret = [
    {
      children: [
        {
          children: [
            {
              icon: "",
              id: 4,
              label: "电梯资料",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 6,
              label: "超期年检",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 7,
              label: "超期维保",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 8,
              label: "乘客反馈",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 9,
              label: "超期年检-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 10,
              label: "超期维保-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 11,
              label: "乘客反馈-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 12,
              label: "签到",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 13,
              label: "监控",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 14,
              label: "运行状态",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 15,
              label: "运行数据",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 16,
              label: "年度运行",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 17,
              label: "维修",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 18,
              label: "维保",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 19,
              label: "救援",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 20,
              label: "体检报告",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 21,
              label: "电梯资料-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 22,
              label: "监控-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 23,
              label: "签到-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 24,
              label: "现行状态-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 25,
              label: "运行数据-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 26,
              label: "年度运行-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 27,
              label: "维修-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 28,
              label: "维保-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 29,
              label: "救援-h5版",
              parentId: 3,
              weight: 0,
            },
            {
              icon: "",
              id: 30,
              label: "体检报告-h5版",
              parentId: 3,
              weight: 0,
            },
          ],
          icon: "",
          id: 3,
          label: "常用应用",
          parentId: 1,
          weight: 0,
        },
        {
          children: [
            {
              icon: "",
              id: 5,
              label: "维保计划",
              parentId: 2,
              weight: 0,
            },
          ],
          icon: "",
          id: 2,
          label: "其他应用",
          parentId: 1,
          weight: 0,
        },
      ],
      icon: "",
      id: 1,
      label: "组织",
      parentId: 0,
      weight: 0,
    },
  ];
  eachTree(ret, (item) => {
    item.icon = "";
  });
  deptTreeArray.value = ret;
  showTreeSkeleton.value = false;
});
</script>
