<template>
  <a-skeleton :animation="true" :loading="loading">
    <a-card>
      <a-skeleton-line :rows="8" />
    </a-card>

    <template #content>
      <a-card
        :body-style="{ minHeight: '100px', padding: '8px' }"
        :header-style="{ padding: '8px 3px 8px 8px' }"
      >
        <template #title>
          <div class="align-center flex-row">
            <a-input
              class="flex-1"
              :allow-clear="true"
              placeholder="搜索部门.."
              @input="inputChange"
              @clear="inputChange('')"
              ><template #prefix> <icon-search /> </template
            ></a-input>
            <a-tooltip content="仅展示部门的直属成员" :popup-visible="deptTooltipVisible">
              <template #content>
                仅展示部门的直属成员
                <a-tooltip content="不再提示">
                  <icon-close style="cursor: pointer" @click="handleCloseDeptTooltip" />
                </a-tooltip>
              </template>
              <a-tooltip content="仅展示部门的直属成员">
                <a-checkbox
                  style="padding-right: 5px"
                  v-model="innerOnly"
                  @change="handleCheckboxChange"
                ></a-checkbox>
              </a-tooltip>
            </a-tooltip>
          </div>
        </template>
        <a-empty v-if="realTreeData.length === 0" description="没有匹配的部门"></a-empty>
        <a-tree
          v-else
          :data="realTreeData"
          :field-names="fieldNames"
          :block-node="true"
          :default-expand-all="true"
          @select="handleTreeSelect"
        >
          <template #icon="{ node }">
            <div v-if="node.id === '0'" class="iconfont icon-enterprise dept-tree-icon"></div>
            <icon-user-group class="dept-tree-icon" v-else />
          </template>
          <template #title="nodeData">
            <item-node :item-data="nodeData" :search-key="searchKey" title-field="name"></item-node>
          </template>
        </a-tree>
      </a-card>
    </template>
  </a-skeleton>
</template>

<script setup lang="ts">
import { TreeFieldNames } from '@arco-design/web-vue'
import { IconSearch, IconUserGroup, IconClose } from '@arco-design/web-vue/es/icon'
import { ref } from 'vue'
import { fetchAllTree } from '@/api/upms/dept'
import useSearch from '../_hooks/use-tree-search'
import useDeptTooltip from './use-dept-tooltip'
import ItemNode from './f-dept-tree-item-node.vue'

const emit = defineEmits<{
  (event: 'change', val: { deptId?: string; innerOnly: boolean }): void
}>()

const { deptTooltipVisible, handleCloseDeptTooltip } = useDeptTooltip()
const { searchKey, treeData, realTreeData, inputChange } = useSearch()

const fieldNames: TreeFieldNames = {
  key: 'id',
  title: 'name'
}

const loading = ref(true)

fetchAllTree().then((res) => {
  treeData.value = res
  loading.value = false
})

const selectDeptId = ref<string | undefined>(undefined)
const innerOnly = ref(false)
const handleCheckboxChange = () => {
  emit('change', {
    deptId: selectDeptId.value,
    innerOnly: innerOnly.value
  })
}

const handleTreeSelect = (keys: (string | number)[]) => {
  if (selectDeptId.value === keys[0]) {
    return
  }
  // eslint-disable-next-line prefer-destructuring
  selectDeptId.value = keys[0] as string
  emit('change', {
    deptId: selectDeptId.value,
    innerOnly: innerOnly.value
  })
}
</script>

<style scoped lang="scss">
.dept-tree-icon {
  padding-bottom: 2px;
}
.arco-avatar {
  margin-bottom: 2px;
}
::v-deep(.arco-tree-node-icon) {
  margin-right: 6px;
}
.arco-tree-node-selected {
  .dept-tree-icon {
    color: rgb(var(--primary-6));
  }
}
</style>
