<!-- 部门树选择 -->
<script setup lang="ts" name="SelectEmployeesDialog">
import { getDeptList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
const emits = defineEmits(['change'])
const visibleDialog = ref(false)
const selectDeptTreeRef = ref()
const list = ref([]) as any
const checkoutList = ref([]) as any
const loading = ref(false)
// 查询参数
const listQuery = ref({
  deptName: '', // 部门名称
})

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

const handleCheckChange = () => {
  checkoutList.value = selectDeptTreeRef.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()
}

defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-model="visibleDialog" title="选择部门" width="500px" append-to-body>
    <el-tree
      ref="selectDeptTreeRef"
      v-loading="loading"
      :data="list"
      show-checkbox
      :accordion="true"
      :default-expand-all="true"
      :props="{
        children: 'children',
        label: 'fullName',
      }"
      @check-change="handleCheckChange"
    />
    <template #footer>
      <el-button @click="closeDialog">
        取 消
      </el-button>
      <el-button type="primary" @click="saveDialog">
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>