<template>
  <Modal v-model:visible="visible" :title="$t('common.add')" width="50%" :footer="null" @cancel="handleCancel">
    <Form :model="formState" :rules="rules" ref="formRef" :label-col="{ span: 6 }"  labelAlign="left" :wrapper-col="{ span: 16 }">
      <!-- 配置名称 -->
      <FormItem :label="$t('robot.giftConfig.configName')" name="configName">
        <Input v-model:value="formState.configName" :placeholder="$t('robot.giftConfig.configName')" />
      </FormItem>

      <!-- 观看时长范围 -->
      <FormItem :label="$t('robot.giftConfig.watchDuration')">
        <Row :gutter="8">
          <Col :span="10">
            <FormItem name="minWatchDuration">
              <InputNumber v-model:value="formState.minWatchDuration" :placeholder="$t('robot.giftConfig.minWatchDuration')" style="width: 100%" :min="0" />
            </FormItem>
          </Col>
          <Col :span="4" style="text-align: center; line-height: 32px;">
            ~
          </Col>
          <Col :span="10">
            <FormItem name="maxWatchDuration">
              <InputNumber v-model:value="formState.maxWatchDuration" :placeholder="$t('robot.giftConfig.maxWatchDuration')" style="width: 100%" :min="0" />
            </FormItem>
          </Col>
        </Row>
      </FormItem>

      <!-- 在线人数范围 -->
      <FormItem :label="$t('robot.giftConfig.onlineUsers')">
        <Row :gutter="8">
          <Col :span="10">
            <FormItem name="minOnlineUsers">
              <InputNumber v-model:value="formState.minOnlineUsers" :placeholder="$t('robot.giftConfig.minOnlineUsers')" style="width: 100%" :min="0" />
            </FormItem>
          </Col>
          <Col :span="4" style="text-align: center; line-height: 32px;">
            ~
          </Col>
          <Col :span="10">
            <FormItem name="maxOnlineUsers">
              <InputNumber v-model:value="formState.maxOnlineUsers" :placeholder="$t('robot.giftConfig.maxOnlineUsers')" style="width: 100%" :min="0" />
            </FormItem>
          </Col>
        </Row>
      </FormItem>

      <!-- 钻石范围 -->
      <FormItem :label="$t('robot.giftConfig.amount')">
        <Row :gutter="8">
          <Col :span="10">
            <FormItem name="minAmount">
              <InputNumber v-model:value="formState.minAmount" :placeholder="$t('robot.giftConfig.minAmount')" style="width: 100%" :min="0" :precision="2" />
            </FormItem>
          </Col>
          <Col :span="4" style="text-align: center; line-height: 32px;">
            ~
          </Col>
          <Col :span="10">
            <FormItem name="maxAmount">
              <InputNumber v-model:value="formState.maxAmount" :placeholder="$t('robot.giftConfig.maxAmount')" style="width: 100%" :min="0" :precision="2" />
            </FormItem>
          </Col>
        </Row>
      </FormItem>

      <!-- 每日主播数 -->
      <FormItem :label="$t('robot.giftConfig.dailyAnchonum')" name="dailyAnchonum">
        <InputNumber v-model:value="formState.dailyAnchonum" :placeholder="$t('robot.giftConfig.dailyAnchonum')" style="width: 100%" :min="0" />
      </FormItem>

      <!-- 礼物批次数量 -->
      <FormItem :label="$t('robot.giftConfig.giftBatchNum')" name="giftBatchNum">
        <InputNumber v-model:value="formState.giftBatchNum" :placeholder="$t('robot.giftConfig.giftBatchNum')" style="width: 100%" :min="0" />
      </FormItem>

      
      <!-- 备注 -->
      <FormItem :label="$t('robot.giftConfig.notes')" name="notes">
        <TextArea v-model:value="formState.notes" :placeholder="$t('robot.giftConfig.notes')" :rows="4" />
      </FormItem>


      <!-- 按钮 -->
      <FormItem :wrapper-col="{ offset: 6, span: 16 }">
        <Button type="primary" @click="handleSubmit" :loading="loading">{{ $t('common.submit') }}</Button>
        <Button @click="handleCancel" style="margin-left: 10px">{{ $t('common.cancel') }}</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

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

const TextArea = Input.TextArea;

const visible = ref(false);
const loading = ref(false);
const formRef = ref();

const formState = reactive({
  configName: null,
  notes: null,
  minWatchDuration: null,
  maxWatchDuration: null,
  minOnlineUsers: null,
  maxOnlineUsers: null,
  minAmount: null,
  maxAmount: null,
  dailyAnchonum: null,
  giftBatchNum: null,
  creator: null,
});

const rules = {
  configName: [
    { required: true, message: $t('robot.giftConfig.configNameRequired'), trigger: 'blur' },
  ],
  // minWatchDuration: [
  //   { required: true, message: $t('robot.giftConfig.minWatchDurationRequired'), trigger: 'blur' },
  // ],
  // maxWatchDuration: [
  //   { required: true, message: $t('robot.giftConfig.maxWatchDurationRequired'), trigger: 'blur' },
  // ],
  // minOnlineUsers: [
  //   { required: true, message: $t('robot.giftConfig.minOnlineUsersRequired'), trigger: 'blur' },
  // ],
  // maxOnlineUsers: [
  //   { required: true, message: $t('robot.giftConfig.maxOnlineUsersRequired'), trigger: 'blur' },
  // ],
  // minAmount: [
  //   { required: true, message: $t('robot.giftConfig.minAmountRequired'), trigger: 'blur' },
  // ],
  // maxAmount: [
  //   { required: true, message: $t('robot.giftConfig.maxAmountRequired'), trigger: 'blur' },
  // ],
  // dailyAnchonum: [
  //   { required: true, message: $t('robot.giftConfig.dailyAnchonumRequired'), trigger: 'blur' },
  // ],
  // giftBatchNum: [
  //   { required: true, message: $t('robot.giftConfig.giftBatchNumRequired'), trigger: 'blur' },
  // ],
  // creator: [
  //   { required: true, message: $t('robot.giftConfig.creatorRequired'), trigger: 'blur' },
  // ],
};

function handleSubmit() {
  formRef.value.validate().then(() => {
    loading.value = true;
    giftConfig.create(formState).then((res) => {
      if (res.error) {
        return;
      }
      message.success($t('common.addSuccess'));
      handleCancel();
      emit('close');
    }).finally(() => {
      loading.value = false;
    })
  }).catch(() => {
    message.error($t('common.validateError'));
  })
}

function handleCancel() {
  visible.value = false;
  formRef.value.resetFields();
}

const emit = defineEmits(['close']);

function _open() {
  visible.value = true;
}

function reset() {
  formRef.value.resetFields();
}

defineExpose({
  _open,
  reset,
});
</script>