{$layout}

{$template "waf_menu"}

<second-menu style="margin-top:-1em">
    <a href="" class="item" @click.prevent="createGroup(type)"><i class="pi pi-plus"></i>{{t('waf_groups@添加分组')}}</a>
</second-menu>

<b-empty v-if="groups.length == 0">{{t('waf_groups@暂无规则分组')}}</b-empty>

<div v-if="groups.length > 0">
    <b-sortable-table 
        :columns="groupsColumns" 
        :data-source="groups" 
        :row-key="'id'" 
        :scroll="{ x: 800 }"
        size="middle"
        :on-sort="sortGroups"
        >
        
        <!-- 拖动把手 -->
        <template slot="handleSlot" slot-scope="{ text, record }">
            <i class="icon handle bars" title="拖动排序"></i>
        </template>

        <template slot="nameSlot" slot-scope="{ text, record }">
            <a :href="'/servers/components/waf/group?firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">
                <span :class="{disabled:!record.isOn}">{{record.name}}</span>
            </a>
            <p class="comment" v-if="record.description.length > 0">{{record.description}}</p>
            <p style="margin-top: 0.5em">
                <span v-if="record.isOn" class="ui label tiny basic green">{{t('waf_groups@启用')}}</span>
                <span v-if="!record.isOn" class="ui label tiny basic red">{{t('waf_groups@停用')}}</span>
                <span v-if="record.isTemplate" class="ui label basic tiny">{{t('waf_groups@预置')}}</span>
                <span v-if="!record.isTemplate" class="ui label basic tiny">{{t('waf_groups@自定义')}}</span>
                <span v-if="record.code.length > 0" class="ui label basic tiny">{{t('waf_groups@代号')}}：{{record.code}}</span>
            </p>
        </template>

        <template slot="countSetsSlot" slot-scope="{ text, record }">
            <a class="ant-btn-link" :href="'/servers/components/waf/group?firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">{{record.countSets}}</a>
        </template>

        <template slot="actionSlot" slot-scope="{ text, record }">
            <a :href="'/servers/components/waf/group?firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">
                <i class="pi pi-info-circle"></i> {{t('waf_groups@详情')}}
            </a> &nbsp;
            <a href="" v-if="!record.isOn" @click.prevent="enableGroup(record.id)">
                <i class="pi pi-check-circle"></i> {{t('waf_groups@启用')}}
            </a>
            <a href="" v-if="record.isOn" @click.prevent="disableGroup(record.id)">
                <i class="pi pi-times-circle"></i> {{t('waf_groups@停用')}}
            </a> &nbsp;
            <a href="" @click.prevent="deleteGroup(record.id)" v-if="record.canDelete">
                <i class="pi pi-trash"></i> {{t('waf_groups@删除')}}
            </a>
        </template>
    </b-sortable-table>
</div>
<p class="comment" v-if="groups.length > 0">{{t('waf_groups@规则排序说明')}}<i class="pi pi-bars"></i>{{t('waf_groups@排序')}}</p>