{$layout}
{$template "menu"}

<div v-show="networks.length == 0">
    <b-empty large>{{t('anti-ddos@还没有线路请先')}}<a href="/clusters/anti-ddos/networks">{{t('anti-ddos@创建线路')}}</a>。</b-empty>
</div>

<div v-show="networks.length > 0">
    <first-menu>
        <menu-item @click.prevent="createPackage()">{{t('anti-ddos@添加高防产品')}}</menu-item>
    </first-menu>

    <div v-show="networks.length > 1">
        <div class="margin"></div>
        <form class="ui form" method="get" action="/clusters/anti-ddos">
            <div class="ui fields inline">
                <div class="ui field">
                    <b-select
                        name="networkId"
                        v-model="networkId"
                        :options="[
                            {label: `[${t('anti-ddos@所有线路')}]`, 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">
                    <button class="ui button" type="submit">{{t('anti-ddos@搜索')}}</button>
                    &nbsp;
                    <a href="/clusters/anti-ddos" v-if="networkId > 0">{{t('anti-ddos@清除条件')}}</a>
                </div>
            </div>
        </form>
    </div>

    <div v-if="packages.length == 0">
        <b-empty>{{t('anti-ddos@暂时还没有高防产品')}}。</b-empty>
    </div>

    <div v-if="packages.length > 0">
        <div class="margin"></div>
        <b-table
            :columns="[
                {
                    title: t('anti-ddos@所属线路'),
                    dataIndex: 'network.name',
                    key: 'network',
                    scopedSlots: { customRender: 'networkSlot' }
                },
                {
                    title: t('anti-ddos@防护带宽'),
                    dataIndex: 'protectionBandwidthSize',
                    key: 'protection',
                    scopedSlots: { customRender: 'protectionSlot' }
                },
                {
                    title: t('anti-ddos@业务带宽'),
                    dataIndex: 'serverBandwidthSize',
                    key: 'server',
                    scopedSlots: { customRender: 'serverSlot' }
                },
                {
                    title: t('anti-ddos@实例'),
                    dataIndex: 'countInstances',
                    key: 'instances',
                    scopedSlots: { customRender: 'instancesSlot' }
                },
                {
                    title: t('anti-ddos@价格项'),
                    dataIndex: 'countPrices',
                    key: 'prices',
                    width: '100px',
                    scopedSlots: { customRender: 'pricesSlot' }
                },
                {
                    title: t('anti-ddos@状态'),
                    dataIndex: 'isOn',
                    key: 'status',
                    width: '100px',
                    scopedSlots: { customRender: 'statusSlot' }
                },
                {
                    title: t('anti-ddos@操作'),
                    key: 'action',
                    width: '200px',
                    scopedSlots: { customRender: 'actionSlot' }
                }
            ]"
            :data-source="packages"
            :row-key="'id'"
            :bordered="false"
            :pagination="false"
        >
            <template slot="networkSlot" slot-scope="{ text, record }">
                <span :class="{disabled: !record.network.isOn || !record.isOn}">{{record.network.name}}
                    <div v-if="!record.network.isOn">
                        <span class="red small">{{t('anti-ddos@已停用')}}</span>
                    </div>
                </span>
            </template>

            <template slot="protectionSlot" slot-scope="{ text, record }">
                <span :class="{disabled: !record.network.isOn || !record.isOn}">{{record.protectionBandwidthSize}}{{record.protectionBandwidthUnit.toBitUpper()}}</span>
            </template>

            <template slot="serverSlot" slot-scope="{ text, record }">
                <span :class="{disabled: !record.network.isOn || !record.isOn}">{{record.serverBandwidthSize}}{{record.serverBandwidthUnit.toBitUpper()}}</span>
            </template>

            <template slot="instancesSlot" slot-scope="{ text, record }">
                <a :href="'/clusters/anti-ddos/instances?selectedPackageId=' + record.id">{{record.countInstances}}</a>
            </template>

            <template slot="pricesSlot" slot-scope="{ text, record }">
                <span :class="{disabled: !record.network.isOn || !record.isOn}">
                    <a href="" @click.prevent="updatePrices(record.id)">
                        <span class="" v-if="record.countPrices > 0">{{record.countPrices}}<span class="grey">/{{totalPriceItems}}</span></span>
                        <span class="" v-else>[{{t('anti-ddos@设置价格')}}]</span>
                    </a>
                </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="updatePackage(record.id)">{{t('anti-ddos@修改')}}</a> &nbsp;
                <a href="" @click.prevent="deletePackage(record.id)">{{t('anti-ddos@删除')}}</a>
            </template>
        </b-table>

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