{$layout}

<first-menu>
    <menu-item @click.prevent="createPlan">
        <i class="pi pi-pen-to-square"></i>
        {{t('ns_plans_index@创建套餐')}}
    </menu-item>
    <span class="separator">|</span>
    <menu-item href="/ns/settings/user">{{t('ns_plans_index@无套餐用户设置')}}&nbsp; <i class="icon external small"></i></menu-item>
</first-menu>

<b-empty v-if="plans.length == 0">{{t('ns_plans_index@暂时还没有套餐')}}</b-empty>

<b-sortable-table
    v-if="plans.length > 0"
    :columns="columns"
    :data-source="plans"
    :row-key="'id'"
    size="middle"
    :show-header="true"
    :on-sort="handleSort"
>
    <!-- Handle Slot -->
    <template slot="handleSlot" slot-scope="{ text, record }">
        <i class="icon bars handle grey"></i>
    </template>

    <!-- Name Slot -->
    <template slot="nameSlot" slot-scope="{ text, record }">
        <a href="" @click.prevent="updatePlan(record.id)">{{record.name}}
            <i class="icon expand small"></i></a>
    </template>

    <!-- Price Slot -->
    <template slot="priceSlot" slot-scope="{ text, record }">
        {{record.monthlyPriceFormat}}{{t('ns_plans_index@元月')}}<br/>
        {{record.yearlyPriceFormat}}{{t('ns_plans_index@元年')}}
    </template>

    <!-- Min TTL Slot -->
    <template slot="minTTLSlot" slot-scope="{ text, record }">
        <span v-if="record.config.minTTL > 0">{{record.config.minTTL}}</span>
        <span v-else class="grey">{{t('ns_plans_index@不限')}}</span>
    </template>

    <!-- Max Domains Slot -->
    <template slot="maxDomainsSlot" slot-scope="{ text, record }">
        <span v-if="record.config.maxDomains > 0">{{record.config.maxDomains}}</span>
        <span v-else class="grey">{{t('ns_plans_index@不限')}}</span>
    </template>

    <!-- Max Records Per Domain Slot -->
    <template slot="maxRecordsPerDomainSlot" slot-scope="{ text, record }">
        <span v-if="record.config.maxRecordsPerDomain > 0">{{record.config.maxRecordsPerDomain}}</span>
        <span v-else class="grey">{{t('ns_plans_index@不限')}}</span>
    </template>

    <!-- Max Load Balance Records Per Record Slot -->
    <template slot="maxLoadBalanceRecordsPerRecordSlot" slot-scope="{ text, record }">
         <span v-if="record.config.maxLoadBalanceRecordsPerRecord > 0">{{record.config.maxLoadBalanceRecordsPerRecord}}</span>
        <span v-else class="grey">{{t('ns_plans_index@不限')}}</span>
    </template>

    <!-- Max Custom Routes Slot -->
    <template slot="maxCustomRoutesSlot" slot-scope="{ text, record }">
        <span v-if="record.config.maxCustomRoutes > 0">{{record.config.maxCustomRoutes}}</span>
        <span v-else class="grey">{{t('ns_plans_index@不限')}}</span>
    </template>

    <!-- Built-in Routes Slot -->
    <template slot="builtInRoutesSlot" slot-scope="{ text, record }">
        <span v-if="record.config.supportCountryRoutes">{{t('ns_plans_index@全球')}}<br/></span>
        <span v-if="record.config.supportChinaProvinceRoutes">{{t('ns_plans_index@国内省份')}}<br/></span>
        <span v-if="record.config.supportISPRoutes">{{t('ns_plans_index@ISP')}}<br/></span>
        <span v-if="record.config.supportAgentRoutes">{{t('ns_plans_index@搜索引擎')}}<br/></span>
        <span v-if="record.config.supportPublicRoutes">{{t('ns_plans_index@公用线路')}}</span>
    </template>

    <!-- Health Check Slot -->
    <template slot="healthCheckSlot" slot-scope="{ text, record }">
        <span v-if="record.config.supportHealthCheck" class="green">Y</span>
        <span v-else class="disabled">N</span>
    </template>

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

    <!-- Action Slot -->
    <template slot="actionSlot" slot-scope="{ text, record }">
        <a href="" @click.prevent="updatePlan(record.id)">{{t('ns_plans_index@修改')}}</a> &nbsp;
        <a href="" @click.prevent="deletePlan(record.id)">{{t('ns_plans_index@删除')}}</a>
    </template>

</b-sortable-table>

<p v-if="plans.length > 0" class="comment">{{t('ns_plans_index@可以拖动左侧的')}}<i class="icon bars"></i>{{t('ns_plans_index@排序')}}。</p>