<script lang="ts" setup>
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import {Image} from "ant-design-vue";
import {  formatItems } from '#/store/util';
import { Tag } from 'ant-design-vue';
import {ref} from "vue";
interface MailItem {
  Id: string | number;
  Num: number;
  url?: string;
}
let items = ref<MailItem[]>([]);
defineOptions({
  name: 'DetailMailModal',
});
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: 'Input',
      fieldName: 'Subtitle',
      label: '邮件副标题',
    },
    {
      component: 'Textarea',
      fieldName: 'Content',
      label: '邮件内容',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'TitleEN',
      label: '英文邮件标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'SubtitleEN',
      label: '英文邮件副标题',
    },
    {
      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: '{}',
        type: 'textarea',
        rows: 3,
      },
    },
    {
      component: 'RangePicker',
      fieldName: 'start_time',
      label: '时间区间',
    },
    {
      component: 'DatePicker',
      fieldName: 'register_time',
      label: '注册时间',
    },
    {
      component: 'Input',
      fieldName: 'min_level',
      label: '最低等级',
    },
    {
      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: {
        componentProps(values) {
          if (values.send_type === 2) {
            return {
              disabled: false,
              rules: 'required',
            };
          }
          return {
            disabled: true,
          };
        },
        triggerFields: ['send_type'],
      },
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  confirmText: '提交',
  showConfirmButton: false,
  onOpened: async () => {
    const modalData = modalApi.getData();
    FormApi.setValues({
      Title: modalData.title,
      Subtitle: modalData.subtitle,
      Content: modalData.content,
      TitleEN: modalData.title_en,
      SubtitleEN: modalData.subtitle_en,
      ContentEN: modalData.content_en,
      TitlePTBR: modalData.title_ptbr,
      ContentPTBR: modalData.content_ptbr,
      TitleESLatam: modalData.title_es_latam,
      ContentESLatam: modalData.content_es_latam,
      items: modalData.items,
      start_time: 0,
      register_time: modalData.register_time,
      min_level: modalData.min_level ?? 0,
      mail_type: modalData.mail_type === 1 ? '普通邮件' : '节日邮件',
      send_type: modalData.send_type === 1 ? '全服邮件' : '个人邮件',
      ToUids: modalData.to_uids,
    });
    items = formatItems(modalData.items);
    FormApi.updateSchema([
      {
        component: 'Input',
        disabled: true,
        fieldName: 'Title',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'Subtitle',
      },
      {
        component: 'Textarea',
        disabled: true,
        fieldName: 'Content',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'TitleEN',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'SubtitleEN',
      },
      {
        component: 'Textarea',
        disabled: true,
        fieldName: 'ContentEN',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'TitlePTBR',
      },
      {
        component: 'Textarea',
        disabled: true,
        fieldName: 'ContentPTBR',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'TitleESLatam',
      },
      {
        component: 'Textarea',
        disabled: true,
        fieldName: 'ContentESLatam',
       },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'items',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'start_time',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'register_time',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'min_level',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'mail_type',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'ToUids',
      },
      {
        component: 'Input',
        disabled: true,
        fieldName: 'send_type',
      },
    ]);
  },
});
</script>
<template>
  <Modal :width="800" title="邮件详情">
    <Form>
      <template #items>
        <div class="flex flex-wrap items-center justify-center">
          <div v-for="item in items" :key="item.Id" class="flex items-center gap-1">
            <template v-if="item.url">
              <Image :src="item.url" width="30px" />
            </template>
            <template v-else>
              <Tag class="w-[45px] h-[30px] flex items-center justify-center text-xs">
               {{item.Id}}
              </Tag>
            </template>
            <span>x{{ item.Num }}</span>
          </div>
        </div>
      </template>
    </Form>
  </Modal>
</template>
