<template>
  <div class="p-2">
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" :draggable="draggable">
      <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="130px">
        <el-form-item label="学校名称" prop="schoolName">
          <el-input v-model="formData.schoolName" placeholder="请输入学校名称" />
        </el-form-item>
        <el-form-item label="学校代码" prop="schoolCode">
          <el-input v-model="formData.schoolCode" placeholder="请输入学校代码" />
        </el-form-item>
        <el-form-item label="学校英文名" prop="englishName">
          <el-input v-model="formData.englishName" placeholder="请输入学校英文名" />
        </el-form-item>
        <el-form-item label="学校地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入学校地址" />
        </el-form-item>
        <el-form-item label="建校年月" prop="foundYear">
          <el-input v-model="formData.foundYear" placeholder="请输入建校年月" />
        </el-form-item>
        <el-form-item label="邮政编码" prop="postCode">
          <el-input v-model="formData.postCode" placeholder="请输入邮政编码" />
        </el-form-item>
        <el-form-item label="行政区划" prop="administrative">
          <el-input v-model="formData.administrative" placeholder="请输入行政区划" />
        </el-form-item>
        <el-form-item label="校庆日" prop="anniversary">
          <el-input v-model="formData.anniversary" placeholder="请输入校庆日" />
        </el-form-item>
        <el-form-item label="办学类型" prop="officeType">
          <el-select v-model="formData.officeType" placeholder="请选择办学类型">
            <el-option v-for="dict in BXLX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主管部门" prop="chargeDept">
          <el-input v-model="formData.chargeDept" placeholder="请输入主管部门" />
        </el-form-item>
        <el-form-item label="法人代表工号" prop="legalPerson">
          <el-input v-model="formData.legalPerson" placeholder="请输入法人代表工号" />
        </el-form-item>
        <el-form-item label="法人证书号" prop="legalCertificate">
          <el-input v-model="formData.legalCertificate" placeholder="请输入法人证书号" />
        </el-form-item>
        <el-form-item label="校长姓名" prop="masterName">
          <el-input v-model="formData.masterName" placeholder="请输入校长姓名" />
        </el-form-item>
        <el-form-item label="校长工号" prop="masterNum">
          <el-input v-model="formData.masterNum" placeholder="请输入校长工号" />
        </el-form-item>
        <el-form-item label="党委负责人" prop="partyPerson">
          <el-input v-model="formData.partyPerson" placeholder="请输入党委负责人" />
        </el-form-item>
        <el-form-item label="组织机构码" prop="orgCode">
          <el-input v-model="formData.orgCode" placeholder="请输入组织机构码" />
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone">
          <el-input v-model="formData.telephone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="传真" prop="fax">
          <el-input v-model="formData.fax" placeholder="请输入传真" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="学校官网" prop="homePage">
          <el-input v-model="formData.homePage" placeholder="请输入学校官网" />
        </el-form-item>
        <el-form-item label="历史沿革" prop="history">
          <el-input v-model="formData.history" placeholder="请输入历史沿革" />
        </el-form-item>
        <el-form-item label="单位办别" prop="schoolType">
          <el-select v-model="formData.schoolType" placeholder="请选择单位办别">
            <el-option v-for="dict in DWBB" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主管单位" prop="chargeUnit">
          <el-input v-model="formData.chargeUnit" placeholder="请输入主管单位" />
        </el-form-item>
        <el-form-item label="所在地城乡类型" prop="cityType">
          <el-select v-model="formData.cityType" placeholder="请选择所在地城乡类型">
            <el-option v-for="dict in SZDCXLX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在地经济属性码" prop="economicCode">
          <el-select v-model="formData.economicCode" placeholder="请选择所在地经济属性码">
            <el-option v-for="dict in SZDQJJSX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在地民族属性" prop="raceProperty">
          <el-select v-model="formData.raceProperty" placeholder="请选择所在地民族属性">
            <el-option v-for="dict in SZDMZSX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学制" prop="educationalSystem">
          <el-input v-model="formData.educationalSystem" placeholder="请输入学制" />
        </el-form-item>
        <el-form-item label="入学年龄" prop="enrolAge">
          <el-input v-model="formData.enrolAge" placeholder="请输入入学年龄" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="formLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PtSchoolForm" lang="ts">
