<script lang="ts" setup>
/**
 * 时效类型徽标编辑（主要上传体验/周/月/年/终身徽标）
 */
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';

import { updateVipDuration } from '../api';
import { modalFormProps } from '../config/form';

const gridApi = ref();
const [Form, formApi] = useVbenForm(modalFormProps);
const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    const e = await formApi.validate();
    if (!e.valid) return;
    const values = await formApi.getValues();
    modalApi.setState({ confirmLoading: true });
    try {
      await updateVipDuration(values);
      message.success('保存成功');
      gridApi.value?.query();
      modalApi.close();
    } finally {
      modalApi.setState({ confirmLoading: false });
    }
  },
  onOpenChange(isOpen: boolean) {
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    if (!isOpen) return;
    const { values } = modalApi.getData<Record<string, any>>() || {};
    if (values) formApi.setValues(values);
  },
});
</script>
<template>
  <Modal title="编辑时效类型徽标" class="w-[560px]">
    <Form />
  </Modal>
</template>
