<!-- 通知模板详情 -->
<template>
  <PageContainer :pageHeaderRender="false" style="padding: 0 10px 10px 10px">
    <Card>
      <Row>
        <Col :span="10">
          <Form layout="vertical" :rules="formRules" ref="formRef" :model="formData">
            <FormItem label="通知方式" name="type">
              <Select
                v-model:value="formData.type"
                placeholder="请选择通知方式"
                :disabled="!!formData.id"
                @change="handleTypeChange"
              >
                <SelectOption v-for="(item, index) in NOTICE_METHOD" :key="index" :value="item.value">
                  {{ item.label }}
                </SelectOption>
              </Select>
            </FormItem>
            <FormItem label="名称" name="name">
              <Input v-model:value="formData.name" placeholder="请输入名称" />
            </FormItem>
            <FormItem label="类型" name="provider" v-if="formData.type !== 'email' && formData.type !== 'webhook'">
              <RadioCard :options="msgType" v-model:value="formData.provider" @change="handleProviderChange" />
            </FormItem>
            <FormItem name="configId" v-if="formData.type !== 'email'">
              <template #label>
                <span>
                  绑定配置
                  <Tooltip title="使用固定的通知配置来发送此通知模板">
                    <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                  </Tooltip>
                </span>
              </template>
              <Select v-model:value="formData.configId" placeholder="请选择绑定配置" @change="handleConfigChange">
                <SelectOption v-for="(item, index) in configList" :key="index" :value="item.id">
                  {{ item.name }}
                </SelectOption>
              </Select>
            </FormItem>
            <!-- 钉钉 -->
            <template v-if="formData.type === 'dingTalk'">
              <template v-if="formData.provider === 'dingTalkMessage'">
                <FormItem :name="['template', 'agentId']">
                  <template #label>
                    <span>
                      AgentId
                      <Tooltip title="应用唯一标识">
                        <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                      </Tooltip>
                    </span>
                  </template>
                  <Input v-model:value="formData.template.agentId" placeholder="请输入AgentId" />
                </FormItem>
                <Row :gutter="10">
                  <Col :span="12">
                    <FormItem label="收信部门">
                      <ToOrg
                        v-model:toParty="formData.template.departmentIdList"
                        :type="formData.type"
                        :config-id="formData.configId"
                      />
                    </FormItem>
                  </Col>
                  <Col :span="12">
                    <FormItem>
                      <template #label>
                        <span>
                          收信人
                          <Tooltip title="如果不填写该字段，将在使用此模板发送通知时进行指定">
                            <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                          </Tooltip>
                        </span>
                      </template>
                      <ToUser
                        v-model:toUser="formData.template.userIdList"
                        :type="formData.type"
                        :config-id="formData.configId"
                      />
                    </FormItem>
                  </Col>
                </Row>
              </template>
              <template v-if="formData.provider === 'dingTalkRobotWebHook'">
                <FormItem label="消息类型" :name="['template', 'messageType']">
                  <Select
                    v-model:value="formData.template.messageType"
                    placeholder="请选择消息类型"
                    @change="handleMessageTypeChange"
                  >
                    <SelectOption v-for="(item, index) in ROBOT_MSG_TYPE" :key="index" :value="item.value">
                      {{ item.label }}
                    </SelectOption>
                  </Select>
                </FormItem>
                <template v-if="formData.template.messageType === 'markdown'">
                  <FormItem label="标题" :name="['template', 'markdown', 'title']">
                    <Input v-model:value="formData.template.markdown.title" placeholder="请输入标题" />
                  </FormItem>
                </template>
                <template v-if="formData.template.messageType === 'link'">
                  <FormItem label="标题" :name="['template', 'link', 'title']">
                    <Input v-model:value="formData.template.link.title" placeholder="请输入标题" />
                  </FormItem>
                  <FormItem label="图片链接">
                    <Input v-model:value="formData.template.link.picUrl" placeholder="请输入图片链接">
                      <template #addonAfter>
                        <a-upload
                          name="file"
                          :action="FILE_UPLOAD"
                          :headers="{
                            [TOKEN_KEY]: LocalStore.get(TOKEN_KEY)
                          }"
                          :showUploadList="false"
                          @change="(e) => handleLinkChange(e)"
                        >
                          <AIcon type="UploadOutlined" />
                        </a-upload>
                      </template>
                    </Input>
                  </FormItem>
                  <FormItem label="内容链接">
                    <Input v-model:value="formData.template.link.messageUrl" placeholder="请输入内容链接" />
                  </FormItem>
                </template>
              </template>
            </template>
            <!-- 微信 -->
            <template v-if="formData.type === 'weixin'">
              <FormItem :name="['template', 'agentId']">
                <template #label>
                  <span>
                    AgentId
                    <Tooltip title="应用唯一标识">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Input v-model:value="formData.template.agentId" placeholder="请输入AgentId" />
              </FormItem>
              <Row :gutter="10">
                <Col :span="12">
                  <FormItem>
                    <template #label>
                      <span>
                        收信人
                        <Tooltip title="如果不填写该字段,将在使用此模板发送通知时进行指定。">
                          <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                        </Tooltip>
                      </span>
                    </template>
                    <ToUser v-model:toUser="formData.template.toUser" :type="formData.type" :config-id="formData.configId" />
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem label="收信部门">
                    <ToOrg
                      v-model:toParty="formData.template.toParty"
                      :type="formData.type"
                      :config-id="formData.configId"
                    />
                  </FormItem>
                </Col>
              </Row>
              <FormItem>
                <template #label>
                  <span>
                    标签推送
                    <Tooltip
                      title="本企业微信的标签ID列表,最多支持100个,如果不填写该字段,将在使用此模板发送通知时进行指定"
                    >
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <ToTag v-model:toTag="formData.template.toTag" :type="formData.type" :config-id="formData.configId" />
              </FormItem>
            </template>
            <!-- 邮件 -->
            <template v-if="formData.type === 'email'">
              <FormItem :name="['template', 'subject']">
                <template #label>
                  <span>
                    标题
                    <Tooltip title="邮件标题">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Input v-model:value="formData.template.subject" placeholder="请输入标题" />
              </FormItem>
              <FormItem :name="['template', 'sendTo']">
                <template #label>
                  <span>
                    收件人
                    <Tooltip title="多个收件人用换行分隔 最大支持1000个号码">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Select
                  mode="tags"
                  v-model:value="formData.template.sendTo"
                  placeholder="请输入收件人邮箱,多个收件人用换行分隔"
                />
              </FormItem>
              <FormItem>
                <template #label>
                  <span>
                    附件信息
                    <Tooltip title="附件只输入文件名称将在发送邮件时进行文件上传">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Attachments v-model:attachments="formData.template.attachments" />
              </FormItem>
            </template>
            <!-- 语音 -->
            <template v-if="formData.type === 'voice'">
              <FormItem :name="['template', 'templateType']">
                <template #label>
                  <span>
                    类型
                    <Tooltip title="语音验证码类型可配置变量，并且只支持数字和英文字母">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Select v-model:value="formData.template.templateType" placeholder="请选择类型">
                  <SelectOption v-for="(item, index) in VOICE_TYPE" :key="index" :value="item.value">
                    {{ item.label }}
                  </SelectOption>
                </Select>
              </FormItem>
              <Row :gutter="10">
                <Col :span="12">
                  <FormItem :name="['template', 'templateCode']">
                    <template #label>
                      <span>
                        模板ID
                        <Tooltip title="阿里云内部分配的唯一ID标识">
                          <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                        </Tooltip>
                      </span>
                    </template>
                    <Input v-model:value="formData.template.templateCode" placeholder="请输入模板ID" />
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem :name="['template', 'calledNumber']">
                    <template #label>
                      <span>
                        被叫号码
                        <Tooltip title="仅支持中国大陆号码">
                          <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                        </Tooltip>
                      </span>
                    </template>
                    <Input v-model:value="formData.template.calledNumber" placeholder="请输入被叫号码" />
                  </FormItem>
                </Col>
              </Row>
              <FormItem :name="['template', 'calledShowNumbers']">
                <template #label>
                  <span>
                    被叫显号
                    <Tooltip title="必须是已购买的号码,用于呼叫号码显示">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Input v-model:value="formData.template.calledShowNumbers" placeholder="请输入被叫显号" />
              </FormItem>
              <FormItem :name="['template', 'playTimes']">
                <template #label>
                  <span>
                    播放次数
                    <Tooltip title="语音文件的播放次数">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <InputNumber
                  v-model:value="formData.template.playTimes"
                  placeholder="请输入播放次数"
                  style="width: 100%"
                />
              </FormItem>
              <FormItem v-if="formData.template.templateType === 'tts'" :name="['template', 'ttsmessage']">
                <template #label>
                  <span>
                    模板内容
                    <Tooltip title="语音验证码内容输入框，用于渲染验语音证码变量。">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Textarea
                  v-model:value="formData.template.ttsmessage"
                  :rows="5"
                  placeholder="内容中的变量将用于阿里云语音验证码"
                />
              </FormItem>
            </template>
            <!-- 短信 -->
            <template v-if="formData.type === 'sms'">
              <Row :gutter="10">
                <Col :span="12">
                  <FormItem :name="['template', 'code']">
                    <template #label>
                      <span>
                        模板
                        <Tooltip title="阿里云短信平台自定义的模板名称">
                          <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                        </Tooltip>
                      </span>
                    </template>
                    <Select v-model:value="formData.template.code" placeholder="请选择模板" @change="handleTemplateChange">
                      <SelectOption v-for="(item, index) in templateList" :key="index" :value="item.templateCode">
                        {{ item.templateName }}
                      </SelectOption>
                    </Select>
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem :name="['template', 'phoneNumber']">
                    <template #label>
                      <span>
                        收信人
                        <Tooltip title="仅支持中国大陆号码">
                          <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                        </Tooltip>
                      </span>
                    </template>
                    <Input v-model:value="formData.template.phoneNumber" placeholder="请输入收信人" />
                  </FormItem>
                </Col>
              </Row>
              <FormItem :name="['template', 'signName']">
                <template #label>
                  <span>
                    签名
                    <Tooltip title="用于短信内容签名信息显示">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Select v-model:value="formData.template.signName" placeholder="请选择签名">
                  <SelectOption v-for="(item, index) in signsList" :key="index" :value="item.signName">
                    {{ item.signName }}
                  </SelectOption>
                </Select>
              </FormItem>
            </template>
            <!-- webhook -->
            <template v-if="formData.type === 'webhook'">
              <FormItem label="请求体">
                <RadioGroup v-model:value="formData.template.contextAsBody" style="margin-bottom: 20px">
                  <Radio :value="true">默认</Radio>
                  <Radio :value="false">自定义</Radio>
                </RadioGroup>
                <Textarea
                  placeholder="请求体中的数据来自于发送通知时指定的所有变量"
                  v-if="formData.template.contextAsBody"
                  disabled
                  :rows="5"
                />
                <div v-else style="height: 400px">
                  <MonacoEditor theme="vs" v-model:modelValue="formData.template.body" />
                </div>
              </FormItem>
            </template>
            <template v-if="formData.type !== 'webhook' && formData.type !== 'voice'">
              <FormItem :name="['template', 'message']">
                <template #label>
                  <span>
                    模板内容
                    <Tooltip title="发送的内容，支持录入变量">
                      <AIcon type="QuestionCircleOutlined" style="margin-left: 2px" />
                    </Tooltip>
                  </span>
                </template>
                <Textarea
                  v-model:value="formData.template.message"
                  :rows="5"
                  :disabled="formData.type === 'sms'"
                  placeholder="变量格式:${name};
    示例:尊敬的${name},${time}有设备触发告警,请注意处理"
                />
              </FormItem>
            </template>
            <FormItem label="变量列表" v-if="formData.variableDefinitions && formData.variableDefinitions.length">
              <VariableDefinitions v-model:variableDefinitions="formData.variableDefinitions" />
            </FormItem>
            <FormItem label="说明">
              <Textarea
                v-model:value="formData.description"
                show-count
                :maxlength="200"
                :rows="5"
                placeholder="请输入说明"
              />
            </FormItem>
            <FormItem>
              <div style="text-align: right">
                <Space>
                  <JButton @click="close"> 取消 </JButton>
                  <JButton type="primary" @click="handleSubmit" :loading="btnLoading"> 保存 </JButton>
                </Space>
              </div>
            </FormItem>
          </Form>
        </Col>
        <Col :span="12" :push="2">
          <Doc :docData="formData" />
        </Col>
      </Row>
    </Card>
  </PageContainer>
