<template>
  <a-spin :spinning="loading">
    <div class="tree-container">
      <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="請(qǐng)輸入" />
      <a-tree v-model:expandedKeys="expandedKeys" v-model:auto-expand-parent="autoExpandParent"
        v-model:selectedKeys="selectedKeys" :showIcon="true" :checkable="false" v-if="treeData" :tree-data="treeData"
        @click.stop="clickTree" :field-names="{ title: 'name', key: 'id' }">
        <template #title="{ children, name, id, level }">
          <div class="flex f-between">
            <div class="mr-30">
              <span v-if="name.indexOf(searchValue) > -1">
                {{ name.substring(0, name.indexOf(searchValue)) }}
                <span style="color: var(--main-color)">{{ searchValue }}</span>
                {{ name.substring(name.indexOf(searchValue) + searchValue.length) }}
              </span>
              <span v-else>{{ name }}</span>
            </div>
            <div style="display: inline-block;">
              <a-dropdown trigger="click">
                <span> ···</span>
                <template #overlay>
                  <a-menu @click="(item, key) => onMenuClick(item)">
                    <a-menu-item v-for="item in operateList(level)" :key="item.value" :label="item.label"
                      :string="item.orgString">{{ item.label
                      }}</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </template>

      </a-tree>
    </div>
  </a-spin>

</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, watch } from 'vue'
import { useStore } from '@/store/index'
import emitter from '@/utils/eventBus';
import { getdepartmentList } from '@/request/department'
import { message, type TreeProps } from 'ant-design-vue';
const emit = defineEmits(['openDrawer', 'update:open'])
const store = useStore()
const operateList = (level) => {
  let add = { label: '新增子部門', value: '11', orgString: 'addEditDepartment', }
  let otherOperate = [
    { label: '編輯部門', value: '12', orgString: 'addEditDepartment', },
    { label: '移動(dòng)部門和所有人', value: '13', orgString: 'moveDepartment', },
    { label: '僅移動(dòng)人員', value: '14', orgString: 'movePerson', },
    { label: '刪除', value: '15', orgString: 'deleteOrganization', },
  ]
  return level < 3 ? [add, ...otherOperate] : otherOperate
}
const searchValue = ref('')
const treeData = ref()
const selectedKeys = ref<string[]>([]);
// const checkedKeys = ref<string[]>(['2','5']);
const onMenuClick = (item) => {
  selectTreeInfo.value.operateTitle = item.item.label
  selectTreeInfo.value.operateKey = item.key
  selectTreeInfo.value.orgComponent = item.item.string
  emit('openDrawer', selectTreeInfo.value)
}
const loading = ref(false)
let selectTreeInfo: any = ref({})
const clickTree = (data, info) => {
  selectTreeInfo.value = info
  emit('openDrawer', selectTreeInfo.value)
}

// 獲取列表
const getDepartment = () => {
  loading.value = true
  getdepartmentList().then((res: any) => {
    if (res.code === 200) {
      treeData.value = res.data
      expandedKeys.value = [res.data[0].id] // 默認(rèn)展開第一級(jí)部門
      generateList(res.data)
    } else {
      message.error(res.message)
    }
    loading.value = false
  }).catch((err) => {
    loading.value = false
  })
}
getDepartment()
defineExpose({ getDepartment })
const dataList = [];
const getParentKey = (key, tree,) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.id === key)) {
        parentKey = node.id;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};

const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.id;
    dataList.push({ key, title: node.name });
    if (node.children) {
      generateList(node.children);
    }
  }
};
const expandedKeys = ref([]);
const autoExpandParent = ref(true);
watch(() => searchValue.value, value => {
  const expanded = dataList
    .map((item) => {
      if (item.title.indexOf(value) > -1) {
        return getParentKey(item.key, treeData.value);
      }
      return null;
    })
    .filter((item, i, self) => item && self.indexOf(item) === i);
  expandedKeys.value = expanded;
});

</script>
<style scoped lang="less">
.tree-container {
  padding: 20px;
  height: calc(100vh - 100px);
  min-width: 300px;
  border: 1px solid #ccc;
  overflow: auto;
  box-shadow: 1px 1px 10px #ccc;
}
</style>