<template>
  <div class="p-2">
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" :draggable="draggable">
      <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item v-show="false" label="所属区域id" prop="areaId">
              <el-input v-model="formData.areaId" :disabled="true" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="所属区域" prop="areaName">
              <el-input v-model="formData.areaName" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房间编码" prop="roomCode">
              <el-input v-model="formData.roomCode" placeholder="请输入房间编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房间名称" prop="roomName">
              <el-input v-model="formData.roomName" placeholder="请输入房间名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房间类型" prop="roomType">
              <el-select v-model="formData.roomType" placeholder="请选择房间类型">
                <el-option v-for="dict in FJLX" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门牌号1" prop="codeOne">
              <el-input v-model="formData.codeOne" placeholder="请输入门牌号1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门牌号2" prop="codeTwo">
              <el-input v-model="formData.codeTwo" placeholder="请输入门牌号2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门牌号3" prop="codeThree">
              <el-input v-model="formData.codeThree" placeholder="请输入门牌号3" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门牌号4" prop="codeFour">
              <el-input v-model="formData.codeFour" placeholder="请输入门牌号4" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门牌号5" prop="codeFive">
              <el-input v-model="formData.codeFive" placeholder="请输入门牌号5" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </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="PtRoomForm" lang="ts">
import * as PtRoomApi from '@/api/basics/room/ptRoom';
import { PtRoomForm } from '@/api/basics/room/ptRoom/types';
import { useI18n } from 'vue-i18n';

defineOptions({ name: 'PtRoomForm' });

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

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

/** 数据字典 */
const { FJLX } = toRefs<any>(proxy?.useDict('FJLX'));
// 对话框
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<PtRoomForm>({
  roomId: undefined,
  areaId: undefined,
  areaName: '',
  roomCode: '',
  roomName: '',
  roomType: '',
  codeOne: '',
  codeTwo: '',
  codeThree: '',
  codeFour: '',
  codeFive: '',
  remark: ''
});
// 表单校验规则
const formRules = reactive({
  roomId: [{ required: true, message: '房间Id,主键不能为空', trigger: 'blur' }],
  areaId: [{ required: true, message: '所属区域id不能为空', trigger: 'blur' }],
  roomCode: [{ required: true, message: '房间编码不能为空', trigger: 'blur' }],
  roomName: [{ required: true, message: '房间名称不能为空', trigger: 'blur' }]
  /* roomType: [{ required: true, message: '房间类型不能为空', trigger: 'change' }], */
  /* codeOne: [{ required: true, message: '门牌号1不能为空', 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 PtRoomApi.getPtRoom(id);
      Object.assign(formData.value, res.data);
    } finally {
      formLoading.value = false;
    }
  }
};
/** 表单重置 */
const resetForm = () => {
  formData.value = {
    roomId: undefined,
    areaId: undefined,
    roomCode: '',
    roomName: '',
    roomType: '',
    codeOne: '',
    codeTwo: '',
    codeThree: '',
    codeFour: '',
    codeFive: '',
    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 PtRoomForm;
    if (formType.value === 'create') {
      await PtRoomApi.addPtRoom(data);
      proxy?.$modal.msgSuccess('新增成功');
    } else {
      await PtRoomApi.updatePtRoom(data);
      proxy?.$modal.msgSuccess('修改成功');
    }
    dialog.visible = false;
    // 发送操作成功的事件
    emit('success');
  } finally {
    formLoading.value = false;
  }
};

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