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

<second-menu>
    <menu-item v-if="selectedPackage != null && selectedPackage.id > 0"><span class="ui label" style="font-weight: normal">{{selectedPackage.summary}}</span> &nbsp; <a href="/clusters/anti-ddos/instances" :title="t('anti-ddos_instances_index@清除条件')"><i class="pi pi-times"></i></a></menu-item>
    <span class="item disabled" v-if="selectedPackage != null && selectedPackage.id > 0" style="padding-left: 0">|</span>
    <menu-item @click.prevent="createInstance()">
        <i class="pi pi-pen-to-square"></i>
        {{t('anti-ddos_instances_index@添加高防实例')}}
    </menu-item>
</second-menu>

<div v-show="selectedPackageId == 0">
    <form class="ui form" action="/clusters/anti-ddos/instances" method="get">
        <div class="ui fields inline">
            <div class="ui field">
                <b-select
                    name="networkId"
                    v-model="networkId"
                    :options="[
                        {label: `[${t('anti-ddos_instances_index@线路')}]`, value: '0'},
                        ...networks.map(network => ({
                            label: network.name??'',
                            value: network.id??'',
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown" name="networkId" v-model="networkId">
                    <option value="0">[线路]</option>
                    <option v-for="network in networks" :value="network.id">{{network.name}}</option>
                </select> -->
            </div>
            <div class="ui field">
                <input type="text" name="ip" :placeholder="t('anti-ddos_instances_index@高防IP')" v-model="ip" maxlength="64"/>
            </div>
            <div class="ui field">
                <button type="submit" class="ui button">{{t('anti-ddos_instances_index@搜索')}}</button>
                &nbsp;
                <a href="/clusters/anti-ddos/instances" v-if="networkId > 0 || ip.length > 0">{{t('anti-ddos_instances_index@清除缓存')}}</a>
            </div>
        </div>
    </form>
    <div class="margin"></div>
</div>

<div v-if="instances.length == 0">
    <b-empty>{{t('anti-ddos_instances_index@暂时还没有高防实例')}}。</b-empty>
</div>

<div v-if="instances.length > 0">
    <b-table
        :columns="[
            {
                title: t('anti-ddos_instances_index@所属线路'),
                dataIndex: 'network.name',
                key: 'network',
                scopedSlots: { customRender: 'networkSlot' }
            },
            {
                title: t('anti-ddos_instances_index@防护带宽'),
                dataIndex: 'package.protectionBandwidthSize',
                key: 'protection',
                scopedSlots: { customRender: 'protectionSlot' }
            },
            {
                title: t('anti-ddos_instances_index@业务带宽'),
                dataIndex: 'package.serverBandwidthSize',
                key: 'server',
                scopedSlots: { customRender: 'serverSlot' }
            },
            {
                title: t('anti-ddos_instances_index@部署集群'),
                dataIndex: 'cluster.name',
                key: 'cluster',
                scopedSlots: { customRender: 'clusterSlot' }
            },
            {
                title: t('anti-ddos_instances_index@高防IP'),
                dataIndex: 'ipAddresses',
                key: 'ip',
                width: '200px',
                scopedSlots: { customRender: 'ipSlot' }
            },
            {
                title: t('anti-ddos_instances_index@租用用户'),
                dataIndex: 'user',
                key: 'user',
                width: '200px',
                scopedSlots: { customRender: 'userSlot' }
            },
            {
                title: t('anti-ddos_instances_index@状态'),
                dataIndex: 'isOn',
                key: 'status',
                width: '100px',
                scopedSlots: { customRender: 'statusSlot' }
            },
            {
                title: t('anti-ddos_instances_index@操作'),
                key: 'action',
                width: '150px',
                scopedSlots: { customRender: 'actionSlot' }
            }
        ]"
        :data-source="instances"
        :row-key="'id'"
        :bordered="false"
        :pagination="false"
    >
        <template slot="networkSlot" slot-scope="{ text, record }">
            <span v-if="record.network != null && record.network.id > 0">{{record.network.name}}</span>
            <span v-else class="red">{{t('anti-ddos_instances_index@已删除')}}</span>
        </template>

        <template slot="protectionSlot" slot-scope="{ text, record }">
            <div v-if="record.package != null && record.package.id > 0">
                {{record.package.protectionBandwidthSize}}
                {{record.package.protectionBandwidthUnit.toBitUpper()}}
            </div>
        </template>

        <template slot="serverSlot" slot-scope="{ text, record }">
            <div v-if="record.package != null && record.package.id > 0">
                {{record.package.serverBandwidthSize}}
                {{record.package.serverBandwidthUnit.toBitUpper()}}
            </div>
            <span v-else class="red">{{t('anti-ddos_instances_index@已删除')}}</span>
        </template>

        <template slot="clusterSlot" slot-scope="{ text, record }">
            <span v-if="record.cluster != null && record.cluster.id > 0">{{record.cluster.name}}</span>
            <span v-else class="red">{{t('anti-ddos_instances_index@已删除')}}</span>
        </template>

        <template slot="ipSlot" slot-scope="{ text, record }">
            <div v-for="ipAddr in record.ipAddresses"><keyword :v-word="ip">{{ipAddr}}</keyword></div>
        </template>

        <template slot="userSlot" slot-scope="{ text, record }">
            <div v-if="record.user != null && record.user.id > 0">
                <user-link :v-user="record.user"></user-link>
                <div>
                    <span class="small grey">{{t('anti-ddos_instances_index@到')}}{{record.userDayTo}}</span>
                </div>
            </div>
            <span v-else class="disabled">{{t('anti-ddos_instances_index@暂无')}}</span>
        </template>

        <template slot="statusSlot" slot-scope="{ text, record }">
            <label-on :v-is-on="record.isOn"></label-on>
        </template>

        <template slot="actionSlot" slot-scope="{ text, record }">
            <a href="" @click.prevent="updateInstance(record.id)">{{t('anti-ddos_instances_index@修改')}}</a> &nbsp;
            <a href="" @click.prevent="deleteInstance(record.id)">{{t('anti-ddos_instances_index@删除')}}</a>
        </template>
    </b-table>

    <page-box></page-box>
</div>