<script lang="ts" setup>
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import { message } from "ant-design-vue";
import { activityTypeData } from '#/store/order';
import { ref } from "vue";
import dayjs from 'dayjs';
import { editActivityApi } from '#/api/core/activity';
import type { EditActivityParam } from '#/api/core/activity';
import { getUnixTime } from '#/store/util';
import JsonEitorVue from 'json-editor-vue';
import { parseNumber, formatJsonStr } from '#/store/util';
const value = ref();
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: 'id',
      label: 'Id',
      componentProps: {
        disabled: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'type',
      label: '活动类型',
      componentProps: {
        disabled: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'level',
      label: '解锁等级',
      componentProps: {
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'start_time',
      label: '开始时间（北京时间）',
      componentProps: {
        ariaLabel: 'start_time',
        showTime: true,
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'end_time',
      label: '结束时间（北京时间）',
      componentProps: {
        showTime: true,
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
    {
      component: 'Input',
      fieldName: 'interval',
      defaultValue: 0,
      label: '活动循环间隔（秒）从上次开始时间开始计算，0表示不循环',
      componentProps: {
      },
    },
    {
      component: 'Input',
      fieldName: 'title',
      label: '活动标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'mail_title',
      label: '回收邮件标题',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'mail_content',
      label: '回收邮件内容',
    },
    {
      component: 'Textarea',
      fieldName: 'cfg',
      label: '配置',
      componentProps: {
        type: 'textarea',
        rows: 12,
        overflow: 'auto',
      },
      rules: 'required',
    },
    {
      component: 'Textarea',
      fieldName: 'extra',
      label: '额外配置',
      rules: 'required',
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  confirmText: '提交',
  onOpened: async () => {
    const mMdata = modalApi.getData();
    const modalData = mMdata.cfg || {};
    const st = modalData.start_time ? dayjs(modalData.start_time * 1000) : null;
    const et = modalData.end_time ? dayjs(modalData.end_time * 1000) : null;
    FormApi.setValues({
      id: modalData.id,
      type: activityTypeData[modalData.type],
      start_time: st,
      end_time: et,
      title: modalData.title,
      level: modalData.level,
      mail_title: modalData.mail_title,
      mail_content: modalData.mail_content,
      cfg: modalData.cfg,
      extra: modalData.extra,
      interval: modalData.interval,
    });
    value.value = JSON.parse(modalData.cfg || '{}');
    console.log('value', value.value);
  },
  onConfirm: async () => {
    const values = await FormApi.getValues();
    const mMdata = modalApi.getData();
    const modalData = mMdata.cfg || {};
    const level: number = Number(values.level) || 0;
    const interval: number = Number(values.interval) || 0;
    let cfgStr = formatJsonStr(value.value);
    if (typeof value.value === 'string') {
      try {
        cfgStr = formatJsonStr(value.value);
      } catch (e) {
        message.error('配置必须是合法的JSON字符串');
        return;
      }
    } else {
      cfgStr = JSON.stringify(value.value);
    }
    const params: EditActivityParam = {
      AppId: mMdata.AppId,
      Cfg: {
        id: modalData.id,
        type: modalData.type,
        start_time: values.start_time ? getUnixTime(values.start_time) : 0,
        end_time: values.end_time ? getUnixTime(values.end_time) : 0,
        title: values.title,
        level: level,
        mail_title: values.mail_title,
        mail_content: values.mail_content,
        cfg: cfgStr,
        extra: values.extra,
        interval: interval,
      },
    };
    const response = await editActivityApi(params);
    if (response) {
      // 这里可以根据实际情况进行提示
      message.success('活动更新成功');
    }
    modalApi.close();
  },
});
</script>
<template>
  <Modal :width="1200" title="活动详情">
    <Form>
      <template #cfg>
          <JsonEitorVue v-model="value" v-bind="{/* local props & attrs */ }" class="w-[100%] h-[500px]" />
      </template>
    </Form>
  </Modal>
</template>

