<!--
 * @Description: 考核等级管理新建/编辑/详情页面
 * @Author: 李亚光
 * @Date: 2023-09-14
 -->
<script lang="ts" setup name="RuleGradeHandler">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import ruleTable from './ruleTable.vue'
import { addGrade, editGrade } from '@/api/home/rule/grade'
const $route = useRoute()
const $router = useRouter()
// 对话框类型：create,update
const dialogStatus = ref('create')
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 表单实例对象
const ruleFormRef = ref()
// 等级评定规则表格实例对象
const ruleTableRef = ref()
// 表单对象
const ruleForm = ref({
  levelDesc: '', // 	等级评定描述
  levelName: '', // 	等级评定名称
  remarks: '', // 备注
  evaluationRules: [],
  id: '',
})
// 表单验证规则
const rules = ref<FormRules>({
  levelDesc: [{ required: true, message: '等级评定描述必填', trigger: ['blur', 'change'] }],
  levelName: [{ required: true, message: '等级评定名称必填', trigger: ['blur', 'change'] }],
  evaluationRules: [{ required: true, message: '等级评定规则必填', trigger: ['blur', 'change'] }],
})
// 等级评定规则验证
watch(() => ruleTableRef.value?.list, (newVal) => {
  if (newVal.length) {
    ruleFormRef.value.clearValidate('evaluationRules')
  }
}, {
  deep: true,
})
// 编辑
const update = () => {
  ruleForm.value.evaluationRules = ruleTableRef.value.list
  editGrade({ ...ruleForm.value }).then((res) => {
    ElMessage.success('操作成功')
    $router.go(-1)
  })
}
// 新增
const create = () => {
  ruleForm.value.evaluationRules = ruleTableRef.value.list
  addGrade({ ...ruleForm.value }).then((res) => {
    ElMessage.success('操作成功')
    $router.go(-1)
  })
}
// 保存
const saveData = (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  formEl.validate().then((res) => {
    if (ruleTableRef.value.checkCertificateList()) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        if ($route.path.includes('update')) {
          update()
        }
        else if ($route.path.includes('create')) {
          create()
        }
      })
    }
  })
}
onMounted(() => {
  dialogStatus.value = $route.params.type as string
  if (!$route.path.includes('create')) {
    const data = JSON.parse($route.query.row as string)
    console.log(data, 'data')
    ruleForm.value = data
  }
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page class="base-info-device" :title="`考核等级评定-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveData(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="$router.go(-1)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form
        ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px" class="form"
        :class="[$route.path.includes('detail') ? 'isDetail' : '']" :disabled="$route.path.includes('detail')"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="5" />
          <el-col :span="14">
            <el-form-item label="等级评定名称" prop="levelName">
              <el-input v-model.trim="ruleForm.levelName" placeholder="等级评定名称" :rows="1" maxlength="50" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="5" />
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="5" />
          <el-col :span="14">
            <el-form-item label="等级评定描述" prop="levelDesc">
              <el-input v-model.trim="ruleForm.levelDesc" type="textarea" placeholder="等级评定描述" :rows="3" maxlength="100" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="5" />
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="5" />
          <el-col :span="14">
            <!-- 等级评定规则表格 -->
            <el-form-item label="等级评定规则" prop="evaluationRules">
              <rule-table ref="ruleTableRef" :data="ruleForm.evaluationRules" />
            </el-form-item>
          </el-col>
          <el-col :span="5" />
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="5" />
          <el-col :span="14">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model.trim="ruleForm.remarks" type="textarea" placeholder="备注" :rows="4" maxlength="100" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="5" />
        </el-row>
      </el-form>
    </detail-block-com>
  </app-container>
</template>

<style lang="scss" scoped>
  .isDetail {
    ::v-deep {
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
        content: "";
        display: none;
      }
    }
  }
</style>