{$layout}
{$template "policy_menu"}

<b-settings-header>修改策略</b-settings-header>
<!-- <h3>修改策略</h3> -->
<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>
    <input type="hidden" name="policyId" :value="policy.id"/>

    <table class="ui table definition selectable">
        <tr>
            <td class="title">策略名称 *</td>
            <td>
                <input type="text" name="name" maxlength="50" ref="focus" v-model="policy.name"/>
            </td>
        </tr>
        <tr>
            <td>存储类型 *</td>
            <td>
                {{policy.typeName}}
            </td>
        </tr>

        <!-- 文件 -->
        <tbody v-show="type == 'file'">
            <tr>
                <td>日志文件路径 *</td>
                <td>
                    <input type="text" name="filePath" v-model="policy.options.path"/>
                    <p class="comment">
                        存储日志的文件路径，文件名中支持变量：
                        <span class="ui label tiny basic">年：${year}</span>
                        <span class="ui label tiny basic">月：${month}</span>
                        <span class="ui label tiny basic">周：${week}</span>
                        <span class="ui label tiny basic">日：${day}</span>
                        <span class="ui label tiny basic">时：${hour}</span>
                        <span class="ui label tiny basic">分：${minute}</span>
                        <span class="ui label tiny basic">秒：${second}</span>
                        <span class="ui label tiny basic">年月日：${date}</span>，比如<span class="ui label tin basic">/var/log/web-access-${date}.log</span>，此文件会在API节点上写入。
                    </p>
                </td>
            </tr>
            <tr>
                <td>自动创建目录</td>
                <td>
                    <checkbox name="fileAutoCreate" :v-value="1" v-model="policy.options.autoCreate"></checkbox>
                    <p class="comment">选中后，如果文件目录不存在时可以自动创建。</p>
                </td>
            </tr>
        </tbody>

        <!-- Elastic Search -->
        <tbody v-show="type == 'es'">
            <tr>
                <td>Endpoint *</td>
                <td>
                    <input type="text" name="esEndpoint" v-model="policy.options.endpoint"/>
                    <p class="comment">ES HTTP接口地址，类似于192.168.1.100:9200，需要能够被API节点访问。</p>
                </td>
            </tr>
            <tr>
                <td>Index *</td>
                <td>
                    <input type="text" name="esIndex" v-model="policy.options.index"/>
                    <p class="comment">Index名称，支持变量：
                        <span class="ui label tiny basic">年：${year}</span>
                        <span class="ui label tiny basic">月：${month}</span>
                        <span class="ui label tiny basic">周：${week}</span>
                        <span class="ui label tiny basic">日：${day}</span>
                        <span class="ui label tiny basic">时：${hour}</span>
                        <span class="ui label tiny basic">分：${minute}</span>
                        <span class="ui label tiny basic">秒：${second}</span>
                        <span class="ui label tiny basic">年月日：${date}</span></p>
                </td>
            </tr>
            <tr>
                <td>数据流模式</td>
                <td>
                    <checkbox name="esIsDataStream" v-model="policy.options.isDataStream"></checkbox>
                    <p class="comment">适用于索引是数据流（Data Stream）的场景，时间字段为<code-label>timeISO8601</code-label>。</p>
                </td>
            </tr>
            <tr v-show="!policy.options.isDataStream">
                <td>Mapping Type *</td>
                <td>
                    <input type="text" name="esMappingType" v-model="policy.options.mappingType"/>
                    <p class="comment">Mapping名称，支持变量：
                        <span class="ui label tiny basic">年：${year}</span>
                        <span class="ui label tiny basic">月：${month}</span>
                        <span class="ui label tiny basic">周：${week}</span>
                        <span class="ui label tiny basic">日：${day}</span>
                        <span class="ui label tiny basic">时：${hour}</span>
                        <span class="ui label tiny basic">分：${minute}</span>
                        <span class="ui label tiny basic">秒：${second}</span>
                        <span class="ui label tiny basic">年月日：${date}</span></p>
                </td>
            </tr>
            <tr>
                <td>认证用户名</td>
                <td>
                    <input type="text" name="esUsername" v-model="policy.options.username"/>
                    <p class="comment">配置了认证后才需要填写。</p>
                </td>
            </tr>
            <tr>
                <td>认证密码</td>
                <td>
                    <input type="text" name="esPassword" v-model="policy.options.password"/>
                    <p class="comment">配置了认证后才需要填写。</p>
                </td>
            </tr>
        </tbody>

        <!-- TCP Socket -->
        <tbody v-show="type == 'tcp'">
            <tr>
                <td>网络协议 *</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="tcpNetwork"
                        v-model="policy.options.network"
                        :options="[
                            {label: 'TCP', value: 'tcp'},
                            {label: 'Unix Socket', value: 'unix'},
                        ]"
                    ></b-select>

                    <!-- <select name="tcpNetwork" class="ui dropdown" style="width:10em" v-model="policy.options.network">
                        <option value="tcp">TCP</option>
                        <option value="unix">Unix Socket</option>
                    </select> -->
                </td>
            </tr>
            <tr>
                <td>网络地址 *</td>
                <td>
                    <input type="text" name="tcpAddr" v-model="policy.options.addr"/>
                    <p class="comment">接收日志的网络地址，需要能够被API节点访问。</p>
                </td>
            </tr>
        </tbody>

        <!-- Syslog -->
        <tbody v-show="type == 'syslog'">
            <tr>
                <td>网络协议</td>
                <td>
                    <b-select
                        style="width:10em"
                        name="syslogProtocol"
                        v-model="syslogProtocol"
                        :options="[
                            {label: '[无]', value: 'none'},
                            {label: 'TCP', value: 'tcp'},
                            {label: 'UDP', value: 'udp'},
                            {label: 'Unix Socket', value: 'socket'},
                        ]"
                    ></b-select>

                    <!-- <select class="ui dropdown" name="syslogProtocol" v-model="syslogProtocol" style="width:10em">
                        <option value="none">[无]</option>
                        <option value="tcp">TCP</option>
                        <option value="udp">UDP</option>
                        <option value="socket">Unix Socket</option>
                    </select> -->
                </td>
            </tr>

            <tr v-if="syslogProtocol == 'tcp' || syslogProtocol == 'udp'">
                <td>网络地址 *</td>
                <td>
                    <input type="text" name="syslogServerAddr" v-model="policy.options.serverAddr"/>
                    <p class="comment">IP地址或主机名，不包括端口，需要能够被API节点访问。</p>
                </td>
            </tr>
            <tr v-if="syslogProtocol == 'tcp' || syslogProtocol == 'udp'">
                <td>端口</td>
                <td>
                    <input type="text" name="syslogServerPort" v-model="policy.options.serverPort"/>
                </td>
            </tr>

            <tr v-if="syslogProtocol == 'socket'">
                <td>Socket路径 *</td>
                <td>
                    <input type="text" name="syslogSocket" v-model="policy.options.socket"/>
                    <p class="comment">需要能够被API节点访问。</p>
                </td>
            </tr>

            <tr>
                <td>标签<em>(Tag)</em></td>
                <td>
                    <input type="text" name="syslogTag" v-model="policy.options.tag"/>
                    <p class="comment">选填项。</p>
                </td>
            </tr>
            <tr>
                <td>优先级<em>(Priority)</em></td>
                <td>
                    <b-select
                        style="width:10em"
                        name="syslogPriority"
                        v-model="policy.options.priority"
                        :options="[
                            ...syslogPriorities.map(priority => ({
                                label: priority.name,
                                value: priority.value,
                            }))
                        ]"
                    ></b-select>

                    <!-- <select class="ui dropdown" name="syslogPriority" style="width:10em" v-model="policy.options.priority">
                        <option v-for="priority in syslogPriorities" :value="priority.value">{{priority.name}}</option>
                    </select> -->
                    <p class="comment">选填项。</p>
                </td>
            </tr>
        </tbody>

        <!-- 命令行输入流 -->
        <tbody v-show="type == 'command'">
            <tr>
                <td>可执行文件 *</td>
                <td>
                    <input type="text" name="commandCommand" v-model="policy.options.command"/>
                    <p class="comment">不带参数的可执行文件地址，此命令可执行文件需要部署在API节点上。</p>
                </td>
            </tr>
            <tr>
                <td>参数</td>
                <td>
                    <input type="text" name="commandArgs" v-model="policy.options.args"/>
                    <p class="comment">执行命令需要的参数</p>
                </td>
            </tr>
            <tr>
                <td>工作目录</td>
                <td>
                    <input type="text" name="commandDir" v-model="policy.options.dir"/>
                    <p class="comment">命令执行所在的工作目录</p>
                </td>
            </tr>
        </tbody>


        <tr>
            <td>公用</td>
            <td>
                <checkbox name="isPublic" v-model="policy.isPublic"></checkbox>
                <p class="comment"><span class="red">选中后表示自动将此策略应用于所有集群，同时只会有一个公用策略。</span></p>
            </td>
        </tr>


        <tr>
            <td>只记录WAF相关访问日志</td>
            <td>
                <checkbox name="firewallOnly" v-model="policy.firewallOnly"></checkbox>
                <p class="comment">默认记录所有访问日志；如果选中此项，则表示只记录WAF相关访问日志。</p>
            </td>
        </tr>
        <tr>
            <td>停用默认数据库存储</td>
            <td>
                <checkbox name="disableDefaultDB" v-model="policy.disableDefaultDB"></checkbox>
                <p class="comment">选中后，表示停止将访问日志写入到默认的数据库中。</p>
            </td>
        </tr>

        <tr>
            <td>启用当前策略</td>
            <td>
                <checkbox name="isOn" v-model="policy.isOn"></checkbox>
            </td>
        </tr>
    </table>
    <submit-btn></submit-btn>
</form>