<script lang="ts" setup>
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import {$t} from '#/locales';
import { notification } from 'ant-design-vue';
import { syncActivityApi } from '#/api/core/activity';
import type { SyncActivityParam } from '#/api/core/activity';
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',
      defaultValue: 1,
      componentProps: {
        filterOption: true,
        options: [],
        placeholder: '请选择',
        showSearch: true,
      },
      fieldName: 'SrcAppId',
      label: '源APP：',
    },
    {
      component: 'Select',
      defaultValue: 1,
      componentProps: {
        filterOption: true,
        options: [],
        placeholder: '请选择',
        showSearch: true,
      },
      fieldName: 'DstAppId',
      label: '目标APP：',
    },
    {
      component: 'Input',
      fieldName: 'label',
      label: '**',
      componentProps: {
      },
    },
    {
      component: 'Input',
      fieldName: 'ensure',
      label: '确认框',
      componentProps: {
      },
    },
  ],
});
const [Modal, modalApi] = useVbenModal({
  onOpened: async () => {
    const Value = modalApi.getData();
    console.log("open", Value)
    FormApi.updateSchema(
      [
        {
          component: 'Select',
          defaultValue: Value.AppId,
          componentProps: {
            filterOption: true,
            options: Value.AppList ? Value.AppList.map((app: any) => ({ label: $t('page.server.' + app.AppName), value: app.AppId })) : [],
            placeholder: '请选择',
            showSearch: true,
          },
          fieldName: 'SrcAppId',
          label: '源APP：',
        },
        {
          component: 'Select',
          defaultValue: 1,
          componentProps: {
            filterOption: true,
            options: Value.AppList ? Value.AppList.map((app: any) => ({ label: $t('page.server.' + app.AppName), value: app.AppId })) : [],
            placeholder: '请选择',
            showSearch: true,
          },
          fieldName: 'DstAppId',
          label: '目标APP：',
        },
      ],
    )
  },
  confirmText: '提交',
  onConfirm: async () => {
    const values = await FormApi.getValues();
    if (values.ensure !== 'meowment') {
      // eslint-disable-next-line no-alert
      notification.error({ message: '请输入meowment进行确认' });
      return;
    }
    const params: SyncActivityParam = {
      SrcAppId: values.SrcAppId,
      DstAppId: values.DstAppId,
    };
    const res = await syncActivityApi(params);
    if (res.code === 0) {
      notification.success({ message: '同步成功' });
    } else {
      notification.error({ message: '同步失败：' + res.message });
    }
    modalApi.close();
  },
});
</script>
<template>
  <Modal :width="800" title="同步活动配置">
    <Form>
      <template #label>
       <span>请输入<span style="color: red;">meowment</span>进行确认</span>
      </template>
    </Form>
  </Modal>
</template>
