{$layout "layout_popup"}
{$template "/code_editor"}

<!-- <h3>创建媒介</h3> -->
<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>

    <table class="ui table definition selectable">
        <tr>
            <td class="title">{{t('媒介名称')}} *</td>
            <td>
                <input type="text" name="name" ref="focus" maxlength="100"/>
                <p class="comment">{{t('给当前媒介填写一个容易识别的名称。')}}</p>
            </td>
        </tr>
        <tr>
            <td class="color-border title">{{t('媒介类型')}} *</td>
            <td>
                <message-media-selector @change="changeMediaType"></message-media-selector>
            </td>
        </tr>

        <!-- E-mail -->
        <tbody v-show="mediaType == 'email'">
            <tr>
                <td class="color-border">SMTP *</td>
                <td>
                    <input type="text" name="emailSmtp" maxlength="100" :placeholder="t('类似于') + 'smtp.example.com:465'"/>
                    <p class="comment">{{t('只支持SSL（或TLS）连接，端口通常为：465或587。')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('账号')}} *</td>
                <td>
                    <input type="text" name="emailUsername" v-model="emailUsername" maxlength="500" :placeholder="t('类似于') + 'xxx@example.com'" @input="changeEmailUsername()"/>
                    <p class="comment">{{t('邮箱账号，比如{0}',['123456@qq.com'])}}<span v-html="emailUsernameHelp"></span>。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('密码')}} *</td>
                <td>
                    <input type="password" name="emailPassword" maxlength="100"/>
                    <p class="comment">{{t('账号对应的密码或者授权码（比如QQ邮箱就需要授权码）。')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('发送者Email')}}</td>
                <td>
                    <input type="text" name="emailFrom" maxlength="500" :placeholder="t('类似于') + 'xxx@example.com'"/>
                    <p class="comment">{{t('默认和账号一致')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- webHook -->
        <tbody v-show="mediaType == 'webHook'">
            <tr>
                <td class="color-border">URL *</td>
                <td>
                    <input type="text" name="webHookURL" maxlength="500" placeholder="http://..."/>
                    <p class="comment">{{t('可以在URL中使用')}}<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>{{t('和')}}<code-label>${MessageBody}</code-label>{{t('来代表接收人标识、标题和内容。')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('请求方法')}} *</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="webHookMethod"
                        v-model="webHookMethod"
                        :options="[
                            ...methods.map(method => ({
                                label: method??'',
                                value: method??'',
                            }))
                        ]"
                    ></b-select>
                    <p class="comment" v-if="webHookMethod == 'POST'">{{t('将以POST方式发送')}}<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>{{t('和')}}<code-label>${MessageBody}</code-label>{{t('参数，分别代表接收人标识、标题和内容')}}</p>
                </td>
            </tr>
            <tr v-show="advancedOptionsVisible">
                <td class="color-border">{{t('自定义报头')}}</td>
                <td>
                    <div class="webHook-headers-box">
                        <span class="ui label small basic" v-for="(header,index) in webHookHeaders">{{header.name}}:{{header.value}}
                            <input type="hidden" name="webHookHeaderNames" :value="header.name"/>
                            <input type="hidden" name="webHookHeaderValues" :value="header.value"/>
                            <a href="" :title="t('删除')" @click.prevent="removeWebHookHeader(index)"><i class="icon remove"></i></a>
                        </span>
                    </div>
                    <div style="margin-top: 1em">
                        <b-add-button @click="addWebHookHeader()" v-if="!webHookHeadersAdding"></b-add-button>
                    </div>
                    <div v-if="webHookHeadersAdding" style="margin-top: 1em">
                        <div class="ui fields inline">
                            <div class="ui field">
                                <input type="text" name="webHookHeaderName" v-model="webHookHeadersAddingName" size="8" :placeholder="t('名称')" maxlength="100" @keyup.enter="confirmWebHookHeadersAdding" @keypress.enter.prevent="1"/>
                            </div>
                            <div class="ui field">:</div>
                            <div class="ui field">
                                <input type="text" :placeholder="t('值')" v-model="webHookHeadersAddingValue" size="12" maxlength="256" @keyup.enter="confirmWebHookHeadersAdding" @keypress.enter.prevent="1"/>
                            </div>
                            <div class="ui field">
                                <button class="ui button tiny" type="button" @click.prevent="confirmWebHookHeadersAdding()">{{t('确定')}}</button>
                                &nbsp; <a href="" @click.prevent="cancelWebHookHeadersAdding()">{{t('取消')}}</a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr v-show="webHookMethod == 'POST' && advancedOptionsVisible">
                <td class="color-border">{{t('自定义内容')}}</td>
                <td>
                    <div class="ui menu tabular small attached">
                        <a href="" class="item" :class="{active:webHookContentType == 'params'}" @click.prevent="selectWebHookContentType('params')">{{t('参数对')}}</a>
                        <a href="" class="item" :class="{active:webHookContentType == 'body'}" @click.prevent="selectWebHookContentType('body')">{{t('文本内容')}}</a>
                    </div>
                    <div class="ui segment attached" v-if="webHookContentType == 'params'">
                        <input type="hidden" name="webHookContentType" value="params"/>
                        <div class="webHook-headers-box">
                            <span class="ui label small basic" v-for="(param,index) in webHookParams">{{param.name}}:{{param.value}}
                                <input type="hidden" name="webHookParamNames" :value="param.name"/>
                                <input type="hidden" name="webHookParamValues" :value="param.value"/>
                                <a href="" :title="t('删除')" @click.prevent="removeWebHookParam(index)"><i class="icon remove"></i></a>
                            </span>
                        </div>
                        <b-add-button @click="addWebHookParam()" v-if="!webHookParamsAdding"></b-add-button>
                        <div v-if="webHookParamsAdding">
                            <input type="hidden" name="webHookContentType" value="params"/>
                            <div class="ui fields inline">
                                <div class="ui field">
                                    <input type="text" name="webHookParamName" v-model="webHookParamsAddingName" :placeholder="t('名称')" maxlength="100" @keyup.enter="confirmWebHookParamsAdding" @keypress.enter.prevent="1"/>
                                </div>
                                <div class="ui field">:</div>
                                <div class="ui field">
                                    <textarea type="text" :placeholder="t('值')" v-model="webHookParamsAddingValue" cols="50" maxlength="1024" rows="2"></textarea>
                                </div>
                            </div>
                            <button class="ui button tiny" type="button" @click.prevent="confirmWebHookParamsAdding()">{{t('确认添加')}}</button>
                            &nbsp;  <a href="" @click.prevent="cancelWebHookParamsAdding()">{{t('取消')}}</a>
                        </div>
                    </div>
                    <div class="ui segment attached" v-if="webHookContentType == 'body'">
                        <input type="hidden" name="webHookContentType" value="body"/>
                        <textarea name="webHookBody" v-model="webHookBody" rows="5" :placeholder="t('发送的内容')"></textarea>
                        <p class="comment">
                            {{t('内容中可以使用三个变量：')}}<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>{{t('和')}}<code-label>${MessageBody}</code-label>{{t('参数，分别代表接收人标识、标题和内容')}}
                        </p>
                    </div>
                </td>
            </tr>
        </tbody>

        <!-- 脚本 -->
        <tbody v-show="mediaType == 'script'">
            <tr>
                <td class="color-border">{{t('脚本')}} *</td>
                <td>
                    <input type="hidden" name="scriptType" :value="scriptTab"/>
                    <input type="hidden" name="scriptLang" :value="scriptLang"/>
                    <div class="ui tabular menu attached small">
                        <a class="item" :class="{active:scriptTab == 'path'}" @click.prevent="selectScriptTab('path')">{{t('脚本文件')}}</a>
                        <a class="item" :class="{active:scriptTab == 'code'}" @click.prevent="selectScriptTab('code')">{{t('脚本代码')}}</a>
                    </div>
                    <div class="ui bottom segment attached" v-show="scriptTab == 'path'">
                        <input type="text" name="scriptPath" maxlength="500"/>
                        <p class="comment">{{t('如果是Shell脚本，请不要忘记在头部添加')}} <em>#!{{t('脚本解释工具')}}</em>，{{t('比如')}} <em>#!/bin/bash</em><br/>
                            {{t('执行此脚本时，在脚本中可以使用')}}<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>{{t('和')}}<code-label>${MessageBody}</code-label>{{t('三个环境变量分别代表通知的接收人标识、标题和内容。')}}
                        </p>
                    </div>
                    <div class="ui bottom segment attached" v-show="scriptTab == 'code'" style="padding-top:0">
                        <div class="ui menu text small">
                            <a class="item" v-for="lang in scriptLangs" :class="{active:lang.code == scriptLang}" @click.prevent="selectScriptLang(lang.code)">{{lang.name}}</a>
                        </div>
                        <textarea name="scriptCode" id="script-code-editor" rows="1"></textarea>
                        <p class="comment">{{t('如果是Shell脚本，请不要忘记在头部添加')}} <em>#!{{t('脚本解释工具')}}</em>，{{t('比如')}} <em>#!/bin/bash</em><br/>
                            {{t('执行此脚本时，在脚本中可以使用')}}<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>{{t('和')}}<code-label>${MessageBody}</code-label>{{t('三个环境变量分别代表通知的接收人标识、标题和内容。')}}
                        </p>
                    </div>
                </td>
            </tr>
            <tr v-show="advancedOptionsVisible">
                <td class="color-border">{{t('当前工作目录')}}<em>（CWD）</em></td>
                <td>
                    <input type="text" name="scriptCwd" maxlength="500"/>
                </td>
            </tr>
            <tr v-show="advancedOptionsVisible">
                <td class="color-border">{{t('环境变量')}}<em>（ENV）</em></td>
                <td>
                    <div class="ui field">
                            <span class="ui label small basic" v-for="(var1, index) in env">
                                <input type="hidden" name="scriptEnvNames" :value="var1.name"/>
                                <input type="hidden" name="scriptEnvValues" :value="var1.value"/>
                                <em>{{var1.name}}</em>: {{var1.value}}
                                <a href="" @click.prevent="removeEnv(index)"><i class="icon remove"></i></a>
                            </span>
                    </div>
                    <div v-if="envAdding" class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="envAddingName" v-model="envAddingName" :placeholder="t('变量名')" style="width:9em" @keyup.enter="confirmAddEnv" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <input type="text" name="envAddingValue" v-model="envAddingValue" :placeholder="t('变量值')" style="width:15em" @keyup.enter="confirmAddEnv" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <button class="ui button" type="button" @click="confirmAddEnv()">{{t('添加')}}</button>
                        </div>
                        <div class="ui field">
                            <a href="" @click.prevent="cancelEnv()"><i class="icon remove"></i></a>
                        </div>
                    </div>
                    <div class="ui field">
                        <b-add-button @click="addEnv()"></b-add-button>
                    </div>
                </td>
            </tr>
        </tbody>

        <!-- 钉钉群机器人 -->
        <tbody v-show="mediaType == 'dingTalk'">
            <tr>
                <td class="color-border">{{t('Hook地址')}} *</td>
                <td>
                    <textarea name="dingTalkWebHookURL" maxlength="500" placeholder="https://oapi.dingtalk.com/robot/send?access_token=xxx" rows="2"></textarea>
                    <p class="comment">{{t('填入自定义群机器人的Hook地址，')}}<a href="https://open.dingtalk.com/document/orgapp/custom-robot-access" target="_blank">{{t('获取方法')}}</a>。</p>
                </td>
            </tr>
        </tbody>

        <!-- 企业微信 -->
        <tbody v-show="mediaType == 'qyWeixin'">
            <tr>
                <td class="color-border">{{t('企业ID')}} *</td>
                <td>
                    <input type="text" name="qyWeixinCorporateId" maxlength="100" />
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('应用AgentId')}} *</td>
                <td>
                    <input type="text" name="qyWeixinAgentId" maxlength="100"/>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('应用Secret')}} *</td>
                <td>
                    <input type="text" name="qyWeixinAppSecret" maxlength="100"/>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('内容文本格式')}}</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="qyWeixinTextFormat"
                        v-model="qyWeixinTextFormat"
                        :options="[
                        {label: t('普通文本'), value: 'text'},
                        {label: 'Markdown', value: 'markdown'},
                        ]"
                    ></b-select>
                    <p class="comment" v-if="qyWeixinTextFormat == 'markdown'">{{t('企业微信目前只支持少数的Markdown语法，')}}<a href="https://work.weixin.qq.com/api/doc#90000/90135/90236/%E6%94%AF%E6%8C%81%E7%9A%84markdown%E8%AF%AD%E6%B3%95" target="_blank">{{t('点击这里了解')}}</a>。</p>
                </td>
            </tr>
        </tbody>

        <!-- 企业微信群机器人 -->
        <tbody v-show="mediaType == 'qyWeixinRobot'">
            <tr>
                <td class="color-border">{{t('WebHook地址')}} *</td>
                <td>
                    <textarea name="qyWeixinRobotWebHookURL" maxlength="500" placeholder="https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxx" rows="2"></textarea>
                    <p class="comment">{{t('填入自定义群机器人的WebHook地址，')}}<a href="https://open.work.weixin.qq.com/help2/pc/14931" target="_blank">{{t('获取方法')}}</a>。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('内容文本格式')}}</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="qyWeixinRobotTextFormat"
                        v-model="qyWeixinRobotTextFormat"
                        :options="[
                        {label: t('普通文本'), value: 'text'},
                        {label: 'Markdown', value: 'markdown'},
                        ]"
                    ></b-select>
                    <p class="comment" v-if="qyWeixinRobotTextFormat == 'markdown'">{{t('企业微信目前只支持少数的Markdown语法，')}}<a href="https://work.weixin.qq.com/api/doc#90000/90135/91760/markdown%E7%B1%BB%E5%9E%8B" target="_blank">{{t('点击这里了解')}}</a>。</p>
                </td>
            </tr>
        </tbody>

        <!-- 阿里云短信 -->
        <tbody v-show="mediaType == 'aliyunSms'">
            <tr>
                <td class="color-border">{{t('签名名称')}} *</td>
                <td>
                    <input type="text" name="aliyunSmsSign" maxlength="100"/>
                    <p class="comment">{{t('已经审核通过的短信签名名称')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('模板CODE')}} *</td>
                <td>
                    <input type="text" name="aliyunSmsTemplateCode" maxlength="100" :placeholder="t('类似于') + 'SMS_12345'"/>
                    <p class="comment">{{t('已经审核通过的模板CODE')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('模板变量')}} *</td>
                <td>
                    <div class="ui field">
                            <span class="ui label small basic" v-for="(var1, index) in aliyunSmsTemplateVars">
                                <input type="hidden" name="aliyunSmsTemplateVarNames" :value="var1.name"/>
                                <input type="hidden" name="aliyunSmsTemplateVarValues" :value="var1.value"/>
                                <em>{{var1.name}}</em>: {{var1.value}}
                                <a href="" @click.prevent="removeAliyunSmsTemplateVar(index)"><i class="icon remove"></i></a>
                            </span>
                    </div>
                    <div v-if="aliyunSmsTemplateVarAdding" class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="aliyunSmsTemplateVarAddingName" v-model="aliyunSmsTemplateVarAddingName" :placeholder="t('变量名')" style="width:9em" @keyup.enter="confirmAddAliyunSmsTemplateVar" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <input type="text" name="aliyunSmsTemplateVarAddingValue" v-model="aliyunSmsTemplateVarAddingValue" :placeholder="t('变量值')" style="width:15em" @keyup.enter="confirmAddAliyunSmsTemplateVar" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <button class="ui button" type="button" @click="confirmAddAliyunSmsTemplateVar()">{{t('添加')}}</button>
                        </div>
                        <div class="ui field">
                            <a href="" @click.prevent="cancelAliyunSmsTemplateVar()"><i class="icon remove"></i></a>
                        </div>
                    </div>
                    <div class="ui field">
                        <b-add-button @click="addAliyunSmsTemplateVar()"></b-add-button>
                    </div>
                    <p class="comment">{{t('模板中使用的变量，在变量中可以使用')}}<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>{{t('和')}}<code-label>${MessageBody}</code-label>{{t('来代表接收人标识、标题和内容。')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('AccessKey ID')}} *</td>
                <td>
                    <input type="text" name="aliyunSmsAccessKeyId" maxlength="100"/>
                    <p class="comment">{{t('在阿里云控制台中的访问控制中某个用户的AccessKey ID')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('AccessKey Secret')}} *</td>
                <td>
                    <input type="text" name="aliyunSmsAccessKeySecret" maxlength="100"/>
                    <p class="comment">{{t('在阿里云控制台中的访问控制中某个用户的AccessKey Secret，和上面的AccessKey ID匹配')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- Telegram -->
        <tbody v-if="mediaType == 'telegram'">
            <tr>
                <td class="color-border">{{t('机器人Token')}} *</td>
                <td>
                    <input type="text" name="telegramToken"/>
                    <p class="comment">{{t('创建机器人的时候可以获得，类似于')}} <code-label>123456:AAAA-AAAAAAAAAAAAAAAAAAAA</code-label>，{{t('可以向')}} <code-label>@BotFather</code-label> {{t('发送')}} <code-label>/newbot</code-label>{{t('指令创建新的机器人。')}}</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">{{t('代理服务')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <b-select
                                name="telegramProxyScheme"
                                v-model="telegramProxyScheme"
                                :options="[
                                {label: 'socks5://', value: 'socks5'},
                                {label: 'https://', value: 'https'},
                                {label: 'http://', value: 'http'},
                                ]"
                            ></b-select>
                        </div>
                        <div class="ui field">
                            <input type="text" name="telegramProxyHost" placeholder="HOST:PORT"/>
                        </div>
                    </div>
                    <p class="comment">{{t('可选项，仅当API节点所在服务器无法直接连接Telegram API时填写；测试是否能够连接Telegram API的方法：')}}<code-label>curl https://api.telegram.org</code-label>{{t('出现2XX、3XX、4XX之类提示时说明能够直接连接；如果你设置了代理，请使用')}}<code-label>curl -x "你的代理服务地址" https://api.telegram.org</code-label>{{t('来测试你的代理是否可用。')}}</p>
                </td>
            </tr>
        </tbody>

        <tr>
            <td>{{t('发送频率')}}<em>（{{t('次')}}/{{t('分钟')}}）</em></td>
            <td>
                <div class="ui fields inline">
                    <div class="ui field">
                        <div class="ui right labeled input">
                            <input type="text" name="rateCount" size="4" maxlength="4"/>
                            <span class="ui label">{{t('次')}}</span>
                        </div>
                    </div>
                    <div class="ui field">/</div>
                    <div class="ui field">
                        <div class="ui right labeled input">
                            <input type="text" name="rateMinutes" size="4" maxlength="4"/>
                            <span class="ui label">{{t('分钟')}}</span>
                        </div>
                    </div>
                </div>
                <p class="comment">{{t('用来限制此媒介的发送频率，防止短时间内消息数量过载。')}}</p>
            </td>
        </tr>
        <tr>
            <td>{{t('忽略相似消息周期')}}</td>
            <td>
                <div class="ui input right labeled">
                    <input type="text" name="hashLife" style="width: 5em" maxlength="4"/>
                    <span class="ui label">{{t('秒')}}</span>
                </div>
                <p class="comment">{{t('可以在这个时间内忽略相似消息，防止短时间内消息数量过载。默认60秒。')}}</p>
            </td>
        </tr>

        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>{{t('备注')}}</td>
                <td>
                    <textarea rows="3" name="description" maxlength="100"></textarea>
                </td>
            </tr>
        </tbody>
    </table>

    <submit-btn></submit-btn>
</form>