import * as PtSchoolApi from '@/api/basics/customer/ptSchool';
import { PtSchoolForm } from '@/api/basics/customer/ptSchool/types';
import { useI18n } from 'vue-i18n';

defineOptions({ name: 'PtSchoolForm' });

// 接收父组件传入属性
// const props = defineProps({})

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 国际化
const { t } = useI18n();

/** 数据字典 */
const { SZDCXLX, BXLX, SZDQJJSX, DWBB, SZDMZSX } = toRefs<any>(proxy?.useDict('SZDCXLX', 'BXLX', 'SZDQJJSX', 'DWBB', 'SZDMZSX'));
// 对话框
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
// 窗体是否可以拖动
const draggable = ref(true);
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formLoading = ref(false);
// 表单的类型：create - 新增；update - 修改
const formType = ref('');
// 表单引用
const formRef = ref<ElFormInstance>();
// 表单数据
const formData = ref<PtSchoolForm>({
  schoolId: undefined,
  schoolName: '',
  schoolCode: '',
  englishName: '',
  address: '',
  foundYear: '',
  postCode: '',
  administrative: '',
  anniversary: '',
  officeType: '',
  chargeDept: '',
  legalPerson: '',
  legalCertificate: '',
  masterName: '',
  masterNum: '',
  partyPerson: '',
  orgCode: '',
  telephone: '',
  fax: '',
  email: '',
  homePage: '',
  history: '',
  schoolType: '',
  chargeUnit: '',
  cityType: '',
  economicCode: '',
  raceProperty: '',
  educationalSystem: undefined,
  enrolAge: undefined,
  remark: ''
});
// 表单校验规则
const formRules = reactive({
  schoolId: [{ required: true, message: '学校Id,主键不能为空', trigger: 'blur' }],
  schoolName: [{ required: true, message: '学校名称不能为空', trigger: 'blur' }],
  address: [{ required: true, message: '学校地址不能为空', trigger: 'blur' }]
});
/** 当前组件方法 */
/** 窗体打开事件 */
const open = async (type: string, id?: number) => {
  dialog.visible = true;
  dialog.title = t('action.' + type);
  formType.value = type;
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      const res = await PtSchoolApi.getPtSchool(id);
      Object.assign(formData.value, res.data);
    } finally {
      formLoading.value = false;
    }
  }
};
/** 表单重置 */
const resetForm = () => {
  formData.value = {
    schoolId: undefined,
    schoolName: '',
    schoolCode: '',
    englishName: '',
    address: '',
    foundYear: '',
    postCode: '',
    administrative: '',
    anniversary: '',
    officeType: '',
    chargeDept: '',
    legalPerson: '',
    legalCertificate: '',
    masterName: '',
    masterNum: '',
    partyPerson: '',
    orgCode: '',
    telephone: '',
    fax: '',
    email: '',
    homePage: '',
    history: '',
    schoolType: '',
    chargeUnit: '',
    cityType: '',
    economicCode: '',
    raceProperty: '',
    educationalSystem: undefined,
    enrolAge: undefined,
    remark: ''
  };
  formRef.value?.resetFields();
};
// 传回给父组件的属性与方法
// 提供 open 方法，用于打开弹窗
defineExpose({ open });
/** 触发父组件的事件 */
/** 定义 success 事件，用于操作成功后的回调 */
const emit = defineEmits(['success']);
/** 提交按钮 */
const submitForm = async () => {
  // 校验表单
  if (!formRef.value) return;
  const valid = await formRef.value?.validate();
  if (!valid) return;
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value as unknown as PtSchoolForm;
    if (formType.value === 'create') {
      await PtSchoolApi.addPtSchool(data);
      proxy?.$modal.msgSuccess('新增成功');
    } else {
      await PtSchoolApi.updatePtSchool(data);
      proxy?.$modal.msgSuccess('修改成功');
    }
    dialog.visible = false;
    // 发送操作成功的事件
    emit('success');
  } finally {
    formLoading.value = false;
  }
};

/** 初始化 */
onMounted(() => {});
</script>
