{$layout}
{$template "menu"}

<div class="margin"></div>
<form class="ui form" action="/servers/iplists" method="get">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" placeholder="x.x.x.x" v-model="keyword"/>
        </div>
        <div class="ui field">
            <b-select
                name="listType"
                v-model="listType"
                auto-width
                :options="[
                    {label: t('iplists@所有类型'), value: ''},
                    {label: t('iplists@黑名单'), value: 'black'},
                    {label: t('iplists@白名单'), value: 'white'},
                    {label: t('iplists@灰名单'), value: 'grey'},
                ]"
            ></b-select>

            <!-- <select class="ui dropdown auto-width" name="listType" v-model="listType">
                <option value="">[所有类型]</option>
                <option value="black">黑名单</option>
                <option value="white">白名单</option>
                <option value="grey">灰名单</option>
            </select> -->
        </div>
        <div class="ui field">
            <b-select
                name="eventLevel"
                v-model="eventLevel"
                :options="[
                    {label: t('iplists@所有级别'), value: ''},
                    ...eventLevels.map(level => ({
                        label: level.name,
                        value: level.code,
                    }))
                ]"
            ></b-select>

           <!-- <select class="ui dropdown" name="eventLevel" v-model="eventLevel">
               <option value="">[所有级别]</option>
               <option v-for="level in eventLevels" :value="level.code">{{level.name}}</option>
           </select> -->
        </div>
        <div class="ui field">
            <checkbox name="globalOnly" :v-value="1" v-model="globalOnly">{{t('iplists@系统自动拦截')}}</checkbox>
        </div>
        <div class="ui field" v-if="countUnread > 0">
            <checkbox name="unread" :v-value="1" v-model="unread">
                <span class="red">New</span>
            </checkbox>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('iplists@搜索')}}</button>
            &nbsp;
            <a href="/servers/iplists" v-if="keyword.length > 0 || globalOnly || unread || eventLevel.length > 0 || listType.length > 0">{{t('iplists@清除条件')}}</a>
        </div>
        <div class="ui field" v-if="countUnread > 0">
            <span class="disabled">|</span>
        </div>
        <div class="ui field" v-if="countUnread > 0">
            <a href="" @click.prevent="readAllItems" :title="t('iplists@消除未读标记New')">{{t('iplists@全部设为已读')}}</a>
        </div>
    </div>
</form>

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

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

