<!-- 培训记录选择培训人选信息列表弹窗 -->
<script lang="ts" setup name="selectPerson">
import { ElMessage } from 'element-plus'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits(['add'])
const dialogFormVisible = ref(false)

interface lListItem {
  name: string // 姓名
}
// 多选选中的内容
const checkoutList = ref([])
// 查询条件
const listQuery = ref<lListItem>({
  name: '', // 姓名
})
const loadingTable = ref<boolean>(false)
const total = ref(0)
const columns = ref<TableColumn[]>([
  { text: '姓名', value: 'name', align: 'center' },
  { text: '单位名称', value: 'company', align: 'center' },
  { text: '技术职称', value: 'technologyJob', align: 'center' },
  { text: '签到时间', value: 'signTime', width: '180' },
])
const list = ref([]) as any
const getList = ref([]) as any// 获取的表格存储一份
// 搜索

const search = () => {
  list.value = props.list.filter((item: any) => item.name === listQuery.value.name)
}
// 多选选中
const handleSelectionChange = (val: any) => {
  checkoutList.value = val
}
// 重置
const reset = () => {
  listQuery.value = {
    name: '', // 姓名
  }
  list.value = getList.value
}
// 点击确认
const confirm = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请先选择人员')
  }
  else {
    emits('add', checkoutList.value[0])
    dialogFormVisible.value = false
  }
}
// 监听数据变化
watch(() => props.list, (newNums) => {
  list.value = newNums
  getList.value = newNums // 原有数据存储一份，用于筛选之后的还原
},
{
  immediate: true,
  deep: true,
},
)
// 取消
const cancle = () => {
  dialogFormVisible.value = false
}
// 初始化
const initDialog = () => {
  dialogFormVisible.value = true
}
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-if="dialogFormVisible" v-model="dialogFormVisible" title="选择人员">
    <!-- 筛选条件 -->
    <search-area :need-clear="true" @search="search" @clear="reset">
      <search-item>
        <el-input v-model.trim="listQuery.name" placeholder="真实姓名" clearable />
      </search-item>
    </search-area>
    <!-- 查询结果Table显示 -->
    <div style="padding: 12px;">
      <normal-table
        :data="list" :total="total" :columns="columns" :query="listQuery"
        :list-loading="loadingTable" :pagination="false"
        is-showmulti-select :is-multi="false"
        @multiSelect="handleSelectionChange"
      >
        <template #preColumns>
          <el-table-column label="#" width="55" align="center" fixed="">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="cancle">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-radio__label) {
  display: none;
}
</style>