</template>

<script setup lang="ts">
  import { getImage, onlyMessage, phoneRegEx, TOKEN_KEY, LocalStore } from '@jdlinker/utils';
  import { UploadChangeParam } from 'ant-design-vue';
  import type { IVariableDefinitions } from '../types';
  import { NOTICE_METHOD, TEMPLATE_FIELD_MAP, MSG_TYPE, ROBOT_MSG_TYPE, VOICE_TYPE } from "../../const";
  import templateApi from '../../../../api/notice/template';
  import Doc from './doc/index';
  import Attachments from './components/Attachments.vue';
  import VariableDefinitions from './components/VariableDefinitions.vue';
  import ToUser from './components/ToUser.vue';
  import ToOrg from './components/ToOrg.vue';
  import ToTag from './components/ToTag.vue';
  import { FILE_UPLOAD } from '../../../../api/comm';
  import type { Rule } from 'ant-design-vue/es/form';
  import { RadioCard } from '@jdlinker/ui';
  import { ref, watch } from 'vue';
  // @ts-ignore
  import { PageContainer, Button as JButton, Card, Row, Col, Form, FormItem, Select, Tooltip, Space, AIcon, Textarea, SelectOption, InputNumber, RadioGroup, Radio, MonacoEditor, Input } from 'linker-ui-components';

  const props = defineProps({
    id: {
      type: String,
      defult: ''
    }
  });
  const emit = defineEmits(['close']);
  // const useForm = Form.useForm;
  const formRef = ref();
  // 消息类型
  const msgType = ref([
    {
      label: '钉钉消息',
      value: 'dingTalkMessage',
      logo: getImage('/notice/dingtalk.png')
    },
    {
      label: '群机器人消息',
      value: 'dingTalkRobotWebHook',
      logo: getImage('/notice/dingTalk-rebot.png')
    }
  ]);

  // 表单数据
  const formData = ref<any>({
    template: {
      subject: '',
      sendTo: [],
      attachments: [],
      message: '',
      text: ''
    },
    name: '',
    type: 'email',
    provider: 'embedded',
    description: '',
    variableDefinitions: [],
    configId: ''
  });

  /**
   * 重置字段值
   */
  const resetPublicFiles = () => {
    formData.value.template = {};
    switch (formData.value.provider) {
      case 'dingTalkMessage':
        formData.value.template.agentId = undefined;
        formData.value.template.message = undefined;
        formData.value.template.departmentIdList = undefined;
        formData.value.template.userIdList = undefined;
        break;
      case 'dingTalkRobotWebHook':
        formData.value.template.message = undefined;
        formData.value.template.messageType = 'markdown';
        formData.value.template.markdown = {
          text: undefined,
          title: undefined
        };
        break;
      case 'corpMessage':
        formData.value.template.agentId = undefined;
        formData.value.template.message = undefined;
        formData.value.template.toParty = undefined;
        formData.value.template.toUser = undefined;
        formData.value.template.toTag = undefined;
        break;
      case 'embedded':
        formData.value.template.subject = undefined;
        formData.value.template.message = undefined;
        formData.value.template.text = undefined;
        formData.value.template.sendTo = [];
        formData.value.template.attachments = [];
        break;
      case 'aliyun':
        formData.value.template.templateType = 'tts';
        formData.value.template.templateCode = undefined;
        formData.value.template.ttsCode = undefined;
        // formData.value.template.message = undefined;
        formData.value.template.ttsmessage = undefined;
        formData.value.template.playTimes = 1;
        formData.value.template.calledShowNumbers = undefined;
        formData.value.template.calledNumber = undefined;
        break;
      case 'aliyunSms':
        formData.value.template.code = undefined;
        formData.value.template.message = undefined;
        formData.value.template.phoneNumber = undefined;
        formData.value.template.signName = undefined;
        break;
      case 'http':
        formData.value.template.contextAsBody = true;
        formData.value.template.body = undefined;
        break;
    }

    formData.value.configId = undefined;
    formData.value.variableDefinitions = [];
    handleMessageTypeChange();
    // console.log('formData.value.template: ', formData.value.template);
  };

  // 根据通知方式展示对应的字段
  watch(
    () => formData.value.type,
    (val) => {
      msgType.value = MSG_TYPE[val];
      formData.value.provider = props.id ? formData.value.provider : msgType.value[0].value;
      if (val !== 'email') getConfigList();
      if (val === 'sms') {
        getTemplateList();
        getSignsList();
      }
    }
  );

  // 验证规则
  const formRules = {
    type: [{ required: true, message: '请选择通知方式' }],
    name: [
      { required: true, message: '请输入名称' },
      { max: 64, message: '最多可输入64个字符' }
    ],
    provider: [{ required: true, message: '请选择类型' }],
    configId: [{ required: true, message: '请选择绑定配置' }],
    template: {
      agentId: [
        { required: true, message: '请输入AgentId' },
        { max: 64, message: '最多可输入64个字符' }
      ],
      messageType: [{ required: true, message: '请选择消息类型' }],
      markdown: {
        title: [
          { required: true, message: '请输入标题' },
          { max: 64, message: '最多可输入64个字符' }
        ]
      },
      link: {
        title: [
          { required: true, message: '请输入标题' },
          { max: 64, message: '最多可输入64个字符' }
        ]
      },
      subject: [
        { required: true, message: '请输入标题' },
        { max: 64, message: '最多可输入64个字符' }
      ],
      sendTo: [
        {
          validator(_rule: Rule, value: string[]) {
            const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            let error;
            if (value) {
              value.some((item: string) => {
                if (!regEmail.test(item)) {
                  error = item;
                  return true;
                }
                return false;
              });
            }
            if (error) return Promise.reject(error ? `${error}邮件格式错误` : '');
            else return Promise.resolve();
          }
        }
      ],
      templateType: [{ required: true, message: '请选择类型' }],
      templateCode: [{ required: true, message: '请输入模板ID' }],
      calledNumber: [
        { max: 64, message: '最多可输入64个字符' },
        {
          validator(_rule: Rule, value: string) {
            if (!value) return Promise.resolve();
            if (!phoneRegEx(value)) return Promise.reject('请输入有效号码');
            return Promise.resolve();
          }
        }
      ],
      calledShowNumbers: [
        { max: 64, message: '最多可输入64个字符' },
        {
          validator(_rule: Rule, value: string) {
            if (!value) return Promise.resolve();
            if (!phoneRegEx(value)) return Promise.reject('请输入有效号码');
            return Promise.resolve();
          }
        }
      ],
      playTimes: [
        {
          validator(_rule: Rule, value: number) {
            if (value < 1 || value > 3) return Promise.reject('仅支持1～3次');
            else return Promise.resolve();
          }
        }
      ],
      code: [{ required: true, message: '请选择模板' }],
      signName: [{ required: true, message: '请输入签名' }],
      phoneNumber: [
        { max: 64, message: '最多可输入64个字符' },
        {
          validator(_rule: Rule, value: string) {
            if (!value) return Promise.resolve();
            if (!phoneRegEx(value)) return Promise.reject('该字段不是有效的手机号');
            return Promise.resolve();
          }
        }
      ],
      message: [
        {
          required: true,
          message: '请输入模板内容'
        },
        { max: 500, message: '最多可输入500个字符' }
      ],
      ttsmessage: [{ max: 500, message: '最多可输入500个字符' }]
    },
    description: [{ max: 200, message: '最多可输入200个字符' }]
  };

  // const { validate, validateInfos } = useForm(
  //     formData.value,
  //     formRules,
  // );

  // 字段提取变量
  watch(
    [
      () => formData.value.template.markdown?.title,
      () => formData.value.template.link?.title,
      () => formData.value.template.subject,
      () => formData.value.template.message,
      () => formData.value.template.ttsmessage,
      () => formData.value.template.body
    ],
    () => {
      variableReg();
    }
  );

  /**
   * 将需要提取变量的字段值拼接为一个字符串, 用于统一提取变量
   */
  const spliceStr = () => {
    let variableFieldsStr = formData.value.template.message;
    if (formData.value.provider === 'dingTalkRobotWebHook') {
      if (formData.value.template.messageType === 'markdown')
        variableFieldsStr += formData.value.template.markdown?.title as string;
      if (formData.value.template.messageType === 'link') variableFieldsStr += formData.value.template.link?.title as string;
    }
    if (formData.value.provider === 'embedded') variableFieldsStr += formData.value.template.subject as string;
    if (formData.value.provider === 'http') variableFieldsStr += formData.value.template.body as string;
    if (formData.value.provider === 'aliyun') variableFieldsStr += formData.value.template.ttsmessage as string;

    return variableFieldsStr || '';
  };

  /**
   * 根据字段输入内容, 提取变量
   */
  const variableReg = () => {
    const _val = spliceStr();
    // 已经存在的变量
    const oldKey = formData.value?.variableDefinitions?.map((m) => m.id);
    // 正则提取${}里面的值
    const pattern = /(?<=\$\{).*?(?=\})/g;
    const titleList = _val.match(pattern)?.filter((f) => f);
    const newKey = [...new Set(titleList)];
    const result = newKey?.map((m) =>
      oldKey.includes(m)
        ? formData.value?.variableDefinitions.find((item) => item.id === m)
        : {
            id: m,
            name: '',
            type: 'string',
            format: '%s'
          }
    );
    formData.value.variableDefinitions = result as IVariableDefinitions[];
  };

  /**
   * 钉钉机器人 消息类型选择改变
   */
  const handleMessageTypeChange = () => {
    if (formData.value.type !== 'dingTalk') return;
    delete formData.value.template.markdown;
    delete formData.value.template.link;
    delete formData.value.template.text;
    if (formData.value.template.messageType === 'link') {
      formData.value.template.link = {
        title: '',
        picUrl: '',
        messageUrl: '',
        text: formData.value.template.message as string
      };
    }
    if (formData.value.template.messageType === 'markdown') {
      formData.value.template.markdown = {
        title: '',
        text: formData.value.template.message as string
      };
    }
    if (formData.value.template.messageType === 'text') {
      formData.value.template.text = {
        content: formData.value.template.message as string
      };
    }
    // formData.value.variableDefinitions = [];
  };

  /**
   * 获取详情
   */
  const getDetail = async () => {
    if (props.id) {
      const res = await templateApi.detail(props.id as string);
      console.log('getDetail...', res.result);
      // formData.value = res.result;
      Object.assign(formData.value, res.result);
      // 阿里云语音模板内容字段采用别名
      if (formData.value.provider === 'aliyun') {
        formData.value.template.ttsmessage = res.result.template.message;
      }
      // formData.value = cloneDeep(res.result);
    }
  };
  getDetail();

  /**
   * 获取绑定配置
   */
  const configList = ref();
  const getConfigList = async () => {
    const terms = [
      { column: 'type$IN', value: formData.value.type },
      { column: 'provider', value: formData.value.provider }
    ];
    const { result } = await templateApi.getConfig({
      terms,
      sorts: [{ name: 'createTime', order: 'desc' }]
    });
    configList.value = result;
  };

  /**
   * 通知方式改变
   */
  const handleTypeChange = () => {
    setTimeout(() => {
      formData.value.template = TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider];
      resetPublicFiles();
    }, 0);
  };

  /**
   * 通知类型改变
   */
  const handleProviderChange = () => {
    formData.value.template = TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider];

    getConfigList();
    resetPublicFiles();
  };

  /**
   * link消息类型 图片链接
   */
  const handleLinkChange = (info: UploadChangeParam) => {
    if (info.file.status === 'done') {
      formData.value.template.link.picUrl = info.file.response?.result;
    }
  };

  /**
   * 配置选择改变
   */
  const handleConfigChange = () => {
    getTemplateList();
    getSignsList();
  };

  /**
   * 获取阿里模板
   */
  const templateList = ref();
  const getTemplateList = async () => {
    if (!formData.value.configId) return;
    const id = formData.value.configId || undefined;
    const { result } = await templateApi.getAliTemplate(id);
    templateList.value = result;
  };

  /**
   * 短信模板改变
   */
  const handleTemplateChange = () => {
    formData.value.template.message = templateList.value.find(
      (f: any) => formData.value.template.code === f.templateCode
    )?.templateContent;
  };

  /**
   * 获取签名
   */
  const signsList = ref();
  const getSignsList = async () => {
    if (!formData.value.configId) return;
    const id = formData.value.configId || undefined;
    const { result } = await templateApi.getSigns(id);
    signsList.value = result;
  };

  /**
   * 表单提交
   */
  const btnLoading = ref<boolean>(false);
  const handleSubmit = () => {
    // 变量列表存在, 且存在空值
    if (formData.value?.variableDefinitions.length && formData.value?.variableDefinitions.some((s: any) => !s.name)) return;
    if (formData.value.type === 'email') {
      formData.value.template.text = formData.value.template.message;
      // 邮件没有配置字段
      delete formData.value.configId;
    }
    if (formData.value.template.messageType === 'markdown') delete formData.value.template.link;
    if (formData.value.template.messageType === 'link') delete formData.value.template.markdown;
    if (formData.value.provider === 'aliyun') {
      formData.value.template.ttsCode = formData.value.template.templateCode;
      // 语音message字段与其他类型的message字段重名, 但语音不需要必填验证
      // 取别名ttsmessage, 验证通过之后, 赋值回message字段, 并删除别名字段
      formData.value.template.message = formData.value.template.ttsmessage;
      delete formData.value.template.ttsmessage;
    }

    if (formData.value.provider === 'dingTalkRobotWebHook') {
      if (formData.value.template?.messageType === 'text') {
        formData.value.template.text!.content = formData.value.template.message as string;
      }
      if (formData.value.template.messageType === 'markdown') {
        formData.value.template.markdown!.text = formData.value.template.message;
      }
    }

    formRef.value
      ?.validate()
      .then(async () => {
        btnLoading.value = true;

        const res = formData.value.id ? await templateApi.update(formData.value) : await templateApi.save(formData.value);

        if (res?.success) {
          onlyMessage('保存成功', 'success');
          close();
        }
      })
      .catch((err) => {
        console.log('err: ', err);
      })
      .finally(() => {
        btnLoading.value = false;
      });
  };
  const close = () => {
    emit('close');
  };
</script>
