<template>
  <div class="head-container">
    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
      <template #prefix>
        <Icon icon="ep:search" />
      </template>
    </el-input>
  </div>
  <div class="head-container">
    <el-tree
      ref="treeRef"
      :data="deptList"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :props="defaultProps"
      default-expand-all
      highlight-current
      node-key="id"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script lang="ts" name="SystemUserDeptTree" setup>
import { ElTree } from 'element-plus'
// import * as DeptApi from '@/api/system/dept'
import { defaultProps, handleTree } from '@/utils/tree'

const deptName = ref('')
const deptList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()

/** 获得部门树 */
const getTree = async () => {
  // const res = await DeptApi.getSimpleDeptList()
  const res = [
    {
      id: 100,
      name: '芋道源码',
      parentId: 0
    },
    {
      id: 101,
      name: '深圳总公司',
      parentId: 100
    },
    {
      id: 103,
      name: '研发部门',
      parentId: 101
    },
    {
      id: 108,
      name: '市场部门',
      parentId: 102
    },
    {
      id: 102,
      name: '长沙分公司',
      parentId: 100
    },
    {
      id: 104,
      name: '市场部门',
      parentId: 101
    },
    {
      id: 109,
      name: '财务部门',
      parentId: 102
    },
    {
      id: 105,
      name: '测试部门',
      parentId: 101
    },
    {
      id: 106,
      name: '财务部门',
      parentId: 101
    },
    {
      id: 107,
      name: '运维部门',
      parentId: 101
    }
  ]
  deptList.value = []
  deptList.value.push(...handleTree(res))
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  emits('node-click', row)
}
const emits = defineEmits(['node-click'])

/** 初始化 */
onMounted(async () => {
  await getTree()
})
</script>
