{$layout}
{$template "../menu"}
{$template "/left_menu_with_menu"}

<div class="left-right-box-container">

    <div class="right-box">
        <first-menu>
            <menu-item @click.prevent="createAction"><i class="icon add"></i> {{t('firewall_actions_index@添加动作')}}</menu-item>
            <span class="item disabled">|</span>
            <span class="item"><tip-icon :content="t('firewall_actions_index@可以设置WAF中的规则集和IP名单中的IP级别从而在匹配时触发对应的动作')"></tip-icon></span>
        </first-menu>

        <!-- 全局配置选项 -->
        <div class="config-section" v-show="!isGlobal">
            <div class="section-title">
                <i class="icon setting"></i>
                {{t('firewall_actions_index@全局配置选项')}}
            </div>
            <form class="ui form" data-tea-action="$" data-tea-success="success">
                <csrf-token></csrf-token>
                <input type="hidden" name="clusterId" :value="clusterId"/>

                <div class="config-item">
                    <div class="item-label">{{t('firewall_actions_index@使用全局配置')}}</div>
                    <div class="item-content">
                        <p-switch name="useGlobal" v-model="useGlobal"></p-switch>
                        <p class="comment">{{t('firewall_actions_index@确定当前配置是否使用全局集群配置勾选表面当前使用全局配置否则使用自定义配置')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label"></div>
                    <div class="item-content">
                        <submit-btn></submit-btn>
                    </div>
                </div>
            </form>
        </div>

        <div class="margin"></div>

        <!-- 动作列表 -->
        <b-empty v-if="!hasActions">{{t('firewall_actions_index@暂时还没有自定义动作')}}</b-empty>

        <div v-for="level in levels" v-if="level.actions.length > 0" :key="level.code" style="margin-bottom: 1.5rem;">
            <h4 class="ui header" style="margin-bottom: 0.8rem;">{{level.name}}{{t('firewall_actions_index@级别动作')}}</h4>
            <b-table
                :columns="columns"
                :data-source="level.actions"
                :row-key="'id'"
                size="middle"
            >
                <!-- 名称 -->
                <template slot="nameSlot" slot-scope="{ record }">
                    {{record.name}}
                </template>

                <!-- 类型 -->
                <template slot="typeSlot" slot-scope="{ record }">
                    {{record.typeName}}
                </template>

                <!-- 操作 -->
                <template slot="actionSlot" slot-scope="{ record }">
                    <a-button type="link" @click="updateAction(record.id)">
                        <i class="pi pi-pen-to-square"></i> {{t('firewall_actions_index@修改')}}
                    </a-button>
                    <a-button type="link" @click="deleteAction(record.id)">
                        <i class="pi pi-trash"></i> {{t('firewall_actions_index@删除')}}
                    </a-button>
                </template>
            </b-table>
        </div>
    </div>
</div>