<!-- 人员登记 基本信息 -->
<script name="RegisterResume" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { IStaffPromoteInfo, IStaffResumeInfo } from '../person-regitster'
import ResumeDialog from './resumeDialog.vue'
import PromoteDialog from './promoteDialog.vue'
import { delPromoteRecList, delResumeRecList, getPromoteList, getResumeList } from '@/api/resource/register'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const props = defineProps({
  operation: { type: String, default: '' },
  staffId: { type: String, default: '' },
})

/** ******* 经验履历表格 ********/
const rsmListQuery = {
  id: '',
  limit: 10,
  offset: 1,
}
const resumeColumns = ref<Array<TableColumn>>([
  { text: '履历名称', value: 'resumeName', align: 'center' },
  { text: '详细介绍', value: 'details', align: 'center' },
  { text: '时间', value: 'resumeDate', align: 'center', width: '200' },
]) // 表头
const rsmTotal = ref<number>(0) // 数据总条数
const resumeList = ref<IStaffResumeInfo[]>([]) // 表格数据
/** ******* 经验履历表格结束 ********/

/** ******* 晋升情况表格 ********/
const prmListQuery = {
  id: '',
  limit: 10,
  offset: 1,
}
const promoteColumns = ref<Array<TableColumn>>([
  { text: '晋升经历', value: 'promoteExperience', align: 'center' },
  { text: '晋升单位', value: 'company', align: 'center' },
  { text: '时间', value: 'promoteDate', align: 'center', width: '200' },
]) // 表头
const prmTotal = ref<number>(0) // 数据总条数
const promoteList = ref<IStaffPromoteInfo[]>([])
/** ******* 晋升情况表格结束 ********/

// 表格被选中的行
const resumeSelected = ref<IStaffResumeInfo[]>([])
const promoteSelected = ref<IStaffPromoteInfo[]>([])

// 子组件引用
const refResumeDialog = ref()
const refPromoteDialog = ref()

// 逻辑
// 表格多选
const rsmMultiSelect = (e: any) => {
  resumeSelected.value = e
}
const prmMultiSelect = (e: any) => {
  promoteSelected.value = e
}

const getResumeListByStaffId = () => {
  getResumeList(prmListQuery).then((res) => {
    if (res.code === 200) {
      rsmTotal.value = res.data.total
      resumeList.value = res.data.rows.map((item: any) => ({
        ...item,
        resumeDate: dayjs(item.resumeDate).format('YYYY-MM-DD'),
      }))
    }
  })
}

const getPromoteListByStaffId = () => {
  getPromoteList(prmListQuery).then((res) => {
    if (res.code === 200) {
      prmTotal.value = res.data.total
      promoteList.value = res.data.rows.map((item: any) => ({
        ...item,
        promoteDate: dayjs(item.promoteDate).format('YYYY-MM-DD'),
      }))
    }
  })
}

// 表格换页
const changeResumePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    rsmListQuery.limit = val.size
  }
  if (val && val.page) {
    rsmListQuery.offset = val.page
  }
  getResumeListByStaffId()
}

// 表格换页
const changePromotePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    prmListQuery.limit = val.size
  }
  if (val && val.page) {
    prmListQuery.offset = val.page
  }
  getPromoteListByStaffId()
}

// 删除经验履历记录
const delResumeRecords = () => {
  if (resumeSelected.value.length === 0) {
    ElMessage.warning('请至少选择一行')
    return
  }

  ElMessageBox.confirm('是否删除经验履历记录，此操作不可恢复', '提示', {
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
  // 前端界面删除
    resumeList.value = resumeList.value.filter(item => resumeSelected.value.includes(item) === false)

    // 调用后端接口进行删除
    const abiIdsSelected = ref<string[]>([])
    abiIdsSelected.value = resumeSelected.value.map((item: { id: string }) => item.id)
    abiIdsSelected.value = abiIdsSelected.value.filter(item => item !== '')
    if (abiIdsSelected.value.length > 0) {
      delResumeRecList({ ids: abiIdsSelected.value }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除经验履历记录成功')
        }
        else {
          ElMessage.error(`删除经验履历记录失败：${res.message}`)
        }

        getResumeListByStaffId()
      })
    }
  })
}

