{$layout}
{$template "waf_menu"}

<div class="left-right-box-container">
    <div class="right-box">
        <!-- 基础设置 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon settings"></i>
                {{t('waf_policy@基础设置')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@策略名称')}}</div>
                <div class="item-content">{{firewallPolicy.name}}</div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@状态')}}</div>
                <div class="item-content">
                    <span v-if="!firewallPolicy.isOn" class="red">{{t('waf_policy@已停用')}}</span>
                    <div v-else-if="firewallPolicy.modeInfo != null">
                        <span :class="{green: firewallPolicy.modeInfo.code == 'defend', blue: firewallPolicy.modeInfo.code == 'observe', grey: firewallPolicy.modeInfo.code == 'bypass'}">{{firewallPolicy.modeInfo.name}}</span>
                        <p class="comment">{{firewallPolicy.modeInfo.description}}</p>
                    </div>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@预置的规则分组')}}</div>
                <div class="item-content">
                    <span class="ui label tiny basic" v-for="group in firewallPolicy.groups" style="margin-bottom:0.5em" :class="{disabled:!group.isOn}">{{group.name}}</span>
                    <div v-if="upgradeItems.length > 0">
                        <div class="ui divider"></div>
                        <a href=""><span class="red">{{t('waf_policy@升级提醒官方提供了新的规则是否要加入以下规则')}}：<span class="ui label basic" v-for="item in upgradeItems" style="margin-bottom: 0.2em">{{item.name}}<span v-if="!item.isOn" class="small">（{{t('waf_policy@默认不启用')}}）</span></span></span></a> &nbsp; &nbsp; <a href="" @click.prevent="upgradeTemplate">[{{t('waf_policy@加入')}}]</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 动作配置 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon lightning"></i>
                {{t('waf_policy@动作配置')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@阻止动作设置')}}</div>
                <div class="item-content">
                    <http-firewall-block-options-viewer :v-block-options="firewallPolicy.blockOptions"></http-firewall-block-options-viewer>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@显示页面动作设置')}}</div>
                <div class="item-content">
                    <http-firewall-page-options-viewer :v-page-options="firewallPolicy.pageOptions"></http-firewall-page-options-viewer>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@人机识别动作配置')}}</div>
                <div class="item-content">
                    <http-firewall-captcha-options-viewer :v-captcha-options="firewallPolicy.captchaOptions"></http-firewall-captcha-options-viewer>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@JSCookie动作配置')}}</div>
                <div class="item-content">
                    <http-firewall-js-cookie-options-viewer :v-js-cookie-options="firewallPolicy.jsCookieOptions"></http-firewall-js-cookie-options-viewer>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@使用系统防火墙')}}</div>
                <div class="item-content">
                    <span class="green" v-if="firewallPolicy.useLocalFirewall">{{t('waf_policy@启用')}}</span>
                    <span class="disabled" v-if="!firewallPolicy.useLocalFirewall">{{t('waf_policy@不启用')}}</span>
                    <p class="comment" v-if="firewallPolicy.useLocalFirewall">{{t('waf_policy@可以在合适的时候自动使用系统自带防火墙进行防御')}}</p>
                </div>  
            </div>
        </div>

        <!-- 日志配置 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon file text"></i>
                {{t('waf_policy@日志配置')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@记录访问日志')}}</div>
                <div class="item-content">
                    <span v-if="firewallPolicy.log == null || !firewallPolicy.log.isOn">{{t('waf_policy@默认')}}</span>
                    <span v-else class="green">{{t('waf_policy@开启')}}</span>
                </div>
            </div>

            <div class="config-item" v-show="firewallPolicy.log != null && firewallPolicy.log.isOn">
                <div class="item-label">{{t('waf_policy@记录请求Body')}}</div>
                <div class="item-content">
                    <span class="green" v-if="firewallPolicy.log.requestBody">{{t('waf_policy@开启')}}</span>
                    <span v-else>{{t('waf_policy@默认')}}</span>
                </div>
            </div>

            <div class="config-item" v-show="firewallPolicy.log != null && firewallPolicy.log.isOn">
                <div class="item-label">{{t('waf_policy@记录区域封禁日志')}}</div>
                <div class="item-content">
                    <span class="green" v-if="firewallPolicy.log.regionDenying">{{t('waf_policy@开启')}}</span>
                    <span v-else>{{t('waf_policy@不记录')}}</span>
                </div>
            </div>
        </div>

        <!-- 区域封禁设置 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon globe"></i>
                {{t('waf_policy@区域封禁设置')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@区域封禁默认提示内容')}}</div>
                <div class="item-content">
                    <span v-if="firewallPolicy.denyCountryHTML != null && firewallPolicy.denyCountryHTML.length > 0">{{t('waf_policy@自定义')}}</span>
                    <span v-else class="disabled">{{t('waf_policy@使用默认')}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@省份封禁默认提示内容')}}</div>
                <div class="item-content">
                    <span v-if="firewallPolicy.denyProvinceHTML != null && firewallPolicy.denyProvinceHTML.length > 0">{{t('waf_policy@自定义')}}</span>
                    <span v-else class="disabled">{{t('waf_policy@使用默认')}}</span>
                </div>
            </div>
        </div>

        <!-- 其他配置 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon cog"></i>
                {{t('waf_policy@其他配置')}}
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@SYNFlood防御')}}</div>
                <div class="item-content">
                    <span v-if="firewallPolicy.synFlood == null || !firewallPolicy.synFlood.isOn" class="disabled">{{t('waf_policy@未启用')}}</span>
                    <firewall-syn-flood-config-viewer v-else :v-syn-flood-config="firewallPolicy.synFlood"></firewall-syn-flood-config-viewer>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@最多检查内容尺寸')}}</div>
                <div class="item-content">
                    <span v-if="firewallPolicy.maxRequestBodySize == 0" class="disabled">{{t('waf_policy@使用默认')}}</span>
                    <span v-else>{{firewallPolicy.maxRequestBodySizeFormat}}</span>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('waf_policy@描述')}}</div>
                <div class="item-content">
                    <span v-if="firewallPolicy.description.length > 0">{{firewallPolicy.description}}</span>
                    <b-empty v-else>{{t('waf_policy@暂时还没有描述。')}}</b-empty>
                </div>
            </div>
        </div>

        <!-- 使用此策略的集群 -->
        <div class="config-section">
            <div class="section-title">
                <i class="icon cloud"></i>
                {{t('waf_policy@使用此策略的集群')}}
            </div>

            <div class="config-item">
                <div class="item-content">
                    <b-empty v-if="clusters.length == 0">{{t('waf_policy@暂时还没有集群使用此策略。')}}</b-empty>
                    <b-table
                        v-if="clusters.length > 0"
                        :columns="[
                            {
                                title: t('waf_policy@集群名称'),
                                dataIndex: 'name',
                                key: 'name',
                                scopedSlots: { customRender: 'name' }
                            }
                        ]"
                        :data-source="clusters"
                        row-key="id"
                        :bordered="false"
                        :pagination="false"
                    >
                        <template slot="name" slot-scope="{ text, record }">
                            {{record.name}}<link-icon :href="'/clusters/cluster?clusterId=' + record.id"></link-icon>
                        </template>
                    </b-table>
                </div>
            </div>
        </div>
    </div>
</div>