<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useMapStore } from '@/stores/map'
import { createPro, updatePro, getProDetail } from '../api'
const ruleFormRef = ref<FormInstance>()
const store = useMapStore()

const emit = defineEmits<Emits>()
const categoryList = store.getMapValuesByKey('specialty_category')
const educationList = store.getMapValuesByKey('specialty_education_background')
const schoolingList = store.getMapValuesByKey('specialty_length_of_schooling')
const degreeCategoryList = store.getMapValuesByKey('specialty_degree_category')
const specialtyDegreeList = store.getMapValuesByKey('specialty_degree')
const statusList = store.getMapValuesByKey('system_status')

const form = reactive({
  code: '',
  name: '',
  category: '',
  education_background: '1',
  length_of_schooling: '1',
  degree_category: '',
  degree: '1',
  status: '1'
})
const rules = reactive<FormRules>({
  code: [{ required: true, message: '请输入专业代码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入专业名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择专业类别', trigger: 'change' }],
  education_background: [{ required: true, message: '请选择学历', trigger: 'change' }],
  length_of_schooling: [{ required: true, message: '请选择学制', trigger: 'change' }],
  degree_category: [{ required: true, message: '请选择学位门类', trigger: 'change' }],
  degree: [{ required: true, message: '请选择学位', trigger: 'change' }],
  status: [{ required: true, message: '请选择生效状态', trigger: 'change' }]
})
const props = defineProps({
  isShowProDialog: {
    type: Boolean
  },
  title: {
    type: String
  },
  id: {
    type: String
  },
  isEdit: {
    type: String
  }
})
interface Emits {
  (e: 'update:isShowProDialog', isShowProDialog: boolean): void
  (e: 'create'): void
}
// 取消
const handleCancel = () => {
  emit('update:isShowProDialog', false)
}

const handleConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      if (props.isEdit === '0') {
        const params: any = Object.assign({}, form)
        createPro(params).then(() => {
          ElMessage.success('新增专业成功')
          emit('update:isShowProDialog', false)
          emit('create')
        })
      } else if (props.isEdit === '1') {
        const params: any = Object.assign({ id: props.id }, form)
        updatePro(params).then(() => {
          ElMessage.success('更新专业成功')
          emit('update:isShowProDialog', false)
          emit('create')
        })
      } else {
        emit('update:isShowProDialog', false)
        emit('create')
      }
    }
  })
}
// 获取详情
if (props.isEdit === '2' || props.isEdit === '1') {
  const params: any = { id: props.id }
  getProDetail(params).then((res: any) => {
    Object.keys(form).forEach(key => {
      form[key] = res.data[key]
    })
  })
}
</script>
<template>
  <el-dialog :model-value="isShowProDialog" draggable :before-close="handleCancel" :title="props.title" width="30%">
    <el-form :model="form" label-position="right" label-width="auto" :rules="rules" ref="ruleFormRef" label-suffix="：">
      <el-form-item label="专业代码" prop="code">
        <el-input v-model="form.code" :disabled="props.isEdit === '2' || props.isEdit === '1'"></el-input>
      </el-form-item>
      <el-form-item label="专业名称" prop="name">
        <el-input v-model="form.name" :disabled="props.isEdit === '2' || props.isEdit === '1'"></el-input>
      </el-form-item>
      <el-form-item label="专业类别" prop="category">
        <el-select v-model="form.category" placeholder="请选择专业类别" :disabled="props.isEdit === '2'">
          <el-option
            v-for="(item, index) in categoryList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学历" prop="education_background">
        <el-radio-group v-model="form.education_background" :disabled="props.isEdit === '2'">
          <el-radio v-for="item in educationList" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学制" prop="length_of_schooling">
        <el-radio-group v-model="form.length_of_schooling" :disabled="props.isEdit === '2'">
          <el-radio v-for="item in schoolingList" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="学位门类" prop="degree_category">
        <el-select v-model="form.degree_category" :disabled="props.isEdit === '2'" placeholder="请选择学位门类">
          <el-option
            v-for="(item, index) in degreeCategoryList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学位" prop="degree">
        <el-radio-group v-model="form.degree" :disabled="props.isEdit === '2'">
          <el-radio v-for="item in specialtyDegreeList" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生效状态" prop="status">
        <el-radio-group v-model="form.status" :disabled="props.isEdit === '2'">
          <el-radio v-for="item in statusList" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer v-if="props.isEdit !== '2'">
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
