<!-- 选择发放人员 -->
<script lang="ts" setup name="SelectDistributorDialog">
import { ElButton, ElDialog, ElMessage } from 'element-plus'
import { toTreeList } from '@/utils/structure'
import { getAllUserList } from '@/api/system/user'
import { getAllDeptList } from '@/api/system/dept'
import { getStaffList } from '@/api/resource/register'
import { getDictByCode } from '@/api/system/dict'

const props = defineProps({
  title: {
    type: String,
    default: '选择人员',
  },
})
// ----------------------- 以下是字段定义 emits props ---------------------
const emits = defineEmits(['closeRefresh', 'confirm'])
// 对话框是否显示
const dialogVisible = ref(false)
const tableRef = ref()
const defaultProps = {
  children: 'children',
  label: 'name',
}
// 查询参数
const listQuery = reactive({
  name: '',
  deptName: '',
  rankExperience: '', // 军衔/时间
  titleExperience: '', // 职称职务/时间
  treatmentExperience: '', // 待遇等级时间
  labCode: '', // 实验室
  groupCode: '', // 组别
  offset: 1,
  limit: 20,
})
const list = ref([])
const checkoutList = ref([])
const total = ref(0)
const treeData = ref([]) as any
const loadingTable = ref<boolean>(false)
const loadingTree = ref<boolean>(false)
const columns = [
  { text: '姓名', value: 'staffName', align: 'center' },
  { text: '出生日期', value: 'birthday', align: 'center', width: '160' },
  { text: '军官/文职证号', value: 'officerNo', align: 'center', width: '160' },
  { text: '工作部门', value: 'deptName', align: 'center' },
  { text: '军衔/时间', value: 'rankExperience', align: 'center' },
  { text: '待遇级别/时间', value: 'treatmentExperience', align: 'center' },
  { text: '职称职务/时间', value: 'titleExperience', align: 'center' },
]
// 多选选中
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
}

// 获取列表数据
const fetchData = () => {
  loadingTable.value = true
  getStaffList(listQuery).then((res) => {
    list.value = res.data.rows
    total.value = res.data.total
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}

// 查询数据
const search = () => {
  fetchData()
}

// 重置
const reset = () => {
  listQuery.name = ''
  listQuery.deptName = ''
  listQuery.rankExperience = '' // 军衔/时间
  listQuery.titleExperience = '' // 职称职务/时间
  listQuery.treatmentExperience = '' // 待遇等级时间
  listQuery.labCode = '' // 实验室
  listQuery.groupCode = '' // 组别
  listQuery.offset = 1
  listQuery.limit = 20
  fetchData()
}

// 点击树形结构
const handleNodeClick = (data: any, node: any, dom: any) => {
  console.log('节点所对应的对象、', data)
  console.log('节点对应的 Node、', node)
  console.log('节点组件本身', dom)
  if (node.isLeaf) { // 叶子节点
    listQuery.labCode = node.parent.data.value as string
    listQuery.groupCode = data.value as string
  }
  else {
    listQuery.labCode = data.value as string
    listQuery.groupCode = '' as string
  }

  fetchData()
}

// 获取组织列表树数据
const fetchTreeData = async () => {
  // loadingTree.value = true
  // getAllDeptList(listQuery).then((res) => {
  //   treeData.value = toTreeList(res.data, '0', true)
  //   loadingTree.value = false
  // }).catch(() => {
  //   loadingTree.value = false
  // })
  // 实验室
  const labResponse = await getDictByCode('bizGroupCodeEquipment')
  const labDeptList = labResponse.data.map((item: { name: string }) => {
    return {
      ...item,
      label: item.name,
    }
  })
  const groupResponse = await getDictByCode('bizGroupCode')
  const groupCodeList = groupResponse.data.map((item: { name: string }) => {
    return {
      ...item,
      label: item.name,
    }
  })
  treeData.value = []
  labDeptList.forEach((labItem: any) => {
    treeData.value.push({
      ...labItem,
      children: groupCodeList,
    })
  })
}

// ----------初始化、关闭对话框相关-----------------
function initDialog() {
  dialogVisible.value = true

  // 获取树形结构数据
  fetchTreeData()
  // 获取列表数据
  fetchData()
  nextTick(() => {
    if (tableRef.value) {
      tableRef.value.clearMulti() // 清除上次的多选
    }
  })
}

// 点击确定
const confirm = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('至少选中一条数据')
    return false
  }
  emits('confirm', checkoutList.value)
  dialogClose()
}

// 关闭弹窗
function dialogClose() {
  dialogVisible.value = false
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="props.title"
    width="90%"
    :before-close="dialogClose"
    append-to-body
    :open-delay="0"
    :close-on-click-modal="false"
  >
    <div class="container">
      <!-- 左侧组织机构 -->
      <div class="left-container">
        <div class="dept-div">
          <el-card class="box-card" shadow="always">
            <template #header>
              <div class="clearfix">
                <span>组织机构</span>
              </div>
            </template>
            <el-scrollbar height="520px" class="user-dept-scroll">
              <el-tree
                v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
                :expand-on-click-node="false" highlight-current @node-click="handleNodeClick"
              />
            </el-scrollbar>
          </el-card>
        </div>
      </div>
      <!-- 右侧表格 -->
      <div ref="tableContainer" class="table">
        <!-- 筛选条件 -->
        <search-area :need-clear="true" @search="search" @clear="reset">
          <search-item>
            <el-input v-model="listQuery.name" placeholder="姓名" clearable />
          </search-item>
          <search-item>
            <el-input v-model="listQuery.deptName" placeholder="工作部门" clearable />
          </search-item>
          <search-item>
            <el-input v-model="listQuery.rankExperience" placeholder="军衔/时间" clearable />
          </search-item>
          <search-item>
            <el-input v-model="listQuery.treatmentExperience" placeholder="待遇级别/时间" clearable />
          </search-item>
          <search-item>
            <el-input v-model="listQuery.titleExperience" placeholder="职称职务/时间" clearable />
          </search-item>
        </search-area>
        <!-- 表头标题 -->
        <table-container :title-show="false">
          <normal-table
            ref="tableRef"
            :data="list" :total="total" :columns="columns" :query="listQuery"
            :list-loading="loadingTable" is-showmulti-select
            :height="520"
            @change="changePage"
            @multi-select="handleSelectionChange"
          >
            <template #preColumns>
              <el-table-column label="#" width="55" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </table-container>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="btnLoading" type="primary" @click="confirm">
          保存
        </el-button>
        <el-button @click="dialogClose">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
.container {
  width: 100%;
  display: flex;

  .left-container {
    width: 22%;
  }

  :deep(.el-radio__label) {
    display: none;
  }

  .table {
    width: 78%;
  }
}
</style>