<script setup lang="ts">
import type { MerchantDetailDto, UpdateMerchantDto } from '#/api/merchant';

import { watch } from 'vue';

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

import { useVbenForm } from '#/adapter/form';
import { updateMerchantInfoApi } from '#/api/merchant';
import { OperatingMode } from '#/enums/merchantEnum';

const props = defineProps<{
  merchant: MerchantDetailDto | null;
}>();

const emit = defineEmits<{
  (e: 'success'): void;
}>();

const [Form, formApi] = useVbenForm({
  // Use a grid layout with 2 columns
  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2',
  commonConfig: {
    // Label width
    labelWidth: 100,
  },
  showDefaultActions: true,
  submitButtonOptions: {
    content: '保存更改',
  },
  resetButtonOptions: { show: false },
  // The submit button is usually at the end. We might want it full width or placed differently.
  // With grid, it might be in the last cell.
  actionWrapperClass: 'col-span-1 md:col-span-2 text-right',

  schema: [
    {
      fieldName: 'name',
      component: 'Input',
      label: '商户名称',
      rules: 'required',
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'operatingMode',
      component: 'Select',
      label: '经营模式',
      componentProps: {
        options: [
          { label: '直营', value: OperatingMode.Direct },
          { label: '加盟', value: OperatingMode.Franchise },
        ],
      },
      rules: 'required',
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'licenseNumber',
      component: 'Input',
      label: '营业执照号',
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'legalRepresentative',
      component: 'Input',
      label: '法人/负责人',
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'contactPhone',
      component: 'Input',
      label: '联系电话',
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'contactEmail',
      component: 'Input',
      label: '联系邮箱',
      formItemClass: 'col-span-1',
    },
    {
      fieldName: 'registeredAddress',
      component: 'Textarea',
      label: '注册地址',
      formItemClass: 'col-span-1 md:col-span-2',
      componentProps: {
        rows: 3,
      },
    },
  ],
  handleSubmit: onSubmit,
});

async function onSubmit(values: Record<string, any>) {
  if (!props.merchant?.id) return;

  try {
    const payload: UpdateMerchantDto = {
      id: props.merchant.id,
      name: values.name,
      operatingMode: values.operatingMode,
      licenseNumber: values.licenseNumber,
      legalRepresentative: values.legalRepresentative,
      contactPhone: values.contactPhone,
      contactEmail: values.contactEmail,
      registeredAddress: values.registeredAddress,
    };

    await updateMerchantInfoApi(payload);
    message.success('商户信息更新成功');
    emit('success');
  } catch (error) {
    console.error(error);
    message.error('更新失败');
  }
}

watch(
  () => props.merchant,
  (merchant) => {
    if (merchant) {
      formApi.setValues(merchant);
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="p-4">
    <Form />
  </div>
</template>
