<template>
  <el-dialog
    :title="form.id ? '编辑处分等级配置' : '新增处分等级配置'"
    v-model="visible"
    :width="600"
    :close-on-click-modal="false"
    draggable>
    <el-form
      ref="dataFormRef"
      :model="form"
      :rules="dataRules"
      label-width="120px"
      v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-select
              v-model="form.levelCode"
              filterable
              clearable
              placeholder="请选择处分等级">
            <el-option
                v-for="item in punlish_level"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="处分等级名称" prop="levelName">
            <el-input
              v-model="form.levelName"
              placeholder="请输入处分等级名称"
              clearable
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="处分期(月)" prop="punishDuration">
            <el-input-number
              v-model="form.punishDuration"
              :min="0"
              :max="999"
              placeholder="请输入处分期"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="是否需要思想汇报" prop="needReport">
            <el-radio-group v-model="form.needReport">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="form.needReport === '1'">
          <el-form-item label="思想汇报次数" prop="reportTimes">
            <el-input-number
              v-model="form.reportTimes"
              :min="0"
              :max="999"
              placeholder="请输入思想汇报次数"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="form.needReport === '1'">
          <el-form-item label="汇报频率(月)" prop="reportFrequency">
            <el-input-number
              v-model="form.reportFrequency"
              :min="0"
              :max="999"
              placeholder="请输入汇报频率"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="到期提醒天数" prop="remindDays">
            <el-input-number
              v-model="form.remindDays"
              :min="0"
              :max="999"
              placeholder="请输入到期提醒天数"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="form.sort"
              :min="0"
              :max="999"
              placeholder="请输入排序"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="form.remarks"
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
              maxlength="250"
              show-word-limit
              style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="StuPunlishLevelConfigFormDialog">
import { ref, reactive, nextTick } from 'vue'
import { useMessage } from '/@/hooks/message'
import { addObj, editObj, getDetail } from '/@/api/stuwork/stupunlishlevelconfig'
import {useDict} from "/@/hooks/dict";

const emit = defineEmits(['refresh'])

// 定义变量内容
const dataFormRef = ref()
const visible = ref(false)
const loading = ref(false)
const operType = ref('add')
const { punlish_level } = useDict('punlish_level');
// 提交表单数据
const form = reactive({
  id: '',
  levelCode: '',
  levelName: '',
  punishDuration: 0,
  needReport: '0',
  reportTimes: 0,
  reportFrequency: 0,
  remindDays: 0,
  sort: 0,
  status: '1',
  remarks: ''
})

// 定义校验规则
const dataRules = {
  levelCode: [
    { required: true, message: '请输入处分等级代码', trigger: 'blur' }
  ],
  levelName: [
    { required: true, message: '请输入处分等级名称', trigger: 'blur' }
  ],
  needReport: [
    { required: true, message: '请选择是否需要思想汇报', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
}

// 打开弹窗
const openDialog = async (type: string = 'add', row?: any) => {
  visible.value = true
  operType.value = type

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields()
    form.id = ''
    form.levelCode = ''
    form.levelName = ''
    form.punishDuration = 0
    form.needReport = '0'
    form.reportTimes = 0
    form.reportFrequency = 0
    form.remindDays = 0
    form.sort = 0
    form.status = '1'
    form.remarks = ''

    // 编辑时填充数据
    if (type === 'edit' && row) {
      form.id = row.id
      form.levelCode = row.levelCode || ''
      form.levelName = row.levelName || ''
      form.punishDuration = row.punishDuration || 0
      form.needReport = row.needReport || '0'
      form.reportTimes = row.reportTimes || 0
      form.reportFrequency = row.reportFrequency || 0
      form.remindDays = row.remindDays || 0
      form.sort = row.sort || 0
      form.status = row.status || '1'
      form.remarks = row.remarks || ''

      // 如果需要获取详情
      if (row.id && (!row.levelCode || !row.levelName)) {
        loading.value = true
        getDetail(row.id).then((res: any) => {
          if (res.data) {
            form.levelCode = res.data.levelCode || ''
            form.levelName = res.data.levelName || ''
            form.punishDuration = res.data.punishDuration || 0
            form.needReport = res.data.needReport || '0'
            form.reportTimes = res.data.reportTimes || 0
            form.reportFrequency = res.data.reportFrequency || 0
            form.remindDays = res.data.remindDays || 0
            form.sort = res.data.sort || 0
            form.status = res.data.status || '1'
            form.remarks = res.data.remarks || ''
          }
        }).catch(() => {
        }).finally(() => {
          loading.value = false
        })
      }
    }
  })
}

// 提交表单
const onSubmit = async () => {
  if (!dataFormRef.value) return

  await dataFormRef.value.validate(async (valid: boolean) => {
    if (!valid) return

    loading.value = true
    try {
      const submitData = {
        levelCode: form.levelCode,
        levelName: form.levelName,
        punishDuration: form.punishDuration,
        needReport: form.needReport,
        reportTimes: form.needReport === '1' ? form.reportTimes : 0,
        reportFrequency: form.needReport === '1' ? form.reportFrequency : 0,
        remindDays: form.remindDays,
        sort: form.sort,
        status: form.status,
        remarks: form.remarks
      }

      if (operType.value === 'add') {
        await addObj(submitData)
        useMessage().success('新增成功')
      } else {
        await editObj({
          id: form.id,
          ...submitData
        })
        useMessage().success('编辑成功')
      }
      visible.value = false
      emit('refresh')
    } catch (err: any) {
      useMessage().error(err.msg || (operType.value === 'add' ? '新增失败' : '编辑失败'))
    } finally {
      loading.value = false
    }
  })
}

// 暴露方法
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
</style>