<div v-if="items.length > 0">
    <b-table
        :columns="[
            {
                title: 'IP',
                dataIndex: 'ip',
                key: 'ip',
                width: '18em',
                scopedSlots: { customRender: 'ip' }
            },
            {
                title: t('iplists@类型'),
                dataIndex: 'type',
                key: 'type',
                width: '6em',
                scopedSlots: { customRender: 'type' }
            },
            {
                title: t('iplists@级别'),
                dataIndex: 'eventLevelName',
                key: 'eventLevelName',
                width: '6em',
                scopedSlots: { customRender: 'eventLevelName' }
            },
            {
                title: t('iplists@过期时间'),
                dataIndex: 'expiredTime',
                key: 'expiredTime',
                width: '12em',
                scopedSlots: { customRender: 'expiredTime' }
            },
            {
                title: t('iplists@备注'),
                dataIndex: 'reason',
                key: 'reason',
                scopedSlots: { customRender: 'reason' }
            },
            {
                title: t('iplists@操作'),
                key: 'action',
                width: '12em',
                scopedSlots: { customRender: 'action' }
            }
        ]"
        :data-source="items"
        row-key="id"
        :bordered="false"
        :pagination="false"
        :row-selection="{
            type: 'checkbox',
            onChange: (selectedRowKeys, selectedRows) => {
                checkedItemIds = selectedRowKeys;
                hasSelectedItems = selectedRowKeys.length > 0;
            }
        }"
    >
        <!-- IP列 -->
        <template slot="ip" slot-scope="{ text, record }">
            <span v-if="record.type != 'all'" :class="{green: record.list != null && record.list.type == 'white', grey: record.list != null && record.list.type == 'grey'}">
                <span v-if="record.value != null && record.value.length > 0"><keyword :v-word="keyword">{{record.value}}</keyword></span>
                <span v-else>
                    <keyword :v-word="keyword">{{record.ipFrom}}</keyword> <span> <span class="small red" v-if="record.isRead != null && !record.isRead">&nbsp;New&nbsp;</span>&nbsp;<a :href="'/servers/iplists?ip=' + record.ipFrom" :title="t('iplists@搜索此IP')"><span><i class="icon search small" style="color: #ccc"></i></span></a></span>
                    <span v-if="record.ipTo.length > 0"> - <keyword :v-word="keyword">{{record.ipTo}}</keyword></span>
                </span>
            </span>
            <span v-else class="disabled">*</span>
            
            <div v-if="record.region != null && record.region.length > 0">
                <span class="grey small">{{record.region}}</span>
                <span v-if="record.isp != null && record.isp.length > 0 && record.isp != '内网IP'" class="grey small"><span class="disabled">|</span> {{record.isp}}</span>
            </div>
            <div v-else-if="record.isp != null && record.isp.length > 0 && record.isp != '内网IP'"><span class="grey small">{{record.isp}}</span></div>
        
            <div v-if="record.createdTime != null">
                <span class="small grey">{{t('iplists@添加于')}} {{record.createdTime}}
                    <span v-if="record.list != null && record.list.id > 0">
                        @ 
                        <a :href="'/servers/iplists/list?listId=' + record.list.id" v-if="record.policy.id == 0"><span>[<span v-if="record.list.type == 'black'">{{t('iplists@黑')}}</span><span v-if="record.list.type == 'white'">{{t('iplists@白')}}</span><span v-if="record.list.type == 'grey'">{{t('iplists@灰')}}</span>{{t('iplists@名单')}}:{{record.list.name}}]</span></a>
                        <span v-else>[<span v-if="record.list.type == 'black'">{{t('iplists@黑')}}</span><span v-if="record.list.type == 'white'">{{t('iplists@白')}}</span><span v-if="record.list.type == 'grey'">{{t('iplists@灰')}}</span>{{t('iplists@名单')}}:{{record.list.name}}]</span>
                        <span v-if="record.policy.id > 0">
                            <span v-if="record.policy.server != null">
                                <a :href="'/servers/server/settings/waf/ipadmin/allowList?serverId=' + record.policy.server.id + '&firewallPolicyId=' + record.policy.id" v-if="record.list.type == 'white'">[{{t('iplists@网站')}}：{{record.policy.server.name}}]</a>
                                <a :href="'/servers/server/settings/waf/ipadmin/denyList?serverId=' + record.policy.server.id + '&firewallPolicyId=' + record.policy.id" v-if="record.list.type == 'black'">[{{t('iplists@网站')}}：{{record.policy.server.name}}]</a>
                                <a :href="'/servers/server/settings/waf/ipadmin/greyList?serverId=' + record.policy.server.id + '&firewallPolicyId=' + record.policy.id" v-if="record.list.type == 'grey'">[{{t('iplists@网站')}}：{{record.policy.server.name}}]</a>
                            </span>
                            <span v-else>
                                <a :href="'/servers/components/waf/ipadmin/lists?firewallPolicyId=' + record.policy.id +  '&type=' + record.list.type">[{{t('iplists@策略')}}：{{record.policy.name}}]</a>
                            </span>
                        </span>
                    </span>
                </span>
            </div>
        </template>

        <!-- 类型列 -->
        <template slot="type" slot-scope="{ text, record }">
            <span v-if="record.type.length == 0">IPv4</span>
            <span v-else-if="record.type == 'ipv4'">IPv4</span>
            <span v-else-if="record.type == 'ipv6'">IPv6</span>
            <span v-else-if="record.type == 'all'"><strong>{{t('iplists@所有IP')}}</strong></span>
        </template>

        <!-- 级别列 -->
        <template slot="eventLevelName" slot-scope="{ text, record }">
            <span v-if="record.eventLevelName != null && record.eventLevelName.length > 0">{{record.eventLevelName}}</span>
            <span v-else class="disabled">-</span>
        </template>

        <!-- 过期时间列 -->
        <template slot="expiredTime" slot-scope="{ text, record }">
            <div v-if="record.expiredTime.length > 0">
                {{record.expiredTime}}
                <div v-if="record.isExpired && record.lifeSeconds == null" style="margin-top: 0.5em">
                    <span class="ui label tiny basic red">{{t('iplists@已过期')}}</span>
                </div>
                <div v-if="record.lifeSeconds != null">
                    <span class="small grey" v-if="record.lifeSeconds > 0">{{formatSeconds(record.lifeSeconds)}}</span>
                    <span class="small red" v-if="record.lifeSeconds < 0">{{t('iplists@已过期')}}</span>
                </div>
            </div>
            <span v-else class="disabled">{{t('iplists@不过期')}}</span>
        </template>

        <!-- 备注列 -->
        <template slot="reason" slot-scope="{ text, record }">
            <span v-if="record.reason.length > 0">{{record.reason}}</span>
            <span v-else class="disabled">-</span>
            
            <div v-if="record.sourceNode != null && record.sourceNode.id > 0" style="margin-top: 0.4em">
                <a :href="'/clusters/cluster/node?clusterId=' + record.sourceNode.clusterId + '&nodeId=' + record.sourceNode.id"><span class="small"><i class="icon cloud"></i>{{record.sourceNode.name}}</span></a>
            </div>
            <div style="margin-top: 0.4em" v-if="record.sourceServer != null && record.sourceServer.id > 0">
                <a :href="'/servers/server?serverId=' + record.sourceServer.id" style="border: 0"><span class="small "><i class="icon clone outline"></i>{{record.sourceServer.name}}</span></a>
            </div>
            <div v-if="record.sourcePolicy != null && record.sourcePolicy.id > 0" style="margin-top: 0.4em">
                <a :href="'/servers/components/waf/group?firewallPolicyId=' +  record.sourcePolicy.id + '&type=inbound&groupId=' + record.sourceGroup.id + '#set' + record.sourceSet.id" v-if="record.sourcePolicy.serverId == 0"><span class="small "><i class="icon shield"></i>{{record.sourcePolicy.name}} &raquo; {{record.sourceGroup.name}} &raquo; {{record.sourceSet.name}}</span></a>
                <a :href="'/servers/server/settings/waf/group?serverId=' + record.sourcePolicy.serverId + '&firewallPolicyId=' + record.sourcePolicy.id + '&type=inbound&groupId=' + record.sourceGroup.id + '#set' + record.sourceSet.id" v-if="record.sourcePolicy.serverId > 0"><span class="small "><i class="icon shield"></i> {{record.sourcePolicy.name}} &raquo; {{record.sourceGroup.name}} &raquo; {{record.sourceSet.name}}</span></a>
            </div>
        </template>

        <!-- 操作列 -->
        <template slot="action" slot-scope="{ text, record }">
            <a href="" @click.prevent="viewLogs(record.id)">{{t('iplists@日志')}}</a> &nbsp;
            <a href="" @click.prevent="updateItem(record.id)">{{t('iplists@修改')}}</a> &nbsp;
            <a href="" @click.prevent="deleteItem(record.id)">{{t('iplists@删除')}}</a>
        </template>
    </b-table>

    <div class="ui divider" v-if="hasSelectedItems"></div>
    <div v-if="hasSelectedItems">
        <button class="ui button basic" type="button" @click.prevent="deleteSelectedItems">{{t('iplists@批量删除所选')}}</button>
        &nbsp; &nbsp; 
        <button class="ui button basic" type="button" @click.prevent="cancelSelectedItems">{{t('iplists@取消选中')}}</button>
    </div>
</div>

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