<template>
  <VbenDrawer
    v-model="visible"
    :title="drawerTitle"
    :width="600"
    @cancel="handleCancel"
  >
    <VbenForm
      :schema="formSchema"
      :model="formModel"
      :rules="formRules"
      label-width="100px"
      @submit="handleSubmit"
    >
      <template #form-footer>
        <VbenSpace>
          <VbenButton @click="handleCancel">取消</VbenButton>
          <VbenButton type="primary" native-type="submit">确定</VbenButton>
        </VbenSpace>
      </template>
    </VbenForm>
  </VbenDrawer>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue';
import { VbenButton, VbenDrawer, VbenForm, VbenMessage, VbenSpace } from '@vben/common-ui';

import { createPayment, updatePayment } from '#/api/core/payment';

import type { PaymentItem } from '../data';
import { paymentTypeOptions, statusOptions } from '../data';

interface Props {
  modelValue: boolean;
  data?: PaymentItem | null;
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void;
  (e: 'reload'): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  data: null,
});

const emit = defineEmits<Emits>();

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
});

const drawerTitle = computed(() => (props.data ? '编辑支付方式' : '新增支付方式'));

const formModel = ref({
  site_id: 0,
  payment_type: 'wechat',
  payment_name: '',
  payment_code: '',
  icon: '',
  sort: 0,
  status: 1,
});

const formSchema = [
  {
    fieldName: 'site_id',
    label: '站点ID',
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入站点ID',
      min: 0,
    },
  },
  {
    fieldName: 'payment_type',
    label: '支付类型',
    component: 'Select',
    componentProps: {
      placeholder: '请选择支付类型',
      options: paymentTypeOptions,
    },
  },
  {
    fieldName: 'payment_name',
    label: '支付名称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入支付名称',
      maxlength: 50,
    },
  },
  {
    fieldName: 'payment_code',
    label: '支付编码',
    component: 'Input',
    componentProps: {
      placeholder: '请输入支付编码',
      maxlength: 30,
    },
  },
  {
    fieldName: 'icon',
    label: '图标',
    component: 'Input',
    componentProps: {
      placeholder: '请输入图标URL',
      maxlength: 255,
    },
  },
  {
    fieldName: 'sort',
    label: '排序',
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入排序',
      min: 0,
      max: 999,
    },
  },
  {
    fieldName: 'status',
    label: '状态',
    component: 'RadioGroup',
    componentProps: {
      options: statusOptions,
    },
  },
];

const formRules = {
  site_id: 'required',
  payment_type: 'required',
  payment_name: 'required|max:50',
  payment_code: 'required|max:30',
  icon: 'max:255',
  sort: 'required',
  status: 'required',
};

watch(
  () => props.data,
  (val) => {
    if (val) {
      formModel.value = {
        site_id: val.site_id,
        payment_type: val.payment_type,
        payment_name: val.payment_name,
        payment_code: val.payment_code,
        icon: val.icon,
        sort: val.sort,
        status: val.status,
      };
    } else {
      formModel.value = {
        site_id: 0,
        payment_type: 'wechat',
        payment_name: '',
        payment_code: '',
        icon: '',
        sort: 0,
        status: 1,
      };
    }
  },
  { immediate: true }
);

async function handleSubmit() {
  try {
    if (props.data) {
      await updatePayment(props.data.id, formModel.value);
      VbenMessage.success('更新成功');
    } else {
      await createPayment(formModel.value);
      VbenMessage.success('创建成功');
    }
    handleCancel();
    emit('reload');
  } catch (error) {
    VbenMessage.error('操作失败');
  }
}

function handleCancel() {
  visible.value = false;
}
</script>