<template>
  <a-modal
    ref="formDataRef"
    :visible="props.visible"
    :ok-loading="loading"
    @before-ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>{{ props.id === '' ? '新增' : '编辑' }}账户</template>
    <a-form ref="formDataRef" :model="formData">
      <a-form-item field="account" label="账号" required>
        <a-input v-model="formData.account" :readonly="props.id !== ''" />
      </a-form-item>
      <a-form-item field="password" label="密码" required>
        <a-input v-model="formData.password" />
      </a-form-item>
      <a-form-item
        field="maxAmountLimit"
        label="限制金额"
        tooltip="限制账号的单日充值金额(元) 0表示不限制"
        required
      >
        <a-input-number v-model="formData.maxAmountLimit" />
      </a-form-item>
      <a-form-item
        field="maxCountLimit"
        label="限制次数"
        tooltip="限制账号的单日充值次数 0表示不限制"
        required
      >
        <a-input-number v-model="formData.maxCountLimit" />
      </a-form-item>
      <a-form-item field="remark" label="备注">
        <a-input v-model="formData.remark" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { apiClient } from '@/api';
import { KamiApiCardInfoAppleV1CardInfoCreateReq } from '@/api/generated';
import useLoading from '@/hooks/loading';
import { FormInstance } from '@arco-design/web-vue';
import { PropType, ref, watch } from 'vue';

const generateFormData = (): KamiApiCardInfoAppleV1CardInfoCreateReq => {
  return {
    account: '',
    password: '',
    maxAmountLimit: 0,
    maxCountLimit: 0
  };
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ''
  },
  account: {
    type: Object as PropType<KamiApiCardInfoAppleV1CardInfoCreateReq>,
    default: () => {
      return {
        account: '',
        password: '',
        maxAmountLimit: 0,
        maxCountLimit: 0
      };
    }
  }
});

const formData =
  ref<KamiApiCardInfoAppleV1CardInfoCreateReq>(generateFormData());
const formDataRef = ref<FormInstance>();

const { loading, setLoading } = useLoading(false);

const emit = defineEmits(['update:visible']);
const handleOk = (done: (closed: boolean) => void) => {
  formDataRef.value.validate().then(async (res: any) => {
    if (res) return done(false);
    try {
      setLoading(true);
      if (props.id === '') {
        await apiClient.apiCardInfoAppleCardAccountCreatePost({
          kamiApiCardInfoAppleV1CardInfoCreateReq: {
            ...formData.value
          }
        });
      } else {
        await apiClient.apiCardInfoAppleCardAccountUpdatePut({
          kamiApiCardInfoAppleV1CardInfoUpdateReq: {
            id: props.id,
            ...formData.value
          }
        });
      }
      console.log('success');
      done(true);
      emit('update:visible', false);
      formData.value = generateFormData();
    } catch (error) {
      done(false);
    } finally {
      setLoading(false);
    }
  });
};
watch(
  () => props.account,
  val => {
    formData.value = { ...val };
  }
);
const handleCancel = () => {
  emit('update:visible', false);
  formData.value = generateFormData();
};
</script>
