<template>
  <div class="simulation">
    <a-collapse
      v-model="activeName"
      :bordered="false"
      expand-icon-position="right"
      class="collapse-header-divide"
    >
      <a-collapse-panel key="a" :header="$t('BASE_INFO')">
        <div class="simulation-content">
          <a-tabs v-model="atabsName" tab-position="left">
            <a-tab-pane key="EMAIL" :tab="$t('EMAIL')">
              <a-form-model ref="addForm" :model="form" :rules="rules">
                <a-row>
                  <a-col :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('SENDER')"
                      prop="serverCode"
                    >
                      <a-select
                        v-model="form.serverCode"
                        :placeholder="$t('PLACESELECT')"
                        allow-clear
                      >
                        <a-select-option
                          v-for="item in senderList"
                          :key="item.serverCode"
                          :value="item.serverCode"
                        >
                          {{ item.serverName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('MSG_RECEIVER')"
                      prop="userType"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-select
                            v-model="form.userType"
                            allow-clear
                            :placeholder="$t('PLACESELECT')"
                          >
                            <a-select-option
                              v-for="item in userTypeList"
                              :key="item.value"
                              :value="item.value"
                            >
                              {{ item.label }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="12" style="padding-left: 20px">
                          <SelectReceiverGroup
                            v-if="form.userType === '接收组'"
                            ref="employee"
                            :show-clear="false"
                            :default-selected-keys="employeeNoList"
                            @confirm="employeeChange"
                          />
                          <SelectUser
                            v-show="form.userType === '用户'"
                            ref="selectUser"
                            :show-clear="false"
                            :default-selected-keys="selectUserList"
                            @confirm="getReturnData"
                          >
                          </SelectUser>
                        </a-col>
                      </a-row>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('MESSAGE_MODE')"
                  prop="messageTemplateCode"
                >
                  <a-row>
                    <a-col :span="6">
                      <a-radio-group
                        v-model="mode"
                        :options="modeOptions"
                        @change="handChange(mode)"
                      />
                    </a-col>
                    <a-col :span="4">
                      <a-select
                        v-if="mode === '2'"
                        v-model="form.messageTemplateCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                        @change="handTemplate"
                      >
                        <a-select-option
                          v-for="item in templateList"
                          :key="item.id"
                          :value="item.templateCode"
                        >
                          {{ item.templateName }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
                <template v-if="mode === '1'">
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                    prop="content"
                  >
                    <a-input
                      v-model="form.message.content"
                      rows="20"
                      type="textarea"
                    >
                    </a-input>
                  </a-form-model-item>
                </template>
                <template v-else>
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                    prop="content"
                  >
                    <MegaEditor
                      v-model="templateContent"
                      :container-id="`upgrade-intro1`"
                      :height="300"
                      :toolbar-config="{ toolbarKeys: [] }"
                      :editor-config="{ readOnly: true, placeholder: '' }"
                    />
                  </a-form-model-item>
                  <a-row>
                    <a-col v-for="(item, index) in list" :key="index" :span="8">
                      <a-form-model-item
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 12 }"
                        :label="`${item}`"
                        :rules="[
                          {
                            required: true,
                            message: $t('PLACEENTER'),
                            trigger: 'blur',
                          },
                        ]"
                        :prop="item"
                      >
                        <a-input v-model="form[item]"></a-input>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </template>
              </a-form-model>
              <a-row>
                <a-col :offset="20" :span="4">
                  <a-button type="primary" @click="handSave">
                    <Icon type="icon-cur-save_1" :size="16" />
                    {{ $t("SEND_OUT") }}
                  </a-button>
                  <a-button style="margin-left: 10px" @click="clearForm"
                    ><a-icon type="reload" />{{ $t("RESET") }}</a-button
                  >
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="WECHAT" tab="微信">
              <a-form-model ref="addForm" :model="form" :rules="rules">
                <a-row>
                  <a-col :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('SENDER')"
                      prop="serverCode"
                    >
                      <a-select
                        v-model="form.serverCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                      >
                        <a-select-option
                          v-for="item in senderList"
                          :key="item.serverCode"
                          :value="item.serverCode"
                        >
                          {{ item.serverName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('MSG_RECEIVER')"
                      prop="userType"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-select
                            v-model="form.userType"
                            allow-clear
                            :placeholder="$t('PLACESELECT')"
                          >
                            <a-select-option
                              v-for="item in userTypeList"
                              :key="item.value"
                              :value="item.value"
                            >
                              {{ item.label }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="12" style="padding-left: 20px">
                          <SelectReceiverGroup
                            v-if="form.userType === '接收组'"
                            ref="employee"
                            :show-clear="false"
                            :default-selected-keys="employeeNoList"
                            @confirm="employeeChange"
                          />
                          <SelectUser
                            v-show="form.userType === '用户'"
                            ref="selectUser"
                            :show-clear="false"
                            :default-selected-keys="selectUserList"
                            @confirm="getReturnData"
                          >
                          </SelectUser>
                        </a-col>
                      </a-row>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('MESSAGE_MODE')"
                  prop="messageTemplateCode"
                >
                  <a-row>
                    <a-col :span="6">
                      <a-radio-group
                        v-model="modeWechat"
                        :options="modeOptions"
                        @change="handChange(modeWechat)"
                      />
                    </a-col>
                    <a-col :span="4">
                      <a-select
                        v-if="modeWechat === '2'"
                        v-model="form.messageTemplateCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                        @change="handTemplate"
                      >
                        <a-select-option
                          v-for="item in templateList"
                          :key="item.id"
                          :value="item.templateCode"
                        >
                          {{ item.templateName }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
                <template v-if="modeWechat === '1'">
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                    prop="content"
                  >
                    <a-input
                      v-model="form.message.content"
                      rows="20"
                      type="textarea"
                    >
                    </a-input>
                  </a-form-model-item>
                </template>
                <template v-else>
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                  >
                    <MegaEditor
                      v-model="templateContent"
                      :container-id="`upgrade-intro2`"
                      :height="300"
                      :toolbar-config="{ toolbarKeys: [] }"
                      :editor-config="{ readOnly: true, placeholder: '' }"
                    />
                  </a-form-model-item>
                  <a-row>
                    <a-col v-for="(item, index) in list" :key="index" :span="8">
                      <a-form-model-item
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 12 }"
                        :label="`${item}`"
                        :rules="[
                          {
                            required: true,
                            message: $t('PLACEENTER'),
                            trigger: 'blur',
                          },
                        ]"
                        :prop="item"
                      >
                        <a-input v-model="form[item]"></a-input>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </template>
              </a-form-model>
              <a-row>
                <a-col :offset="20" :span="4">
                  <a-button type="primary" @click="handSave">
                    <Icon type="icon-cur-save_1" :size="16" />
                    {{ $t("SEND_OUT") }}
                  </a-button>
                  <a-button style="margin-left: 10px" @click="clearForm"
                    ><a-icon type="reload" />{{ $t("RESET") }}</a-button
                  >
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="SMS" tab="短信">
              <a-form-model ref="addForm" :model="form" :rules="rules">
                <a-row>
                  <a-col :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('SENDER')"
                      prop="serverCode"
                    >
                      <a-select
                        v-model="form.serverCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                      >
                        <a-select-option
                          v-for="item in senderList"
                          :key="item.serverCode"
                          :value="item.serverCode"
                        >
                          {{ item.serverName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('MSG_RECEIVER')"
                      prop="userType"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-select
                            v-model="form.userType"
                            allow-clear
                            :placeholder="$t('PLACESELECT')"
                          >
                            <a-select-option
                              v-for="item in userTypeList"
                              :key="item.value"
                              :value="item.value"
                            >
                              {{ item.label }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="12" style="padding-left: 20px">
                          <SelectReceiverGroup
                            v-if="form.userType === '接收组'"
                            ref="employee"
                            :show-clear="false"
                            :default-selected-keys="employeeNoList"
                            @confirm="employeeChange"
                          />
                          <SelectUser
                            v-show="form.userType === '用户'"
                            ref="selectUser"
                            :show-clear="false"
                            :default-selected-keys="selectUserList"
                            @confirm="getReturnData"
                          >
                          </SelectUser>
                        </a-col>
                      </a-row>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('MESSAGE_MODE')"
                  prop="messageTemplateCode"
                >
                  <a-row>
                    <a-col :span="2">
                      <a-radio-group
                        v-model="modeSms"
                        :options="modeOptionsOne"
                      />
                    </a-col>
                    <a-col :span="4">
                      <a-select
                        v-if="modeSms === '1'"
                        v-model="form.messageTemplateCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                        @change="handTemplate"
                      >
                        <a-select-option
                          v-for="item in templateList"
                          :key="item.id"
                          :value="item.templateCode"
                        >
                          {{ item.templateName }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('CONTENT')"
                >
                  <MegaEditor
                    v-model="templateContent"
                    :container-id="`upgrade-intro3`"
                    :height="300"
                    :toolbar-config="{ toolbarKeys: [] }"
                    :editor-config="{ readOnly: true, placeholder: '' }"
                  />
                </a-form-model-item>
                <a-row>
                  <a-col v-for="(item, index) in list" :key="index" :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="`${item}`"
                      :rules="[
                        {
                          required: true,
                          message: $t('PLACEENTER'),
                          trigger: 'blur',
                        },
                      ]"
                      :prop="item"
                    >
                      <a-input v-model="form[item]"></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
              <a-row>
                <a-col :offset="20" :span="4">
                  <a-button type="primary" @click="handSave">
                    <Icon type="icon-cur-save_1" :size="16" />
                    {{ $t("SEND_OUT") }}
                  </a-button>
                  <a-button style="margin-left: 10px" @click="clearForm"
                    ><a-icon type="reload" />{{ $t("RESET") }}</a-button
                  >
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="WECHAT_MP" tab="微信公众号">
              <a-form-model ref="addForm" :model="form" :rules="rules">
                <a-row>
                  <a-col :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('SENDER')"
                      prop="serverCode"
                    >
                      <a-select
                        v-model="form.serverCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                      >
                        <a-select-option
                          v-for="item in senderList"
                          :key="item.serverCode"
                          :value="item.serverCode"
                        >
                          {{ item.serverName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('MSG_RECEIVER')"
                      prop="userType"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-select
                            v-model="form.userType"
                            allow-clear
                            :placeholder="$t('PLACESELECT')"
                          >
                            <a-select-option
                              v-for="item in userTypeList"
                              :key="item.value"
                              :value="item.value"
                            >
                              {{ item.label }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="12" style="padding-left: 20px">
                          <SelectReceiverGroup
                            v-if="form.userType === '接收组'"
                            ref="employee"
                            :show-clear="false"
                            :default-selected-keys="employeeNoList"
                            @confirm="employeeChange"
                          />
                          <SelectUser
                            v-show="form.userType === '用户'"
                            ref="selectUser"
                            :show-clear="false"
                            :default-selected-keys="selectUserList"
                            @confirm="getReturnData"
                          >
                          </SelectUser>
                        </a-col>
                      </a-row>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('MESSAGE_MODE')"
                  prop="messageTemplateCode"
                >
                  <a-row>
                    <a-col :span="2">
                      <a-radio-group
                        v-model="modeSms"
                        :options="modeOptionsOne"
                      />
                    </a-col>
                    <a-col :span="4">
                      <a-select
                        v-if="modeSms === '1'"
                        v-model="form.messageTemplateCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                        @change="handTemplate"
                      >
                        <a-select-option
                          v-for="item in templateList"
                          :key="item.id"
                          :value="item.templateCode"
                        >
                          {{ item.templateName }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('CONTENT')"
                >
                  <MegaEditor
                    v-model="templateContent"
                    :container-id="`upgrade-intro4`"
                    :height="300"
                    :toolbar-config="{ toolbarKeys: [] }"
                    :editor-config="{ readOnly: true, placeholder: '' }"
                  />
                </a-form-model-item>
                <a-row>
                  <a-col v-for="(item, index) in list" :key="index" :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="`${item}`"
                      :rules="[
                        {
                          required: true,
                          message: $t('PLACEENTER'),
                          trigger: 'blur',
                        },
                      ]"
                      :prop="item"
                    >
                      <a-input v-model="form[item]"></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
              <a-row>
                <a-col :offset="20" :span="4">
                  <a-button type="primary" @click="handSave">
                    <Icon type="icon-cur-save_1" :size="16" />
                    {{ $t("SEND_OUT") }}
                  </a-button>
                  <a-button style="margin-left: 10px" @click="clearForm"
                    ><a-icon type="reload" />{{ $t("RESET") }}</a-button
                  >
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="JPUSH" tab="极光推送">
              <a-form-model ref="addForm" :model="form" :rules="rules">
                <a-row>
                  <a-col :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('SENDER')"
                      prop="serverCode"
                    >
                      <a-select
                        v-model="form.serverCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                      >
                        <a-select-option
                          v-for="item in senderList"
                          :key="item.accountCode"
                          :value="item.accountCode"
                        >
                          {{ item.accountName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('MSG_RECEIVER')"
                      prop="userType"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-select
                            v-model="form.userType"
                            allow-clear
                            :placeholder="$t('PLACESELECT')"
                          >
                            <a-select-option
                              v-for="item in userTypeList"
                              :key="item.value"
                              :value="item.value"
                            >
                              {{ item.label }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="12" style="padding-left: 20px">
                          <SelectReceiverGroup
                            v-if="form.userType === '接收组'"
                            ref="employee"
                            :show-clear="false"
                            :default-selected-keys="employeeNoList"
                            @confirm="employeeChange"
                          />
                          <SelectUser
                            v-show="form.userType === '用户'"
                            ref="selectUser"
                            :show-clear="false"
                            :default-selected-keys="selectUserList"
                            @confirm="getReturnData"
                          >
                          </SelectUser>
                        </a-col>
                      </a-row>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('MESSAGE_MODE')"
                  prop="messageTemplateCode"
                >
                  <a-row>
                    <a-col :span="6">
                      <a-radio-group
                        v-model="modeAurora"
                        :options="modeOptions"
                        @change="handChange(modeAurora)"
                      />
                    </a-col>
                    <a-col :span="4">
                      <a-select
                        v-if="modeAurora === '2'"
                        v-model="form.messageTemplateCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                        @change="handTemplate"
                      >
                        <a-select-option
                          v-for="item in templateList"
                          :key="item.id"
                          :value="item.templateCode"
                        >
                          {{ item.templateName }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
                <template v-if="modeAurora === '1'">
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                    prop="content"
                  >
                    <a-input
                      v-model="form.message.content"
                      rows="20"
                      type="textarea"
                    >
                    </a-input>
                  </a-form-model-item>
                </template>
                <template v-else>
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                  >
                    <MegaEditor
                      v-model="templateContent"
                      :container-id="`upgrade-intro5`"
                      :height="300"
                      :toolbar-config="{ toolbarKeys: [] }"
                      :editor-config="{ readOnly: true, placeholder: '' }"
                    />
                  </a-form-model-item>
                  <a-row>
                    <a-col v-for="(item, index) in list" :key="index" :span="8">
                      <a-form-model-item
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 12 }"
                        :label="`${item}`"
                        :rules="[
                          {
                            required: true,
                            message: $t('PLACEENTER'),
                            trigger: 'blur',
                          },
                        ]"
                        :prop="item"
                      >
                        <a-input v-model="form[item]"></a-input>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </template>
              </a-form-model>
              <a-row>
                <a-col :offset="20" :span="4">
                  <a-button type="primary" @click="handSave">
                    <Icon type="icon-cur-save_1" :size="16" />
                    {{ $t("SEND_OUT") }}
                  </a-button>
                  <a-button style="margin-left: 10px" @click="clearForm"
                    ><a-icon type="reload" />{{ $t("RESET") }}</a-button
                  >
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="DINGTALK" :tab="$t('DINGTALK_PUSH')">
              <a-form-model ref="addForm" :model="form" :rules="rules">
                <a-row>
                  <a-col :span="8">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('SENDER')"
                      prop="serverCode"
                    >
                      <a-select
                        v-model="form.serverCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                      >
                        <a-select-option
                          v-for="item in senderList"
                          :key="item.accountCode"
                          :value="item.accountCode"
                        >
                          {{ item.accountName }}
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item
                      :label-col="{ span: 6 }"
                      :wrapper-col="{ span: 12 }"
                      :label="$t('MSG_RECEIVER')"
                      prop="userType"
                    >
                      <a-row>
                        <a-col :span="12">
                          <a-select
                            v-model="form.userType"
                            allow-clear
                            :placeholder="$t('PLACESELECT')"
                          >
                            <a-select-option
                              v-for="item in userTypeList"
                              :key="item.value"
                              :value="item.value"
                            >
                              {{ item.label }}
                            </a-select-option>
                          </a-select>
                        </a-col>
                        <a-col :span="12" style="padding-left: 20px">
                          <SelectReceiverGroup
                            v-if="form.userType === '接收组'"
                            ref="employee"
                            :show-clear="false"
                            :default-selected-keys="employeeNoList"
                            @confirm="employeeChange"
                          />
                          <SelectUser
                            v-show="form.userType === '用户'"
                            ref="selectUser"
                            :show-clear="false"
                            :default-selected-keys="selectUserList"
                            @confirm="getReturnData"
                          >
                          </SelectUser>
                        </a-col>
                      </a-row>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-form-model-item
                  :label-col="{ span: 2 }"
                  :wrapper-col="{ span: 20 }"
                  :label="$t('MESSAGE_MODE')"
                  prop="messageTemplateCode"
                >
                  <a-row>
                    <a-col :span="6">
                      <a-radio-group
                        v-model="dingTalk"
                        :options="modeOptions"
                        @change="handChange(dingTalk)"
                      />
                    </a-col>
                    <a-col :span="4">
                      <a-select
                        v-if="dingTalk === '2'"
                        v-model="form.messageTemplateCode"
                        allow-clear
                        :placeholder="$t('PLACESELECT')"
                        @change="handTemplate"
                      >
                        <a-select-option
                          v-for="item in templateList"
                          :key="item.id"
                          :value="item.templateCode"
                        >
                          {{ item.templateName }}
                        </a-select-option>
                      </a-select>
                    </a-col>
                  </a-row>
                </a-form-model-item>
                <template v-if="dingTalk === '1'">
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                    prop="content"
                  >
                    <a-input
                      v-model="form.message.content"
                      rows="20"
                      type="textarea"
                    >
                    </a-input>
                  </a-form-model-item>
                </template>
                <template v-else>
                  <a-form-model-item
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 20 }"
                    :label="$t('CONTENT')"
                  >
                    <MegaEditor
                      v-model="templateContent"
                      :container-id="`upgrade-intro6`"
                      :height="300"
                      :toolbar-config="{ toolbarKeys: [] }"
                      :editor-config="{ readOnly: true, placeholder: '' }"
                    />
                  </a-form-model-item>
                  <a-row>
                    <a-col v-for="(item, index) in list" :key="index" :span="8">
                      <a-form-model-item
                        :label-col="{ span: 6 }"
                        :wrapper-col="{ span: 12 }"
                        :label="`${item}`"
                        :rules="[
                          {
                            required: true,
                            message: $t('PLACEENTER'),
                            trigger: 'blur',
                          },
                        ]"
                        :prop="item"
                      >
                        <a-input v-model="form[item]"></a-input>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </template>
              </a-form-model>
              <a-row>
                <a-col :offset="20" :span="4">
                  <a-button type="primary" @click="handSave">
                    <Icon type="icon-cur-save_1" :size="16" />
                    {{ $t("SEND_OUT") }}
                  </a-button>
                  <a-button style="margin-left: 10px" @click="clearForm"
                    ><a-icon type="reload" />{{ $t("RESET") }}</a-button
                  >
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script>
import { Icon, RichTextEditor as MegaEditor } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import SelectReceiverGroup from "@/components/SelectReceiverGroup";
import SelectUser from "@/components/SelectUser";

export default {
  components: { SelectReceiverGroup, SelectUser, Icon, MegaEditor },
  data() {
    return {
      activeName: "a",
      atabsName: "EMAIL",
      userType: "",
      mode: "1",
      modeWechat: "1",
      dingTalk: "1",
      modeSms: "1",
      modeAurora: "1",
      templateContent: "",
      form: {
        messageType: "",
        serverCode: "", // 发件人id
        receiverCode: "", //  接收组id
        receiverList: [
          {
            email: "",
            phone: "",
            userName: "",
            userId: undefined,
            dingTalkUserId: "",
            wechatNumber: "",
          },
        ], // 用户组数组
        message: {
          content: "",
        }, // 消息内容
        messageTemplateCode: "",
        args: {},
        userType: "",
      },
      employeeNoList: [],
      selectUserList: [], // 当前所有的用户列表
      senderList: [],
      templateList: [],
      list: [],
      userTypeList: [
        { label: "用户", value: "用户" },
        { label: "接收组", value: "接收组" },
      ],
      modeOptions: [
        { label: "自定义", value: "1" },
        { label: "模板", value: "2" },
      ],
      modeOptionsOne: [{ label: "模板", value: "1" }],
    };
  },
  computed: {
    rules() {
      return {
        serverCode: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
        userType: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  watch: {
    atabsName(old) {
      if (old === "JPUSH") {
        this.jpushSearch();
        this.clearForm();
      } else if (old === "WECHAT_MP") {
        this.wechatSearch();
        this.clearForm();
      } else if (old === "DINGTALK") {
        this.dingtalkSearch();
        this.clearForm();
      } else {
        this.init();
        this.clearForm();
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 获取发送人下拉
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/msg/message-simulation/list-server`,
          {
            params: {
              messageType: this.atabsName,
            },
          }
        )
        .then((res) => {
          this.senderList = res.data.data;
        });
      // 获取模板的下拉
      this.$axios
        .get(
          `${ApiConstant.PREFIX_CORE}/api/msg/message-simulation/list-template`
        )
        .then((res) => {
          this.templateList = res.data.data;
        });
    },
    // 获取极光推送配置发送人的下拉列表
    jpushSearch() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/jpush/account/list`, {
          params: { enableFlag: "Y" },
        })
        .then((res) => {
          this.senderList = res.data.data;
        });
    },
    // 获取微信公众号发送人的下拉列表
    wechatSearch() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/wechat/official/account/list`, {
          params: { enableFlag: "Y" },
        })
        .then((res) => {
          this.senderList = res.data.data;
        });
    },
    handChange(val) {
      if (val === "1") {
        this.form.message.content = "";
      }
    },
    // 获取极光推送配置发送人的下拉列表
    dingtalkSearch() {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/dingtalk/account/list`, {
          params: { enableFlag: "Y" },
        })
        .then((res) => {
          this.senderList = res.data.data;
        });
    },
    // 选中接收组
    employeeChange(selectedRowKeys, selectedRows) {
      this.employeeNoList = selectedRowKeys;
      // eslint-disable-next-line prefer-destructuring
      const arr = [];
      selectedRows.forEach((item) => {
        arr.push(item.groupCode);
      });
      this.form.receiveGroups = arr;
    },
    // 获取选择用户组件返回数据
    getReturnData(selectedRowKeys, selectedRows) {
      const arr = [];
      selectedRows.forEach((item) => {
        if (this.atabsName === "WECHAT_MP") {
          arr.push({
            userId: item?.id,
            userName: item?.userName,
            email: item?.email,
            phone: item?.mobilePhone,
            dingTalkUserId: item?.ddUnionId,
            openId: item?.openId,
            wechatNumber: item?.wechatCorpUserId,
          });
        } else {
          arr.push({
            userId: item?.id,
            userName: item?.userName,
            email: item?.email,
            dingTalkUserId: item?.ddUnionId,
            phone: item?.mobilePhone,
            wechatNumber: item?.wechatCorpUserId,
          });
        }
      });
      this.form.receiverList = arr;
      this.selectUserList = selectedRowKeys;
    },
    handSave() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.form.messageType = this.atabsName;
          this.list.forEach((item) => {
            this.form.args[item] = this.form[item];
            delete this.form[item];
          });
          const req = {
            ...this.form,
          };
          if (
            this.mode !== "1" ||
            this.modeWechat !== "1" ||
            this.dingTalk !== "1" ||
            this.modeSms !== "1" ||
            this.modeAurora !== "1" ||
            this.atabsName === "SMS" ||
            this.atabsName === "WECHAT_MP"
          ) {
            req.message = null;
          }
          this.$axios
            .post(`${ApiConstant.PREFIX_CORE}/api/msg/remote/send`, req)
            .then((res) => {
              this.$message.success(this.$t("SENT_SUCCESSFULLY"));
              this.clearForm();
            });
        }
      });
    },
    clearForm() {
      this.form = {
        messageType: "",
        serverCode: "", // 发件人id
        receiverCode: "", //  接收组id
        receiverList: [
          {
            email: "",
            phone: "",
            userName: "",
            userId: undefined,
            dingTalkUserId: "",
            wechatNumber: "",
          },
        ], // 用户组数组
        message: {
          content: "",
        },
        messageTemplateCode: "",
        args: {},
        userType: "",
      };
      this.templateContent = "";
      this.employeeNoList = [];
      this.selectUserList = [];
      this.$refs.addForm.clearValidate();
    },
    // 模板选中改变
    handTemplate(id, row) {
      if (row) {
        this.$axios
          .get(
            `${ApiConstant.PREFIX_CORE}/api/msg/message-simulation/template-detail`,
            {
              params: {
                id: row.data.key,
              },
            }
          )
          .then((res) => {
            this.templateContent = res.data.data.content;
            this.list = res.data.data.args;
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.simulation {
  .simulation-content {
    padding: 10px 0 0 50px;
  }
}
.box_html {
  border: 1px solid #ccc;
  padding: 4px 9px;
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  min-height: 430px;
  overflow: auto;
}
</style>
