<template>
  <div class="px-4">
    <a-form :model="formState" layout="vertical" autocomplete="off" ref="FormRef">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            label="渠道"
            name="cloudType"
            :rules="[{ required: true, message: '请填写渠道!' }]"
          >
            <a-select
              v-model:value="formState.cloudType"
              style="width: 100%"
              :options="cloudTypeOptions"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="短信签名"
            name="channelNumber"
            :rules="[{ required: true, message: '请填写短信签名!' }]"
          >
            <a-input-number
              style="width: 100%"
              v-model:value="formState.channelNumber"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="短信限制时间"
            name="limitTime"
            :rules="[{ required: true, message: '请填写短信限制时间!' }]"
          >
            <a-input-number
              style="width: 100%"
              v-model:value="formState.limitTime"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="短信限制次数"
            name="limitCount"
            :rules="[{ required: true, message: '请填写短信限制次数!' }]"
          >
            <a-input-number
              style="width: 100%"
              v-model:value="formState.limitCount"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="验证码通道号"
            name="captchaSender"
            :rules="[{ required: true, message: '请填写验证码通道号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.captchaSender"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="验证码模板号"
            name="captchaTemplateId"
            :rules="[{ required: true, message: '请填写验证码模板号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.captchaTemplateId"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="消息通知通道号"
            name="notifySender"
            :rules="[{ required: true, message: '请填写消息通知通道号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.notifySender"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="消息通知模板号"
            name="notifyTemplateId"
            :rules="[{ required: true, message: '请填写消息通知模板号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.notifyTemplateId"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="传阅消息通道号"
            name="circulatedSender"
            :rules="[{ required: true, message: '请填写传阅消息通道号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.circulatedSender"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="传阅消息模板号"
            name="circulatedTemplateId"
            :rules="[{ required: true, message: '请填写传阅消息模板号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.circulatedTemplateId"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="超时提醒通道号"
            name="timeoutSender"
            :rules="[{ required: true, message: '请填写超时提醒通道号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.timeoutSender"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="超时提醒模板号"
            name="timeoutTemplateId"
            :rules="[{ required: true, message: '请填写超时提醒模板号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.timeoutTemplateId"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="消息推送通道号"
            name="messageSendSender"
            :rules="[{ required: true, message: '请填写消息推送通道号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.messageSendSender"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label=" 消息推送模板号"
            name="messageSendTemplateId"
            :rules="[{ required: true, message: '请填写 消息推送模板号!' }]"
          >
            <a-input
              style="width: 100%"
              v-model:value="formState.messageSendTemplateId"
              placeholder="请填写"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item>
            <div class="flex justify-center mt-8">
              <a-button type="primary" @click="handleSubmit" class="w-25 !rounded">
                {{ t('确认') }}</a-button
              >
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { set, getInfo } from '/@/api/system/generator/accountSettings';
  import { CloudType, MessageType } from '/@/enums/messageTemplate';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { notification } = useMessage();
  const FormRef = ref();
  const { t } = useI18n();

  interface FormState {
    cloudType: CloudType;
    channelNumber: number;
    limitTime: number;
    limitCount: number;
    userName: string;
    password: string;
    captchaSender: string;
    captchaTemplateId: string;
    notifySender: string;
    notifyTemplateId: string;
    circulatedSender: string;
    circulatedTemplateId: string;
    timeoutSender: string;
    timeoutTemplateId: string;
    messageSendSender: string;
    messageSendTemplateId: string;
  }

  const formState = reactive<FormState>({
    cloudType: CloudType.HUAWEI,
    channelNumber: 1,
    limitTime: 1,
    limitCount: 1,
    userName: '',
    password: '',
    captchaSender: '',
    captchaTemplateId: '',
    notifySender: '',
    notifyTemplateId: '',
    circulatedSender: '',
    circulatedTemplateId: '',
    timeoutSender: '',
    timeoutTemplateId: '',
    messageSendSender: '',
    messageSendTemplateId: '',
  });
  const cloudTypeOptions = [
    {
      value: CloudType.ALIBABA,
      label: t('阿里云'),
    },
    {
      value: CloudType.TENCENT,
      label: t('腾讯云'),
    },
    {
      value: CloudType.HUAWEI,
      label: t('华为云'),
    },
    {
      value: CloudType.HEYI,
      label: t('合一'),
    },
    {
      value: CloudType.JD,
      label: t('京东'),
    },
    {
      value: CloudType.RONGLIAN,
      label: t('容联'),
    },
    {
      value: CloudType.YIMEI,
      label: t('亿美'),
    },
    {
      value: CloudType.TIANYI,
      label: t('天翼云'),
    },
    {
      value: CloudType.YUNPIAN,
      label: t('云片'),
    },
  ];
  onMounted(async () => {
    let res = await getInfo(MessageType.SMS);
    if (res && res.configJson) {
      let config = JSON.parse(res.configJson);
      if (config.cloudType) formState.cloudType = config.cloudType;
      if (config.channelNumber) formState.channelNumber = config.channelNumber;
      if (config.limitTime) formState.limitTime = config.limitTime;
      if (config.limitCount) formState.limitCount = config.limitCount;
      if (config.userName) formState.userName = config.userName;
      if (config.password) formState.password = config.password;
      if (config.captchaSender) formState.captchaSender = config.captchaSender;
      if (config.captchaTemplateId) formState.captchaTemplateId = config.captchaTemplateId;
      if (config.notifySender) formState.notifySender = config.notifySender;
      if (config.notifyTemplateId) formState.notifyTemplateId = config.notifyTemplateId;
      if (config.circulatedSender) formState.circulatedSender = config.circulatedSender;
      if (config.circulatedTemplateId) formState.circulatedTemplateId = config.circulatedTemplateId;
      if (config.timeoutSender) formState.timeoutSender = config.timeoutSender;
      if (config.timeoutTemplateId) formState.timeoutTemplateId = config.timeoutTemplateId;
      if (config.messageSendSender) formState.messageSendSender = config.messageSendSender;
      if (config.messageSendTemplateId)
        formState.messageSendTemplateId = config.messageSendTemplateId;
    }
  });
  async function handleSubmit() {
    try {
      await FormRef.value.validate();
      await set(MessageType.SMS, formState);
      notification.success({
        message: t('提示'),
        description: t('配置成功'),
      }); //提示消息
    } catch (error) {}
  }
</script>
