<!-- 部门树选择 -->
<script setup lang="ts" name="SelectEmployeesDialog">
import { Switch } from '@element-plus/icons-vue'
import { getDeptList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
const emits = defineEmits(['change'])
const visibleDialog = ref(false)
const list = ref([]) as any
const checkoutList = ref([]) as any
const loading = ref(false)
const tree = ref()
// 全部组织id, 用于全选
const allDeptIds = ref([])
// 树展开状态
const treeExpand = ref(true)
// 全选
const nodeCheckedAll = ref(false)
// 父子联动
const treeCheckStrictly = ref(false)

// 查询参数
const listQuery = ref({
  deptName: '', // 部门名称
})

// 获取列表数据
const fetchData = (isNowPage = false) => {
  loading.value = true
  getDeptList(listQuery.value).then((res) => {
    const tempList = res.data.list
    allDeptIds.value = tempList.map((item: { id: string }) => item.id)
    list.value = toTreeList(tempList, '0', false)
    loading.value = false
  })
}

const handleCheckChange = () => {
  checkoutList.value = tree.value.getCheckedNodes()
  console.log('全部选中的节点')
  console.log(checkoutList.value)
}

const initDialog = () => {
  visibleDialog.value = true
  fetchData()
}

const closeDialog = () => {
  visibleDialog.value = false
}

const saveDialog = () => {
  const checkedList = checkoutList.value.map((item: any) => {
    return {
      ...item,
      type: 3, // type: 1.成员 2.角色 3.部门
      targetId: item.deptId,
      name: item.fullName,
    }
  })
  emits('change', checkedList)
  closeDialog()
}

/**
 * 改变树节点展开状态，递归
 * @param node 改变的节点
 * @param value 展开/折叠
 */
function changeTreeNodeStatus(node: any, value: boolean) {
  node.expanded = value // 给当前节点赋值
  if (node.childNodes) {
    for (let i = 0; i < node.childNodes.length; i++) { // 给子节点赋值
      node.childNodes[i].expanded = value
      if (node.childNodes[i].childNodes && node.childNodes[i].childNodes!.length > 0) { // 如果子节点还有子节点，递归
        changeTreeNodeStatus(node.childNodes[i], value)
      }
    }
  }
}

// 点击展开或折叠按钮
function expandOrCollapse() {
  treeExpand.value = !treeExpand.value
  changeTreeNodeStatus(tree.value.store.root, treeExpand.value)
}
// 全选或全不选
function handleCheckedTreeNodeAll(value: any) {
  tree.value.setCheckedKeys(value ? allDeptIds.value : [])
}

defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-model="visibleDialog" title="选择部门" width="500px" append-to-body>
    <div class="tool-line">
      <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
        展开/折叠
      </el-button>
      <el-checkbox v-model="nodeCheckedAll" style="margin-left: 16px;" @change="handleCheckedTreeNodeAll">
        全选
      </el-checkbox>
      <el-checkbox v-model="treeCheckStrictly">
        父子联动
      </el-checkbox>
    </div>
    <el-tree
      ref="tree"
      v-loading="loading"
      :data="list"
      show-checkbox
      :accordion="true"
      :default-expand-all="true"
      :check-strictly="!treeCheckStrictly"
      :props="{
        children: 'children',
        label: 'fullName',
      }"
      node-key="id"
      @check-change="handleCheckChange"
    />
    <template #footer>
      <el-button @click="closeDialog">
        取 消
      </el-button>
      <el-button type="primary" @click="saveDialog">
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>