{$layout}

{$template "waf_menu"}

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
    <input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">策略名称 *</td>
            <td>
                <input type="text" name="name" maxlength="100" ref="focus" v-model="firewallPolicy.name"/>
                <p class="comment">给策略起一个容易识别的名字。</p>
            </td>
        </tr>
        <tr>
            <td>当前模式</td>
            <td>
                <b-select
                    name="mode"
                    v-model="firewallPolicy.mode"
                    auto-width
                    :options="[
                        ...modes.map(mode => ({
                            label: mode.name,
                            value: mode.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="mode" v-model="firewallPolicy.mode">
                    <option v-for="mode in modes" :value="mode.code">{{mode.name}}</option>
                </select> -->
                <p class="comment" v-for="mode in modes" v-if="mode.code == firewallPolicy.mode">{{mode.description}}</p>
            </td>
        </tr>
        <tr>
            <td>启用预置的规则</td>
            <td>
                <template v-for="group in groups">
                    <checkbox style="width:10em;margin-bottom:0.5em" name="groupCodes" :v-value="group.code" v-model="group.isOn">
                        {{group.name}}
                    </checkbox>
                </template>
                <p class="comment">可以启用一些我们预置的规则组。</p>
            </td>
        </tr>
    </table>

    <b-settings-header>动作配置</b-settings-header>
    <!-- <h4>动作配置</h4> -->
    <table class="ui table definition selectable">
        <tbody>
            <tr>
                <td class="title">阻止动作配置</td>
                <td>
                    <http-firewall-block-options :v-block-options="firewallPolicy.blockOptions"></http-firewall-block-options>
                </td>
            </tr>
            <tr>
                <td>显示页面动作配置</td>
                <td>
                    <http-firewall-page-options :v-page-options="firewallPolicy.pageOptions"></http-firewall-page-options>
                </td>
            </tr>
            <tr>
                <td>人机识别动作配置</td>
                <td>
                    <http-firewall-captcha-options :v-captcha-options="firewallPolicy.captchaOptions"></http-firewall-captcha-options>
                </td>
            </tr>
            <tr>
                <td>JSCookie动作配置</td>
                <td>
                    <http-firewall-js-cookie-options :v-js-cookie-options="firewallPolicy.jsCookieOptions"></http-firewall-js-cookie-options>
                </td>
            </tr>
        </tbody>
    </table>

    <b-settings-header>日志配置</b-settings-header>
    <!-- <h4>日志配置</h4> -->
    <table class="ui table definition selectable">
        <tr>
            <td class="title" :class="{'color-border':firewallPolicy.log.isOn}">记录访问日志</td>
            <td>
                <input type="hidden" name="logJSON" :value="JSON.stringify(firewallPolicy.log)"/>
                <checkbox name="" v-model="firewallPolicy.log.isOn"></checkbox>
                <p class="comment">选中后，总是记录WAF相关访问日志，即使服务中没有开启访问日志。</p>
            </td>
        </tr>
        <tr v-show="firewallPolicy.log.isOn">
            <td class="color-border">记录请求Body</td>
            <td>
                <checkbox v-model="firewallPolicy.log.requestBody"></checkbox>
                <p class="comment">选中后，表示在访问日志中记录匹配的请求内容。注意：此选项会明显增加访问日志占用空间，请谨慎开启。</p>
            </td>
        </tr>
        <tr v-show="firewallPolicy.log.isOn">
            <td class="color-border">记录区域封禁日志</td>
            <td>
                <checkbox v-model="firewallPolicy.log.regionDenying"></checkbox>
                <p class="comment">选中后，表示在访问日志中记录区域封禁（地区和省份）事件。</p>
            </td>
        </tr>
    </table>

    <b-settings-header>区域封禁设置</b-settings-header>
    <!-- <h4>区域封禁设置</h4> -->
    <table class="ui table definition selectable">
        <tr>
            <td class="title">区域封禁默认提示内容</td>
            <td>
                <textarea v-model="firewallPolicy.denyCountryHTML" name="denyCountryHTML" rows="3"></textarea>
                <p class="comment">当客户端所在区域被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
            </td>
        </tr>
        <tr>
            <td>省份封禁默认提示内容</td>
            <td>
                <textarea v-model="firewallPolicy.denyProvinceHTML" name="denyProvinceHTML" rows="3"></textarea>
                <p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
            </td>
        </tr>
    </table>

    <b-settings-header>其他配置</b-settings-header>
    <!-- <h4>其他配置</h4> -->
    <table class="ui table definition selectable">
        <tbody>
            <tr>
                <td class="title">使用系统防火墙</td>
                <td>
                    <checkbox name="useLocalFirewall" :v-value="1" v-model="firewallPolicy.useLocalFirewall"></checkbox>
                    <p class="comment">开启后，可以在合适的时候自动使用系统自带防火墙进行防御；建议在每个边缘节点都安装nftables以提升封禁性能。</p>
                </td>
            </tr>
            <tr>
                <td>SYN Flood防御</td>
                <td>
                    <firewall-syn-flood-config-box :v-syn-flood-config="firewallPolicy.synFloodConfig"></firewall-syn-flood-config-box>
                </td>
            </tr>
            <tr>
                <td>最多检查内容尺寸</td>
                <td>
                    <input type="hidden" name="maxRequestBodySize" v-model="maxRequestBodySize"/>
                    <div class="ui input right labeled">
                        <input type="text" style="width: 10em" maxlength="10" v-model="firewallPolicy.maxRequestBodySize" @input="changeMaxRequestBodySize(firewallPolicy.maxRequestBodySize)"/>
                        <span class="ui label">字节</span>
                    </div>
                    <p class="comment"><span v-if="maxRequestBodySize > 0">当前：{{maxRequestBodySizeFormat}}。</span>WAF能够分析的最大文件内容尺寸，0表示默认，默认为512K；此值越大，对应使用的系统内存越多，除非特殊情况，否则请谨慎修改。</p>
                </td>
            </tr>
            <tr>
                <td>描述</td>
                <td>
                    <textarea name="description" rows="3" v-model="firewallPolicy.description"></textarea>
                </td>
            </tr>
            <tr>
                <td>启用当前策略</td>
                <td>
                    <checkbox name="isOn" :v-value="1" v-model="firewallPolicy.isOn"/>
                </td>
            </tr>
        </tbody>
    </table>

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