<!-- 筛选系统用户弹窗 -->
<script name="FilterCustomerDept" lang="ts" setup>
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDeptList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'
import type { DeptInfo } from '@/views/system/dept/dept-interface'

const emit = defineEmits(['recordSelected'])

const showFilterDialog = ref<boolean>(false)
const deptPid = ref<string>('')
const columns = ref <Array<TableColumn>>([
  { text: '组织名称', value: 'simpleName', align: 'center' },
  { text: '组织全称', value: 'fullName', align: 'center' },
  { text: '备注', value: 'tips', align: 'center' },
]) // 表头

const deptList = ref<Array<DeptInfo>>([])

// 查询委托方名录列表
const getDeptTree = () => {
  getDeptList({ deptName: '' }).then((res) => {
    if (res.code === 200) {
      const treeData = res.data.list.filter((item: { pids: string }) => item.pids.includes(deptPid.value))
      deptList.value = toTreeList<DeptInfo>(treeData, '0', false)
    }
    else {
      deptList.value = []
    }
  })
}

// 选中用户
const selectSingleDept = (row: Object) => {
  emit('recordSelected', row)
}

const showOrHideFilterDialog = (show: boolean, pid = '') => {
  if (show === false) {
    deptPid.value = ''
  }
  else {
    deptPid.value = pid
    getDeptTree()
  }

  showFilterDialog.value = show
}

defineExpose({
  showOrHideFilterDialog,
})
</script>

<template>
  <el-dialog v-model="showFilterDialog" title="选择委托方部门" :append-to-body="true" :close-on-click-modal="false" top="10vh">
    <!-- 表格数据展示 -->
    <table-container :title-show="false">
      <!-- 表格区域 -->
      <el-table ref="table" :data="deptList" row-key="id" border stripe default-expand-all style="width: 100%;" :tree-props="{ children: 'children' }">
        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" class="table-text-button" @click="selectSingleDept(scope.row)">
              选定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </table-container>
  </el-dialog>
</template>