// 删除晋升情况记录
const delPromoteRecords = () => {
  if (promoteSelected.value.length === 0) {
    ElMessage.warning('请至少选择一行')
    return
  }

  ElMessageBox.confirm('是否删除晋升情况记录，此操作不可恢复', '提示', {
    confirmButtonText: '确认删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
  // 前端界面删除
    promoteList.value = promoteList.value.filter(item => promoteSelected.value.includes(item) === false)

    // 调用后端接口进行删除
    const proIdsSelected = ref<string[]>([])
    proIdsSelected.value = promoteSelected.value.map((item: { id: string }) => item.id)
    proIdsSelected.value = proIdsSelected.value.filter(item => item !== '')
    if (proIdsSelected.value.length > 0) {
      delPromoteRecList({ ids: proIdsSelected.value }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除晋升情况记录成功')
        }
        else {
          ElMessage.error(`删除晋升情况记录失败：${res.message}`)
        }

        getPromoteListByStaffId()
      })
    }
  })
}

// 编辑
const showEditDialog = (row: IStaffResumeInfo | IStaffPromoteInfo, tableName: string) => {
  switch (tableName) {
    case 'resume' :
      refResumeDialog.value.initRecordData(row)
      refResumeDialog.value.showRecordDialog(true, '编辑')
      break

    case 'promote':
      refPromoteDialog.value.initRecordData(row)
      refPromoteDialog.value.showRecordDialog(true, '编辑')
      break

    default:
      break
  }
}

// 新增
const addEditableRow = (tableName: string) => {
  switch (tableName) {
    case 'resume':
      refResumeDialog.value.showRecordDialog(true, '新增')
      break

    case 'promote':
      refPromoteDialog.value.showRecordDialog(true, '新增')
      break
    default:
      break
  }
}

watch(() => props.staffId, (newVal: string) => {
  rsmListQuery.id = newVal
  prmListQuery.id = newVal

  getResumeListByStaffId()
  getPromoteListByStaffId()
})
</script>

<template>
  <app-container>
    <el-form ref="resumeFormRef" label-position="right" label-width="110px" border stripe>
      <table-container title="经验履历">
        <template v-if="props.operation !== 'detail'" #btns-right>
          <el-button type="primary" @click="addEditableRow('resume')">
            增加行
          </el-button>
          <el-button type="info" @click="delResumeRecords">
            删除行
          </el-button>
        </template>

        <!-- 表格区域 -->
        <normal-table
          id="resumeTabel"
          :data="resumeList" :total="rsmTotal" :columns="resumeColumns"
          :query="{ limit: rsmListQuery.limit, offset: rsmListQuery.offset }"
          :is-showmulti-select="props.operation !== 'detail'"
          @change="changeResumePage"
          @multi-select="rsmMultiSelect"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ (rsmListQuery.offset - 1) * rsmListQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>

          <template #columns>
            <el-table-column v-if="props.operation !== 'detail'" fixed="right" label="操作" align="center" width="130">
              <template #default="{ row }">
                <el-button size="small" type="primary" @click="showEditDialog(row, 'resume')">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>

      <table-container title="晋升情况" style="margin-top: 30px;">
        <template v-if="props.operation !== 'detail'" #btns-right>
          <el-button type="primary" @click="addEditableRow('promote')">
            增加行
          </el-button>
          <el-button type="info" @click="delPromoteRecords">
            删除行
          </el-button>
        </template>

        <!-- 表格区域 -->
        <normal-table
          id="promoteTabel"
          :data="promoteList" :total="rsmTotal" :columns="promoteColumns"
          :query="{ limit: prmListQuery.limit, offset: prmListQuery.offset }"
          :is-showmulti-select="props.operation !== 'detail'"
          @change="changePromotePage"
          @multi-select="prmMultiSelect"
        >
          <template #preColumns>
            <el-table-column label="序号" width="55" align="center">
              <template #default="scope">
                {{ (rsmListQuery.offset - 1) * prmListQuery.limit + scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>

          <template #columns>
            <el-table-column v-if="props.operation !== 'detail'" fixed="right" label="操作" align="center" width="130">
              <template #default="{ row }">
                <el-button size="small" type="primary" @click="showEditDialog(row, 'promote')">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </table-container>
    </el-form>

    <resume-dialog ref="refResumeDialog" :staff-id="props.staffId" @record-saved="getResumeListByStaffId" />
    <promote-dialog ref="refPromoteDialog" :staff-id="props.staffId" @record-saved="getPromoteListByStaffId" />
  </app-container>
</template>