{$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">媒介名称 *</td>
            <td>
                <input type="text" name="name" ref="focus" maxlength="100"/>
                <p class="comment">给当前媒介填写一个容易识别的名称。</p>
            </td>
        </tr>
        <tr>
            <td class="color-border title">媒介类型 *</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="类似于 smtp.example.com:465"/>
                    <p class="comment">只支持SSL（或TLS）连接，端口通常为：465或587。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">账号 *</td>
                <td>
                    <input type="text" name="emailUsername" v-model="emailUsername" maxlength="500" placeholder="类似于 xxx@example.com" @input="changeEmailUsername()"/>
                    <p class="comment">邮箱账号，比如 123456@qq.com<span v-html="emailUsernameHelp"></span>。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">密码 *</td>
                <td>
                    <input type="password" name="emailPassword" maxlength="100"/>
                    <p class="comment">账号对应的密码或者授权码（比如QQ邮箱就需要授权码）。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">发送者Email</td>
                <td>
                    <input type="text" name="emailFrom" maxlength="500" placeholder="类似于 xxx@example.com"/>
                    <p class="comment">默认和账号一致</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">可以在URL中使用<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>和<code-label>${MessageBody}</code-label>来代表接收人标识、标题和内容。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">请求方法 *</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="webHookMethod"
                        v-model="webHookMethod"
                        :options="[
                            ...methods.map(method => ({
                                label: method??'',
                                value: method??'',
                            }))
                        ]"
                    ></b-select>

                    <!-- <select name="webHookMethod" v-model="webHookMethod" class="ui dropdown" style="width:10em">
                        <option v-for="method in methods" :value="method">{{method}}</option>
                    </select> -->
                    <p class="comment" v-if="webHookMethod == 'POST'">将以POST方式发送<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>和<code-label>${MessageBody}</code-label>参数，分别代表接收人标识、标题和内容</p>
                </td>
            </tr>
            <tr v-show="advancedOptionsVisible">
                <td class="color-border">自定义报头</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="删除" @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="名称" maxlength="100" @keyup.enter="confirmWebHookHeadersAdding" @keypress.enter.prevent="1"/>
                            </div>
                            <div class="ui field">:</div>
                            <div class="ui field">
                                <input type="text" placeholder="值" 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()">确定</button>
                                &nbsp; <a href="" @click.prevent="cancelWebHookHeadersAdding()">取消</a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr v-show="webHookMethod == 'POST' && advancedOptionsVisible">
                <td class="color-border">自定义内容</td>
                <td>
                    <div class="ui menu tabular small attached">
                        <a href="" class="item" :class="{active:webHookContentType == 'params'}" @click.prevent="selectWebHookContentType('params')">参数对</a>
                        <a href="" class="item" :class="{active:webHookContentType == 'body'}" @click.prevent="selectWebHookContentType('body')">文本内容</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="删除" @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="名称" maxlength="100" @keyup.enter="confirmWebHookParamsAdding" @keypress.enter.prevent="1"/>
                                </div>
                                <div class="ui field">:</div>
                                <div class="ui field">
                                    <textarea type="text" placeholder="值" v-model="webHookParamsAddingValue" cols="50" maxlength="1024" rows="2"></textarea>
                                </div>
                            </div>
                            <button class="ui button tiny" type="button" @click.prevent="confirmWebHookParamsAdding()">确认添加</button>
                            &nbsp;  <a href="" @click.prevent="cancelWebHookParamsAdding()">取消</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="发送的内容"></textarea>
                        <p class="comment">
                            内容中可以使用三个变量：<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>和<code-label>${MessageBody}</code-label>参数，分别代表接收人标识、标题和内容
                        </p>
                    </div>
                </td>
            </tr>
        </tbody>

        <!-- 脚本 -->
        <tbody v-show="mediaType == 'script'">
            <tr>
                <td class="color-border">脚本 *</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')">脚本文件</a>
                        <a class="item" :class="{active:scriptTab == 'code'}" @click.prevent="selectScriptTab('code')">脚本代码</a>
                    </div>
                    <div class="ui bottom segment attached" v-show="scriptTab == 'path'">
                        <input type="text" name="scriptPath" maxlength="500"/>
                        <p class="comment">如果是Shell脚本，请不要忘记在头部添加 <em>#!脚本解释工具</em>，比如 <em>#!/bin/bash</em><br/>
                            执行此脚本时，在脚本中可以使用<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>和<code-label>${MessageBody}</code-label>三个环境变量分别代表通知的接收人标识、标题和内容。
                        </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">如果是Shell脚本，请不要忘记在头部添加 <em>#!脚本解释工具</em>，比如 <em>#!/bin/bash</em><br/>
                            执行此脚本时，在脚本中可以使用<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>和<code-label>${MessageBody}</code-label>三个环境变量分别代表通知的接收人标识、标题和内容。
                        </p>
                    </div>
                </td>
            </tr>
            <tr v-show="advancedOptionsVisible">
                <td class="color-border">当前工作目录<em>（CWD）</em></td>
                <td>
                    <input type="text" name="scriptCwd" maxlength="500"/>
                </td>
            </tr>
            <tr v-show="advancedOptionsVisible">
                <td class="color-border">环境变量<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="变量名" style="width:9em" @keyup.enter="confirmAddEnv" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <input type="text" name="envAddingValue" v-model="envAddingValue" placeholder="变量值" style="width:15em" @keyup.enter="confirmAddEnv" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <button class="ui button" type="button" @click="confirmAddEnv()">添加</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">Hook地址 *</td>
                <td>
                    <textarea name="dingTalkWebHookURL" maxlength="500" placeholder="https://oapi.dingtalk.com/robot/send?access_token=xxx" rows="2"></textarea>
                    <p class="comment">填入自定义群机器人的Hook地址，<a href="https://open.dingtalk.com/document/orgapp/custom-robot-access" target="_blank">获取方法</a>。</p>
                </td>
            </tr>
        </tbody>

        <!-- 企业微信 -->
        <tbody v-show="mediaType == 'qyWeixin'">
            <tr>
                <td class="color-border">企业ID *</td>
                <td>
                    <input type="text" name="qyWeixinCorporateId" maxlength="100" />
                </td>
            </tr>
            <tr>
                <td class="color-border">应用AgentId *</td>
                <td>
                    <input type="text" name="qyWeixinAgentId" maxlength="100"/>
                </td>
            </tr>
            <tr>
                <td class="color-border">应用Secret *</td>
                <td>
                    <input type="text" name="qyWeixinAppSecret" maxlength="100"/>
                </td>
            </tr>
            <tr>
                <td class="color-border">内容文本格式</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="qyWeixinTextFormat"
                        v-model="qyWeixinTextFormat"
                        :options="[
                        {label: '普通文本', value: 'text'},
                        {label: 'Markdown', value: 'markdown'},
                        ]"
                    ></b-select>

                    <!-- <select name="qyWeixinTextFormat" v-model="qyWeixinTextFormat" class="ui dropdown" style="width:10em">
                        <option value="text">普通文本</option>
                        <option value="markdown">Markdown</option>
                    </select> -->
                    <p class="comment" v-if="qyWeixinTextFormat == 'markdown'">企业微信目前只支持少数的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">点击这里了解</a>。</p>
                </td>
            </tr>
        </tbody>

        <!-- 企业微信群机器人 -->
        <tbody v-show="mediaType == 'qyWeixinRobot'">
            <tr>
                <td class="color-border">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">填入自定义群机器人的WebHook地址，<a href="https://open.work.weixin.qq.com/help2/pc/14931" target="_blank">获取方法</a>。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">内容文本格式</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="qyWeixinRobotTextFormat"
                        v-model="qyWeixinRobotTextFormat"
                        :options="[
                        {label: '普通文本', value: 'text'},
                        {label: 'Markdown', value: 'markdown'},
                        ]"
                    ></b-select>

                    <!-- <select name="qyWeixinRobotTextFormat" v-model="qyWeixinRobotTextFormat" class="ui dropdown" style="width:10em">
                        <option value="text">普通文本</option>
                        <option value="markdown">Markdown</option>
                    </select> -->
                    <p class="comment" v-if="qyWeixinRobotTextFormat == 'markdown'">企业微信目前只支持少数的Markdown语法，<a href="https://work.weixin.qq.com/api/doc#90000/90135/91760/markdown%E7%B1%BB%E5%9E%8B" target="_blank">点击这里了解</a>。</p>
                </td>
            </tr>
        </tbody>

        <!-- 阿里云短信 -->
        <tbody v-show="mediaType == 'aliyunSms'">
            <tr>
                <td class="color-border">签名名称 *</td>
                <td>
                    <input type="text" name="aliyunSmsSign" maxlength="100"/>
                    <p class="comment">已经审核通过的短信签名名称</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">模板CODE *</td>
                <td>
                    <input type="text" name="aliyunSmsTemplateCode" maxlength="100" placeholder="类似于SMS_12345"/>
                    <p class="comment">已经审核通过的模板CODE</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">模板变量 *</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="变量名" style="width:9em" @keyup.enter="confirmAddAliyunSmsTemplateVar" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <input type="text" name="aliyunSmsTemplateVarAddingValue" v-model="aliyunSmsTemplateVarAddingValue" placeholder="变量值" style="width:15em" @keyup.enter="confirmAddAliyunSmsTemplateVar" @keypress.enter.prevent="1"/>
                        </div>
                        <div class="ui field">
                            <button class="ui button" type="button" @click="confirmAddAliyunSmsTemplateVar()">添加</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">模板中使用的变量，在变量中可以使用<code-label>${MessageUser}</code-label>、<code-label>${MessageSubject}</code-label>和<code-label>${MessageBody}</code-label>来代表接收人标识、标题和内容。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">AccessKey ID *</td>
                <td>
                    <input type="text" name="aliyunSmsAccessKeyId" maxlength="100"/>
                    <p class="comment">在阿里云控制台中的访问控制中某个用户的AccessKey ID</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">AccessKey Secret *</td>
                <td>
                    <input type="text" name="aliyunSmsAccessKeySecret" maxlength="100"/>
                    <p class="comment">在阿里云控制台中的访问控制中某个用户的AccessKey Secret，和上面的AccessKey ID匹配</p>
                </td>
            </tr>
        </tbody>

        <!-- Telegram -->
        <tbody v-if="mediaType == 'telegram'">
            <tr>
                <td class="color-border">机器人Token *</td>
                <td>
                    <input type="text" name="telegramToken"/>
                    <p class="comment">创建机器人的时候可以获得，类似于 <code-label>123456:AAAA-AAAAAAAAAAAAAAAAAAAA</code-label>，可以向 <code-label>@BotFather</code-label> 发送 <code-label>/newbot</code-label>指令创建新的机器人。</p>
                </td>
            </tr>
            <tr>
                <td class="color-border">代理服务</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>

                            <!-- <select class="ui dropdown" name="telegramProxyScheme">
                                <option value="socks5">socks5://</option>
                                <option value="https">https://</option>
                                <option value="http">http://</option>
                            </select> -->
                        </div>
                        <div class="ui field">
                            <input type="text" name="telegramProxyHost" placeholder="HOST:PORT"/>
                        </div>
                    </div>
                    <p class="comment">可选项，仅当API节点所在服务器无法直接连接Telegram API时填写；测试是否能够连接Telegram API的方法：<code-label>curl https://api.telegram.org</code-label>出现2XX、3XX、4XX之类提示时说明能够直接连接；如果你设置了代理，请使用<code-label>curl -x "你的代理服务地址" https://api.telegram.org</code-label>来测试你的代理是否可用。</p>
                </td>
            </tr>
        </tbody>

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

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

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