<!-- 培训计划详情 -->
<script lang="ts" setup name="PlanAdd">
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import selectMeasurePersonDialog from './components/selectMeasurePersonDialog.vue'
import type { IaddPersonListType, IformInlineType } from './plan_interface'
import selectEmployeesDialog from '@/components/dialog/selectEmployeesDialog.vue'
import DeptSelect from '@/components/DeptSelect/index.vue'
import { SCHEDULE } from '@/utils/scheduleDict'
import {
  getListDetail,
  getListSave,
  getListSubmit,
  getListUpdate,
} from '@/api/system/plan'
const infoId = ref('') // id
const userVisible = ref(false) // 控制选择用户弹框显隐
const checkedList = ref([]) // 选择的成员
const pageType = ref('add') // 页面类型: add,edit, detail
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
} // 字典

// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// 表单
const formInline = ref<IformInlineType>({
  createTime: '', // 创建时间
  deptId: '', // 部门id
  deptName: '', // 部门名称
  director: '', // 负责人
  effectiveCompany: '', // 实施单位
  id: '', // 主键
  planName: '', // 培训名称
  planNo: '', // 培训编号
  remark: '', // 备注
  trainAddress: '', // 培训地点
  trainContent: '', // 培训内容
  trainHour: '', // 培训学时
  trainNumber: '', // 培训人数
  trainPerson: '', // 培训人员
  trainStaffList: [], // 人员信息
  trainTime: '', // 培训时间
})
const addId = ref('') // 保存后的id-用于提交
const ruleFormRef = ref<FormInstance>() // 表单ref
// 人员信息表头
const columns = [
  { text: '学员名称', value: 'name' },
  { text: '单位名称', value: 'company' },
  { text: '技术职称', value: 'technologyJob' },
  { text: '签到时间', value: 'createtime', width: '180' },
]
const dialogVisible = ref(false)
const SelectionList = ref<IaddPersonListType[]>([])
// 表单验证规则
const rules = ref({
  planNo: [{ required: true, message: '计划编号不能为空', trigger: ['blur', 'change'] }],
  planName: [{ required: true, message: '培训名称不能为空', trigger: ['blur', 'change'] }],
  trainPerson: [{ required: true, message: '培训对象不能为空', trigger: ['blur', 'change'] }],
  trainNumber: [{ required: true, message: '培训人数不能为空', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '培训人数只能为数字', trigger: ['blur', 'change'] },
  ],
  trainHour: [{ required: true, message: '培训学时不能为空', trigger: ['blur', 'change'] }],
  trainTime: [{ required: true, message: '培训时间不能为空', trigger: ['blur', 'change'] }],
  trainAddress: [{ required: true, message: '培训地点不能为空', trigger: ['blur', 'change'] }],
  deptId: [{ required: true, message: '主管部门不能为空', trigger: ['blur', 'change'] }],
  effectiveCompany: [{ required: true, message: '实施单位不能为空', trigger: ['blur', 'change'] }],
  director: [{ required: true, message: '负责人不能为空', trigger: ['blur', 'change'] }],
  trainContent: [{ required: true, message: '培训内容不能为空', trigger: ['blur', 'change'] }],
})
// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
const userListRef = ref() // 选择人员dialog ref
// 点击表单中的选择人员
const selectPerson = () => {
  // userListRef.value.initDialog()
  userVisible.value = true
}
// 增加行
const addRow = () => {
  const index = formInline.value.trainStaffList.findIndex(item => !item.name)
  if (index !== -1) {
    ElMessage.warning('请完善上一条设备信息')
    return
  }
  if (formInline.value) {
    formInline.value.trainStaffList.push(
      {
        company: '', // 单位名称
        examResult: '', // 考核结果
        id: '',
        name: '', // 学员名称
        remark: '', // 备注
        signTime: '', // 签到时间
        staffId: '', // 任务id
        technologyJob: '', // 技术职称
      },
    )
  }
}
// 记录点击的第几行
const listIndex = ref(0)
// 计量人员Ref
const userTrainRef = ref()
// 选择计量人员
const handleClick = (index: number) => {
  listIndex.value = index // 选择的第几行
  userTrainRef.value.initDialog()
}
// 点击关闭
const handleClose = () => {
  dialogVisible.value = false
}

