<template>
  <BasicModal v-bind="$attrs" @register="register" title="发送参数" @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';

  const schemas: FormSchema[] = [
    {
      field: 'id',
      component: 'Input',
      label: 'id',
      show: false,
    },
    {
      field: 'templatePurpose',
      label: '用途',
      component: 'Input',
      show: false,
      componentProps: {
        maxLength: 36,
        placeholder: '请输入用途',
      },
      dynamicRules: () => {
        return [
          {
            required: false,
            validator: (_, value) => {
              if (String(value).length > 36) {
                return Promise.reject('字数不超过36个字');
              }
              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('字数不超过36个字');
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
    {
      field: 'phoneNumbers',
      component: 'Input',
      label: '手机号码',
      rules: phoneRule,
    },
    {
      field: 'params',
      component: 'InputTextArea',
      label: '短信参数',
      required: true,
      componentProps: {
        placeholder: '示例：{"code":"1234"}',
      },
      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('请输入JSON格式例如{"code":"1234"}');
                }
              } catch {
                return Promise.reject('请输入JSON格式例如{"code":"1234"}');
              }
            },
          },
        ];
      },
    },
    {
      field: 'remark',
      component: 'InputTextArea',
      label: '备注',
      componentProps: {
        maxLength: 255,
        placeholder: '请输入备注',
      },
      dynamicRules: () => {
        return [
          {
            required: false,
            validator: (_, value) => {
              if (String(value).length > 255) {
                return Promise.reject('字数不超过255个字');
              }
              return Promise.resolve();
            },
          },
        ];
      },
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    setup() {
      const platformType = ref('');
      const { createMessage } = useMessage();
      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
        labelWidth: 70,
        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
                ? '示例：{"code":"1234"}'
                : '示例：["123456"]',
          },
          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('请输入JSON格式例如{"code":"1234"}');
                        }
                      } else {
                        // 腾讯云只能是[]开头
                        if (
                          Object.prototype.toString.call(JSON.parse(value)) !== '[object Array]'
                        ) {
                          return Promise.reject('请输入这种格式["123456"]');
                        }
                      }
                      if (typeof JSON.parse(value) == 'object') {
                        return Promise.resolve();
                      }
                      return Promise.reject(
                        platformType.value !== PlateFormTypeEnum.tencent_cound
                          ? '请输入JSON格式例如{"code":"1234"}'
                          : '请输入这种格式["123456"]'
                      );
                    }
                  } catch {
                    return Promise.reject(
                      platformType.value !== PlateFormTypeEnum.tencent_cound
                        ? '请输入JSON格式例如{"code":"1234"}'
                        : '请输入这种格式["123456"]'
                    );
                  }
                },
              },
            ];
          },
        });
        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('发送成功');
      }

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