<template>
  <Modal :maskClosable="false" :keyboard="false" v-model:open="data.isShowModal" :footer="null"
    title="添加礼物关联" width="50%" @cancel="_close">

    <Form :model="data.form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <FormItem label="关联类型" required name="relationType">
        <Select v-model:value="data.form.relationType" placeholder="请选择关联类型">
          <SelectOption value="giftConfig">送礼配置</SelectOption>
        </Select>
      </FormItem>
      
      <FormItem label="礼物ID" required name="giftId">
        <Input v-model:value="data.form.giftId" placeholder="请输入礼物ID" />
      </FormItem>
      
      <FormItem label="礼物名称" required name="giftName">
        <Input v-model:value="data.form.giftName" placeholder="请输入礼物名称" />
      </FormItem>
      
      <FormItem label="礼物单价" name="giftPrice">
        <InputNumber v-model:value="data.form.giftPrice" placeholder="请输入礼物单价" style="width: 100%" />
      </FormItem>
      
      <FormItem label="礼物图标" name="giftIcon">
        <Input v-model:value="data.form.giftIcon" placeholder="请输入礼物图标URL" />
      </FormItem>
      
      <FormItem :wrapper-col="{ offset: 6, span: 16 }">
        <Button type="primary" @click="handleSubmit" :loading="data.loading">
          {{ $t('common.submit') }}
        </Button>
        <Button @click="_close" style="margin-left: 10px;">
          {{ $t('common.cancel') }}
        </Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { Modal, Form, FormItem, Input, Button, Select, InputNumber, message } from 'ant-design-vue';
import { $t } from '@vben/locales';
import { giftRelation } from '#/api';

const SelectOption = Select.Option;

interface Emits {
  (e: 'close', submit: Boolean): void
}

const emits = defineEmits<Emits>();

const data = reactive({
  isShowModal: false,
  loading: false,
  form: {
    relationType: 'giftConfig',
    giftId: '',
    giftName: '',
    giftPrice: 0,
    giftIcon: '',
    status: 1,
    relationCode: ''
  }
});

function handleSubmit() {
  // 表单验证
  if (!data.form.giftId) {
    message.warning('请输入礼物ID');
    return;
  }
  if (!data.form.giftName) {
    message.warning('请输入礼物名称');
    return;
  }
  
  data.loading = true;
  giftRelation.addOne(data.form).then(res => {
    if (!res.error) {
      message.success($t('common.addSuccess'));
      _close(true);
    }
  }).catch(() => {
    message.error($t('common.addFailed'));
  }).finally(() => {
    data.loading = false;
  });
}

function _open(giftConfigInfo) {
  data.isShowModal = true;
  data.form.relationCode = giftConfigInfo?.uuid;
  // 重置表单
  data.form = {
        relationType: 'giftConfig',
        giftId: '',
        giftName: '',
        giftPrice: undefined,
        giftIcon: '',
        status: undefined,
        relationCode: giftConfigInfo?.uuid
      };
}

function _close(submit: Boolean = false) {
  data.isShowModal = false;
  submit && typeof submit == 'boolean' && emits('close', submit);
}

//开放方法
defineExpose({ _open, _close });
</script>

<style scoped></style>