<script lang="ts" setup>
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import { addActivityApi } from '#/api/core/activity';
import type { EditActivityParam } from '#/api/core/activity';
import { getUnixTime } from '#/store/util';
import JsonEitorVue from 'json-editor-vue';
import { activityTypeData } from '#/store/order';
import { parseNumber } from '#/store/util';
import {ref} from 'vue';
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: 'Select',
      fieldName: 'type',
      label: '活动类型',
      componentProps: {
        options: activityTypeData ? Object.entries(activityTypeData).map(([key, value]) => ({
          label: value,
          value: key,
        })) : [],
        placeholder: '请选择',
        showSearch: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'level',
      label: '解锁等级',
      componentProps: {
      },
    },
    {
      component: 'DatePicker',
      fieldName: 'start_time',
      label: '开始时间',
      componentProps: {
        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: 'jsonCfg',
      label: 'json配置',
      defaultValue: '{}',
      componentProps: {
        type: 'textarea',
        rows: 8,
      },
    },
    {
      component: 'Textarea',
      defaultValue: '{}',
      fieldName: 'extra',
      label: '额外配置',
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  confirmText: '提交',
  onConfirm: async () => {
    const values = await FormApi.getValues();
    const mMdata = modalApi.getData();
    const cfgjson =
      typeof values.cfg === 'string'
        ? JSON.parse(values.cfg)
        : values.cfg;
    const params: EditActivityParam = {
      AppId: mMdata.AppId,
      Cfg: {
        id: 0,
        type: parseNumber(values.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: parseNumber(values.level),
        mail_title: values.mail_title,
        mail_content: values.mail_content,
        cfg: JSON.stringify(cfgjson),
        extra: values.extra,
        interval: parseNumber(values.interval),
      },
    };
    await addActivityApi(params);
    modalApi.close();
  },
});
</script>
<template>
  <Modal :width="800" title="增加活动配置">
    <Form>
      <template #jsonCfg>
        <JsonEitorVue  v-model="value" v-bind="{/* local props & attrs */}" class="w-[100%] h-[500px]"/>
      </template>
    </Form>
  </Modal>
</template>
