<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="礼物ID" required>
        <Input v-model:value="data.form.giftId" disabled placeholder="请输入礼物ID" />
      </FormItem>
      
      <FormItem label="礼物名称" required>
        <Input v-model:value="data.form.giftName" disabled placeholder="请输入礼物名称" />
      </FormItem>
      
      <FormItem label="礼物单价">
        <InputNumber v-model:value="data.form.unitPrice" disabled="true" placeholder="请输入礼物单价" style="width: 100%" />
      </FormItem>
      
      <FormItem label="礼物数量">
        <InputNumber v-model:value="data.form.quantity" placeholder="请输入礼物数量" style="width: 100%" />
      </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: {
    uuid: '',
    relationType: 'giftConfig',
    giftId: '',
    giftName: '',
    giftPrice: undefined,
    giftIcon: '',
    status: undefined,
    relationCode: '',
    quantity: 1
  }
});

function handleSubmit() {
  data.loading = true;
  giftRelation.updateByUid(data.form).then(res => {
    if (!res.error) {
      message.success($t('common.editSuccess'));
      _close(true);
    }
  }).catch(() => {
    message.error($t('common.editFailed'));
  }).finally(() => {
    data.loading = false;
  });
}

function _open(record, giftConfigInfo) {
  data.isShowModal = true;
  data.form = { ...record };
  data.form.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>