<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('monitor.message.template.pushParameter')"
    @ok="handleOK"
  >
    <div class="pt-4px pr-4px">
      <BasicForm @register="registerForm" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { sendSms } from '/@/api/message/template';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { phoneRule } from '/@/utils/rules';
  import { PlateFormTypeEnum } from './template.data';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const schemas: FormSchema[] = [
    {
      field: 'id',
      component: 'Input',
      label: 'id',
      show: false,
    },
    {
      field: 'templatePurpose',
      label: t('monitor.message.useTo'),
      component: 'Input',
      show: false,
      componentProps: {
        maxLength: 36,
      },
      dynamicRules: () => {
        return [
          {
            required: false,
            validator: (_, value) => {
              if (String(value).length > 36) {
                return Promise.reject(t('monitor.message.textRule36'));
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
    {
      field: 'messageType',
      component: 'Input',
      label: 'messageType',
      show: false,
      componentProps: {
        maxLength: 36,
      },
      dynamicRules: () => {
        return [
          {
            required: false,
            validator: (_, value) => {
              if (String(value).length > 36) {
                return Promise.reject(t('monitor.message.textRule36'));
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
    {
      field: 'phoneNumbers',
      component: 'Input',
      label: t('monitor.message.template.form.phoneNumber'),
      rules: phoneRule,
    },
    {
      field: 'params',
      component: 'InputTextArea',
      label: t('monitor.message.template.form.SMSparameters'),
      required: true,
      componentProps: {
        placeholder: t('monitor.message.template.form.placeSMS'),
      },
      dynamicRules: () => {
        return [
          {
            required: true,
            validator: (_, value) => {
              try {
                if (typeof value == 'object') {
                  return Promise.resolve();
                } else {
                  if (typeof JSON.parse(value) == 'object') {
                    return Promise.resolve();
                  }
                  return Promise.reject(t('monitor.message.template.form.ruleSMS'));
                }
              } catch {
                return Promise.reject(t('monitor.message.template.form.ruleSMS'));
              }
            },
          },
        ];
      },
    },
    {
      field: 'remark',
      component: 'InputTextArea',
      label: t('common.remarkText'),
      componentProps: {
        maxLength: 255,
      },
      dynamicRules: () => {
        return [
          {
            required: false,
            validator: (_, value) => {
              if (String(value).length > 255) {
                return Promise.reject(t('monitor.message.textRule255'));
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    setup() {
      const platformType = ref('');
      const { createMessage } = useMessage();
      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      const [register, { closeModal }] = useModalInner(async (data) => {
        platformType.value = data.record?.messageConfig?.platformType;
        updateSchema({
          field: 'params',
          componentProps: {
            placeholder:
              platformType.value !== PlateFormTypeEnum.tencent_cound
                ? t('monitor.message.template.form.placeSMS')
                : t('monitor.message.template.form.placeStringRule') +
                  t('monitor.message.template.form.placeStringRule'),
          },
          dynamicRules: () => {
            return [
              {
                required: true,
                validator: (_, value) => {
                  try {
                    if (typeof value == 'object') {
                      return Promise.resolve();
                    } else {
                      if (platformType.value !== PlateFormTypeEnum.tencent_cound) {
                        // 阿里云不能是以[]开头
                        if (
                          Object.prototype.toString.call(JSON.parse(value)) === '[object Array]'
                        ) {
                          return Promise.reject();
                        }
                      } else {
                        // 腾讯云只能是[]开头
                        if (
                          Object.prototype.toString.call(JSON.parse(value)) !== '[object Array]'
                        ) {
                          return Promise.reject(t('monitor.message.template.form.stringArrayRule'));
                        }
                      }
                      if (typeof JSON.parse(value) == 'object') {
                        return Promise.resolve();
                      }
                      return Promise.reject(
                        platformType.value !== PlateFormTypeEnum.tencent_cound
                          ? t('monitor.message.template.form.ruleSMS')
                          : t('monitor.message.template.form.stringArrayRule')
                      );
                    }
                  } catch {
                    return Promise.reject(
                      platformType.value !== PlateFormTypeEnum.tencent_cound
                        ? t('monitor.message.template.form.ruleSMS')
                        : t('monitor.message.template.form.stringArrayRule')
                    );
                  }
                },
              },
            ];
          },
        });
        await resetFields();
        await setFieldsValue({
          ...data.record,
        });
      });

      async function handleOK() {
        let smsParams: any = null;
        const values = await validate();
        if (platformType.value === PlateFormTypeEnum.tencent_cound) {
          //腾讯云发送格式 将字符串转为数组
          smsParams = {
            tencent_param: JSON.parse(Reflect.get(values, 'params')),
          };
        } else {
          //阿里云发送格式 将字符串转为json
          smsParams = JSON.parse(Reflect.get(values, 'params'));
        }
        Reflect.set(values, 'params', smsParams);
        await sendSms(values);
        closeModal();
        createMessage.success(t('common.sendText'));
      }

      return { register, schemas, registerForm, handleOK, t };
    },
  });
</script>