{$layout}
{$template "menu"}

<b-message code="iplist-public-tip" closeable>
    {{t('iplists@这里是公用的IP名单，可以在WAF策略里直接引用')}}。
</b-message>
<!-- <tip-message-box code="iplist-public-tip">这里是公用的IP名单，可以在WAF策略里直接引用。</tip-message-box> -->

<div class="margin"></div>
<form class="ui form" action="/servers/iplists/lists">
    <input type="hidden" name="type" :value="type"/>
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" :placeholder="t('iplists@IP名单名称、代号') + '...'" name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">{{t('iplists@搜索')}}</button>
            &nbsp;
            <a :href="'/servers/iplists/lists?type=' + type" v-if="keyword.length > 0">[{{t('iplists@清除条件')}}]</a>
        </div>
    </div>
</form>
<div class="margin"></div>

<b-empty v-if="lists.length == 0">{{t('iplists@暂时还没有公用IP名单')}}</b-empty>

<b-table
    v-if="lists.length > 0"
    :columns="[
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: '80px',
            align: 'center'
        },
        {
            title: t('iplists@IP名单名称'),
            dataIndex: 'name',
            key: 'name',
            width: '20%',
            scopedSlots: { customRender: 'name' }
        },
        {
            title: t('iplists@代号'),
            dataIndex: 'code',
            key: 'code',
            width: '20%',
            scopedSlots: { customRender: 'code' }
        },
        {
            title: t('iplists@类型'),
            dataIndex: 'type',
            key: 'type',
            width: '120px',
            align: 'center',
            scopedSlots: { customRender: 'type' }
        },
        {
            title: t('iplists@备注'),
            dataIndex: 'description',
            key: 'description',
            scopedSlots: { customRender: 'description' }
        },
        {
            title: t('iplists@IP数量'),
            dataIndex: 'countItems',
            key: 'countItems',
            width: '120px',
            align: 'center',
            scopedSlots: { customRender: 'countItems' }
        },
        {
            title: t('iplists@操作'),
            key: 'action',
            width: '120px',
            scopedSlots: { customRender: 'action' }
        }
    ]"
    :data-source="lists"
    row-key="id"
    :bordered="false"
    :pagination="false"
>
    <!-- 名称列 -->
    <template slot="name" slot-scope="{ text, record }">
        <a :href="'/servers/iplists/list?listId=' + record.id"><keyword :v-word="keyword">{{record.name}}</keyword></a>
        <div v-if="record.isGlobal" style="margin-top: 0.3em"><grey-label>{{t('iplists@全局')}}</grey-label></div>
    </template>

    <!-- 代号列 -->
    <template slot="code" slot-scope="{ text, record }">
        <span v-if="record.code != null && record.code.length > 0"><keyword :v-word="keyword">{{record.code}}</keyword></span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 类型列 -->
    <template slot="type" slot-scope="{ text, record }">
        <span v-if="record.type == 'black'"><span class="ui label tiny black">{{t('iplists@黑名单')}}</span></span>
        <span v-if="record.type == 'white'"><span class="ui label tiny white">{{t('iplists@白名单')}}</span></span>
        <span v-if="record.type == 'grey'"><span class="ui label tiny gray">{{t('iplists@灰名单')}}</span></span>
    </template>

    <!-- 备注列 -->
    <template slot="description" slot-scope="{ text, record }">
        <span v-if="record.description.length > 0">{{record.description}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- IP数量列 -->
    <template slot="countItems" slot-scope="{ text, record }">
        <a :href="'/servers/iplists/items?listId=' + record.id" v-if="record.countItems > 0">{{record.countItems}}</a>
        <span v-else class="disabled">0</span>
    </template>

    <!-- 操作列 -->
    <template slot="action" slot-scope="{ text, record }">
        <a :href="'/servers/iplists/list?listId=' + record.id">{{t('iplists@详情')}}</a> &nbsp;
        <a href="" @click.prevent="deleteList(record.id)">{{t('iplists@删除')}}</a>
    </template>
</b-table>

<div class="page" v-html="filterPageContent(page)"></div>