<script lang="ts" setup>
import { useVbenForm, useVbenModal, VbenIcon } from '@vben/common-ui';
import { Select, Input, SelectOption, SelectOptGroup, message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { ref } from 'vue';
import { addMailApi } from '#/api/core/mail';
import type { MailData } from '#/api/core/mail';
const value1 = ref<string>();
const value2 = ref<number>();
const items = ref<{ Id: string | number; Num: number; url?: string }[]>([]);
const [Form, FormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full h-full',
    },
  },
  // 使用 tailwindcss grid布局
  // 提交函数
  // 垂直布局，label和input在不同行，值为vertical
  layout: 'horizontal',
  showDefaultActions: false,
  // 水平布局，label和input在同一行
  schema: [
    {
      component: 'Input',
      fieldName: 'Title',
      label: '邮件标题',
      rules: 'required',
    },
    {
      component: 'Textarea',
      fieldName: 'Content',
      label: '邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'TitleEN',
      label: '英文邮件标题',
      rules: 'required',
    },
    {
      component: 'Textarea',
      fieldName: 'ContentEN',
      label: '英文邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'TitlePTBR',
      label: '葡萄牙（巴西）邮件标题',
      rules: 'required',
    },
    {
      component: 'Textarea',
      fieldName: 'ContentPTBR',
      label: '葡萄牙（巴西）邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'TitleESLatam',
      label: '西班牙（拉美）邮件标题',
      rules: 'required',
    },
    {
      component: 'Textarea',
      fieldName: 'ContentESLatam',
      label: '西班牙（拉美）邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    }, 
    {
      component: 'Textarea',
      fieldName: 'Items',
      label: '邮件道具',
      componentProps: {
        placeholder: '[{"Id":1,"Num":1},{"Id":2,"Num":2}]',
        type: 'textarea',
        rows: 3,
      },
    },
    {
      component: 'Textarea',
      fieldName: 'ItemList',
      label: '道具',
      componentProps: {
        placeholder: '[{"Id":1,"Num":1},{"Id":2,"Num":2}]',
        type: 'textarea',
        rows: 3,
      },
    },
    {
      component: 'RangePicker',
      fieldName: 'start_time',
      label: '时间区间',
    },
    {
      component: 'DatePicker',
      fieldName: 'register_time',
      label: '注册时间',
    },
    {
      component: 'Input',
      fieldName: 'min_level',
      label: '最低等级',
      componentProps: {
        placeholder: '请输入最低等级，默认0',
      },
    },
    {
      component: 'Select',
      fieldName: 'mail_type',
      defaultValue: 1,
      label: '邮件类型',
      componentProps: {
        options: [
          {
            label: '节日邮件',
            value: 2,
          },
          {
            label: '普通邮件',
            value: 1,
          },
        ],
      },
    },
    {
      component: 'Select',
      fieldName: 'send_type',
      defaultValue: 1,
      label: '邮件发送类型',
      componentProps: {
        options: [
          {
            label: '个人邮件',
            value: 2,
          },
          {
            label: '全服邮件',
            value: 1,
          },
        ],
      },
    },
    {
      component: 'Textarea',
      fieldName: 'ToUids',
      label: '玩家uids',
      componentProps: {
        disabled: true,
        placeholder: 'uid,uid ... 以‘，’分割',
        type: 'textarea',
        rows: 4,
      },
      dependencies: {
        triggerFields: ['send_type'],
        componentProps(values) {
          console.log('value' + values.send_type);
          if (values.send_type === 2) {
            return {
              disabled: false,
              rules: 'required',
            };
          }
          return {
            disabled: true,
          };
        },
      },
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  confirmText: '提交审核',
  onOpened: () => {
    items.value = [];
  },
  onConfirm: async () => {
    // 提交表单
    const values = await FormApi.getValues();
    const start_time =
      values.start_time && values.start_time.length > 0
        ? dayjs(values.start_time[0]).unix()
        : 0;
    const end_time =
      values.start_time && values.start_time.length > 0
        ? dayjs(values.start_time[1]).unix()
        : 0;
    const register_time = values.register_time
      ? dayjs(values.register_time).unix()
      : 0;
    const min_level = values.min_level ? Number(values.min_level) : 0;
    const mail_type = values.mail_type;
    const send_type = values.send_type;
    const Title = values.Title;
    const Subtitle = values.Subtitle;
    const Content = values.Content;
    const TitleEN = values.TitleEN;
    const SubtitleEN = values.SubtitleEN;
    const ContentEN = values.ContentEN;
    const ToUids = values.ToUids ? String(values.ToUids) : '';
    const modalData = modalApi.getData();
    const param: MailData = {
      AppId: modalData.AppId,
      ServerId: modalData.ServerId || 1,
      title: Title,
      subtitle: Subtitle,
      content: Content,
      title_en: TitleEN,
      subtitle_en: SubtitleEN,
      content_en: ContentEN,
      title_ptbr: values.TitlePTBR,
      subTitle_ptbr: values.SubtitlePTBR,
      content_ptbr: values.ContentPTBR,
      title_es_latam: values.TitleESLatam,
      subTitle_es_latam: values.SubtitleESLatam,
      content_es_latam: values.ContentESLatam,
      items: values.ItemList,
      to_uids: ToUids,
      start_time: start_time,
      end_time: end_time,
      register_time: register_time,
      min_level: min_level,
      mail_type: mail_type,
      send_type: send_type,
    };
    await addMailApi(param);
    message.success('邮件已提交审核');
    modalApi.close();
  },
});
function addItem() {
  if (!value1.value || !value2.value) {
    return;
  }
  const itemId: number = parseInt(value1.value);
  const num: number = Number(value2.value);
  items.value.push({
    Id: itemId,
    Num: num,
  });
  value1.value = '';
  value2.value = undefined;
  FormApi.setFieldValue('ItemList', JSON.stringify(items.value));
}


defineOptions({
  name: 'AddMailModal',
});
</script>
<template>
  <Modal :width="800" title="新增邮件申请">
    <Form>
      <template #Items>
        <span>Id:</span>
        <Select class="ml-2 w-[200px]" v-model:value="value1">
          <SelectOptGroup>
            <template #label>
              <span>内置道具</span>
            </template>
            <SelectOption value="100001">能量</SelectOption>
            <SelectOption value="100002">宠物币</SelectOption>
            <SelectOption value="100003">钻石</SelectOption>
            <SelectOption value="100021">小猪存钱罐</SelectOption>
          </SelectOptGroup>

        </Select>

        <span class="ml-2">Num:</span>
        <Input type="number" class="ml-2 border w-[200px]" v-model:value="value2" />
        <div @click="addItem">
          <VbenIcon icon="material-symbols:add-2" class="ml-2 border-2" />
        </div>

      </template>
      
    </Form>
  </Modal>
</template>
