{$layout}
{$template "menu"}

<div class="right-box">
    <second-menu>
        <menu-item @click.prevent="createPackage">[{{t("finance_packages_index@添加流量包")}}]</menu-item>
    </second-menu>

    <div v-if="!enableTrafficPackages">
        <div class="margin"></div>
        <div class="ui message warning">{{t("finance_packages_index@尚未在")}} <a href="/finance/fee">[{{t("finance_packages_index@计费设置")}}]</a> {{t("finance_packages_index@里开启启用流量包选项用户将无法使用设置的流量包")}}</div>
    </div>

    <b-empty v-if="packages.length == 0">{{t("finance_packages_index@暂时还没有流量包")}}</b-empty>

    <div v-if="packages.length > 0">
        <b-table
            :columns="[
                { title: t('finance_packages_index@流量包尺寸'), key: 'size', scopedSlots: { customRender: 'sizeSlot' } },
                { title: t('finance_packages_index@价格'), key: 'prices', scopedSlots: { customRender: 'pricesSlot' }, width: '15%' },
                { title: t('finance_packages_index@状态'), dataIndex: 'isOn', key: 'status', scopedSlots: { customRender: 'statusSlot' }, width: '10%', align: 'center' },
                { title: t('finance_packages_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '15%', align: 'center' }
            ]"
            :data-source="packages"
            :row-key="'id'"
            :pagination="false"
            size="middle"
        >
            <template slot="sizeSlot" slot-scope="{ text, record }">
                 <a href="" @click.prevent="updatePackage(record.id)">{{record.size}}{{record.unit.replace(/(.)B/, "$1iB")}} <i class="icon expand small"></i></a>
            </template>
            <template slot="pricesSlot" slot-scope="{ text, record }">
                 <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("finance_packages_index@设置价格")}}]</span>
                </a>
            </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-button type="link" @click.prevent="updatePackage(record.id)">{{t("finance_packages_index@修改")}}</a-button>
                 <a-button type="link" @click.prevent="deletePackage(record.id)">{{t("finance_packages_index@删除")}}</a-button>
            </template>
        </b-table>
    </div>
</div>