<template>
  <!-- 病历文件基本信息弹窗 -->
  <el-dialog
    :title="formData.id ? '编辑模板' : '新增模板'"
    v-model="dialogVisible"
    width="900px"
    destroy-on-close
    @open="handleOpen"
  >
    <!-- 使用el-form包裹表单 -->
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="120px">
      <el-row :gutter="24" class="mb8">
        <el-col :span="24">
          <el-form-item label="模板名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入模板名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="使用范围" prop="useRange">
            <el-radio-group v-model="formData.useRange">
              <el-radio :value="0" size="large">全院</el-radio>
              <el-radio :value="1" size="large">指定机构</el-radio>
              <el-radio :value="2" size="large">指定用户</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入版本"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer"></div>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import useUserStore from '@/store/modules/user';
import { ElMessage } from 'element-plus';
import { components } from '@/template';
const emits = defineEmits(['submitOk']);
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref(null);

const dialogVisible = defineModel('dialogVisible', {
  type: Boolean,
  default: false,
});

// 表单数据
const formData = ref({
  id: 0,
  name: '',
  displayOrder: 0,
  contextJson: '',
  definitionId: 0,
  useRange: 2,
  organizationId: 0,
  userId: 0,
  remark: '',
});
// 表单验证规则（响应式，支持动态验证）
const rules = reactive({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
});
const handleOpen = () => {
  if (props.formData) {
    formData.value = props.formData;
  } else {
    resetForm();
  }
};

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行保存操作
      saveForm();
    } else {
      // 表单验证失败
      ElMessage.error('请填写必填项');
      return false;
    }
  });
};
// 保存表单
const saveForm = async () => {
  // try {
  //   // 如果有当前节点数据，表示是编辑操作
  //   if (formData.value.id && formData.value.id !== '') {
  //     const res = await updateTemplate(formData.value);
  //     if (res.code == 200) {
  //       ElMessage.success('更新成功');
  //       emits('submitOk');
  //     } else {
  //       ElMessage.error('更新失败', error);
  //     }
  //   } else {
  //     // 新建操作
  //     const res = await addTemplate(formData.value);
  //     if (res.code == 200) {
  //       ElMessage.success('保存成功');
  //       emits('submitOk');
  //     } else {
  //       ElMessage.error('保存失败', error);
  //     }
  //   }
  // } catch (error) {
  //   console.log(error);
  //   // ElMessage.error('保存失败',error);
  // }
};
// 重置表单
const resetForm = () => {
  formRef.value?.resetFields();
};

onMounted(() => {});
</script>
<style lang="scss" scoped></style>