// 删除行
const deleteList = () => {
  formInline.value.trainStaffList = formInline.value.trainStaffList.filter(
    (item: IaddPersonListType) => {
      return !SelectionList.value.includes(item)
    },
  )
}
// 多选框选择
const handleSelectionChange = (e: any) => {
  SelectionList.value = e
}
// 选择完负责人
const confirmPerson = (val: IaddPersonListType) => {
  formInline.value.director = val.name
  userVisible.value = false
}
if (infoId.value && infoId.value !== '') {
  getListDetail({ id: infoId.value }).then((res) => {
    formInline.value = res.data
  })
}
// 选完计量人员
const confirmSelectPerson = (val: any) => {
  formInline.value.trainStaffList[listIndex.value].name = val[0].name // 学员名称
  formInline.value.trainStaffList[listIndex.value].company = val[0].deptId // 单位名称
  formInline.value.trainStaffList[listIndex.value].technologyJob = val[0].technologyJob // 技术职称
  formInline.value.trainStaffList[listIndex.value].staffId = val[0].id // 计量人员表id
}
// 点击提交
const submit = async (formEl: FormInstance | undefined, buttonType: string) => {
  if (!formEl) { return }
  await formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm(`确认${buttonType}吗？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (buttonType === '提交' && pageType.value !== 'edit') {
          if (addId.value === '') {
            ElMessage.warning('请先保存')
          }
          else {
            getListSubmit({ id: addId.value, formId: SCHEDULE.TRAIN_APPROVAL }).then((res) => {
              if (res.code === 200) {
                close()
              }
            })
          }
        }
        else if (buttonType === '提交' && pageType.value === 'edit') {
          formInline.value.trainStaffList.map((item: IaddPersonListType) => {
            delete item.updateTime
            delete item.createTime
          })
          formInline.value.id = infoId.value
          getListUpdate(formInline.value).then((res) => {
            if (res.code === 200) {
              close()
            }
          })
        }
      })
    }
  })
}
// 点击保存
const preserve = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确认保存吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        getListSave(formInline.value).then((res) => {
          if (res.code === 200) {
            addId.value = res.data.id
            ElMessage.success('保存成功！')
          }
        })
      })
    }
  })
}
// 打印
const printObj = ref({
  id: 'print', // 需要打印元素的id
  popTitle: '证书报告模板', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})
</script>

<template>
  <app-container>
    <detail-page :title="`培训计划-${textMap[pageType]}`">
      <template #btns>
        <el-button
          v-if="pageType !== 'detail'"
          type="primary"
          @click="submit(ruleFormRef, '提交')"
        >
          提交
        </el-button>
        <el-button
          v-if="pageType === 'detail'"
          v-print="printObj"
          type="primary"
        >
          打印
        </el-button>
        <el-button
          type="primary"
          @click="preserve(ruleFormRef)"
        >
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="formInline"
        class="demo-form-inline"
        :rules="rules"
        label-width="auto"
        label-position="right"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="计划编号:">
              <el-input
                v-model="formInline.planNo"
                :placeholder="pageType === 'detail' ? '无' : '系统自动生成'"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培训名称:" prop="planName">
              <el-input
                v-model="formInline.planName"
                :placeholder="pageType === 'detail' ? '无' : '请输入培训名称'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培训对象:" prop="trainPerson">
              <el-input
                v-model="formInline.trainPerson"
                :placeholder="pageType === 'detail' ? '无' : '请输入培训对象'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培训人数:" prop="trainNumber">
              <el-input
                v-model="formInline.trainNumber"
                :placeholder="pageType === 'detail' ? '无' : '请输入培训人数'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="培训时间:" prop="trainTime">
              <el-date-picker
                v-model="formInline.trainTime"
                type="datetime"
                style="width: 100%;"
                placeholder="培训时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培训学时:" prop="trainHour">
              <el-input
                v-model="formInline.trainHour"
                :placeholder="pageType === 'detail' ? '无' : '请输入培训学时'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主管部门:" prop="deptId">
              <dept-select
                ref="deptSelect"
                v-model="formInline.deptId"
                :placeholder="pageType === 'detail' ? '无' : '请选择主管部门'"
                :disabled="pageType === 'detail'"
                :dept-show="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实施单位:" prop="effectiveCompany">
              <el-input
                v-model="formInline.effectiveCompany"
                :placeholder="pageType === 'detail' ? '无' : '请输入实施单位'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="负责人:" prop="director">
              <el-input
                v-model="formInline.director"
                :placeholder="pageType === 'detail' ? '无' : '请输入负责人'"
                :disabled="pageType === 'detail'"
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="selectPerson"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培训地点:" prop="trainAddress">
              <el-input
                v-model="formInline.trainAddress"
                :placeholder="pageType === 'detail' ? '无' : '请输入培训地点'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="培训内容:" prop="trainContent">
              <el-input
                v-model="formInline.trainContent"
                :placeholder="pageType === 'detail' ? '无' : '请输入培训内容'"
                :disabled="pageType === 'detail'"
                type="textarea"
                autosize
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model="formInline.remark"
                :placeholder="pageType === 'detail' ? '无' : '请输入备注'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="人员信息">
      <template #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="addRow">
          增加行
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="info" @click="deleteList">
          删除行
        </el-button>
      </template>
      <el-table
        :data="formInline.trainStaffList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template v-if="item.text === '学员名称' && pageType !== 'detail'" #default="scope">
            <el-input v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="input">
              <template #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  @click="handleClick(scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
  </app-container>

  <!-- 选择计量人员组件列表 -->
  <select-measure-person-dialog ref="userTrainRef" @add="confirmSelectPerson" />
  <!-- 用户弹框 -->
  <select-employees-dialog
    v-model:visible="userVisible"
    v-model:data="checkedList"
    :multi="false"
    @change="confirmPerson"
  />
</template>