<template>
  <div class="p-2">
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="35%" :draggable="draggable">
      <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item label="卡类" prop="cardType">
          <el-select v-model="formData.cardType" placeholder="请选择卡类" clearable style="width: 40%">
            <el-option v-for="item in cardTypeOptions" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-checkbox v-model="formData.status" true-value="1" false-value="0" label="启用限额消费" border />
        </el-form-item>
        <el-form-item label="每日金额" prop="dailyMoney">
          <el-input v-model="formData.dailyMoney" type="number" placeholder="请输入每日金额" style="width: 40%">
            <template #suffix>
              <span>元</span>
            </template>
          </el-input>
          <span class="text-red-400 text-xs">（ 如同时启用日限额和餐限额功能；消费时的判断顺序是先判断日限额再判断餐限额）</span>
        </el-form-item>
        <el-form-item label="早餐金额" prop="oneMoney">
          <el-input v-model="formData.oneMoney" type="number" placeholder="请输入早餐金额" style="width: 40%">
            <template #suffix>
              <span>元</span>
            </template>
          </el-input>
          <span class="text-red-400">（各种限制额度如填入0则表示不限制）</span>
        </el-form-item>
        <el-form-item label="午餐金额" prop="twoMoney">
          <el-input v-model="formData.twoMoney" type="number" placeholder="请输入午餐金额" style="width: 40%">
            <template #suffix>
              <span>元</span>
            </template>
          </el-input>
          <span class="text-red-400">（各种限制额度如填入0则表示不限制）</span>
        </el-form-item>
        <el-form-item label="晚餐金额" prop="threeMoney">
          <el-input v-model="formData.threeMoney" type="number" placeholder="请输入晚餐金额" style="width: 40%">
            <template #suffix>
              <span>元</span>
            </template>
          </el-input>
          <span class="text-red-400">（各种限制额度如填入0则表示不限制）</span>
        </el-form-item>
        <el-form-item label="宵夜金额" prop="fourMoney">
          <el-input v-model="formData.fourMoney" type="number" placeholder="请输入宵夜金额" style="width: 40%">
            <template #suffix>
              <span>元</span>
            </template>
          </el-input>
          <span class="text-red-400">（各种限制额度如填入0则表示不限制）</span>
        </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="XfQuotaForm" lang="ts">
import { listUsePtCardType } from '@/api/basics/basicParameter/ptCardtype';
import { PtCardTypeVO } from '@/api/basics/basicParameter/ptCardtype/types';
import * as XfQuotaApi from '@/api/consumption/xfQuota';
import { XfQuotaForm } from '@/api/consumption/xfQuota/types';
import { useI18n } from 'vue-i18n';

defineOptions({ name: 'XfQuotaForm' });

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

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

// 对话框
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<XfQuotaForm>({
  quotaId: undefined,
  cardType: undefined,
  dailyMoney: undefined,
  oneMoney: undefined,
  twoMoney: undefined,
  threeMoney: undefined,
  fourMoney: undefined,
  remark: '',
  status: '1'
});
// 表单校验规则
const formRules = reactive({
  quotaId: [{ required: true, message: '限额Id,主键不能为空', trigger: 'blur' }],
  cardType: [{ required: true, message: '卡类Id不能为空', trigger: 'change' }],
  /* dailyMoney: [{ required: true, message: '每日金额不能为空', trigger: 'blur' }],
  oneMoney: [{ required: true, message: '早餐金额不能为空', trigger: 'blur' }],
  twoMoney: [{ required: true, message: '午餐金额不能为空', trigger: 'blur' }],
  threeMoney: [{ required: true, message: '晚餐金额不能为空', trigger: 'blur' }],
  fourMoney: [{ required: true, message: '宵夜金额不能为空', trigger: 'blur' }],
  remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }], */
  status: [{ required: true, message: '启用状态，0-未启用 1-启用不能为空', trigger: 'change' }]
});
/** 当前组件方法 */
/** 窗体打开事件 */
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 XfQuotaApi.getXfQuota(id);
      Object.assign(formData.value, res.data);
    } finally {
      formLoading.value = false;
    }
  }
};
/** 表单重置 */
const resetForm = () => {
  formData.value = {
    quotaId: undefined,
    cardType: undefined,
    dailyMoney: undefined,
    oneMoney: undefined,
    twoMoney: undefined,
    threeMoney: undefined,
    fourMoney: undefined,
    remark: '',
    status: '1'
  };
  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 XfQuotaForm;
    if (formType.value === 'create') {
      await XfQuotaApi.addXfQuota(data);
      proxy?.$modal.msgSuccess('新增成功');
    } else {
      await XfQuotaApi.updateXfQuota(data);
      proxy?.$modal.msgSuccess('修改成功');
    }
    dialog.visible = false;
    // 发送操作成功的事件
    emit('success');
  } finally {
    formLoading.value = false;
  }
};

const cardTypeOptions = ref<PtCardTypeVO[]>([]);
/** 初始化 */
onMounted(() => {
  listUsePtCardType().then((res) => {
    cardTypeOptions.value = res.data;
  });
});
</script>
