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

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

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

    <div v-if="userPackages.length > 0">
        <b-table
            :columns="[
                { title: t('finance_packages_user_packages_index@用户'), key: 'user', scopedSlots: { customRender: 'userSlot' } },
                { title: t('finance_packages_user_packages_index@流量包'), key: 'package', scopedSlots: { customRender: 'packageSlot' } },
                { title: t('finance_packages_user_packages_index@区域'), key: 'region', scopedSlots: { customRender: 'regionSlot' }, width: '8%' },
                { title: t('finance_packages_user_packages_index@有效期'), key: 'period', scopedSlots: { customRender: 'periodSlot' }, width: '8%' },
                { title: t('finance_packages_user_packages_index@开始日期'), dataIndex: 'dayFrom', key: 'dayFrom', scopedSlots: { customRender: 'dayFromSlot' }, width: '10%' },
                { title: t('finance_packages_user_packages_index@结束日期'), dataIndex: 'dayTo', key: 'dayTo', scopedSlots: { customRender: 'dayToSlot' }, width: '10%' },
                { title: t('finance_packages_user_packages_index@已用流量'), dataIndex: 'usedSize', key: 'used', scopedSlots: { customRender: 'usedSlot' }, width: '10%' },
                { title: t('finance_packages_user_packages_index@剩余流量'), dataIndex: 'availableSize', key: 'available', scopedSlots: { customRender: 'availableSlot' }, width: '10%' },
                { title: t('finance_packages_user_packages_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '8%' }
            ]"
            :data-source="userPackages"
            :row-key="'id'"
            :pagination="false"
            size="middle"
        >
            <template slot="userSlot" slot-scope="{ text, record }">
                <user-link :v-user="record.user"></user-link>
            </template>
            <template slot="packageSlot" slot-scope="{ text, record }">
                 <span v-if="record.package != null">{{record.package.size}}{{record.package.unit.toUpperCase().replace(/(.)B/, "$1iB")}}</span>
                 <span v-else class="disabled">[{{t("finance_packages_user_packages_index@已删除")}}]</span>
                <div v-if="record.isUsedAll || record.isExpired">
                    <span v-if="record.isUsedAll" class="small red">{{t("finance_packages_user_packages_index@已用尽")}}</span>
                    <span v-else-if="record.isExpired" class="small red">{{t("finance_packages_user_packages_index@已过期")}}</span>
                </div>
            </template>
            <template slot="regionSlot" slot-scope="{ text, record }">
                <span v-if="record.region != null">{{record.region.name}}</span>
                <span v-else="" class="disabled">[{{t("finance_packages_user_packages_index@已删除")}}]</span>
            </template>
            <template slot="periodSlot" slot-scope="{ text, record }">
                 {{record.periodCount}}{{record.periodUnitName}}
            </template>
            <template slot="dayFromSlot" slot-scope="{ text, record }">
                 {{record.dayFrom}}
            </template>
            <template slot="dayToSlot" slot-scope="{ text, record }">
                {{record.dayTo}}
            </template>
            <template slot="usedSlot" slot-scope="{ text, record }">
                 <span :class="{disabled: record.usedSize == '0B'}">{{record.usedSize}}</span>
            </template>
            <template slot="availableSlot" slot-scope="{ text, record }">
                 <span :class="{disabled: record.availableSize == '0B'}">{{record.availableSize}}</span>
            </template>
            <template slot="actionSlot" slot-scope="{ text, record }">
                <a-button type="link" v-if="record.canDelete" @click.prevent="deleteUserPackage(record.id)">{{t("finance_packages_user_packages_index@删除")}}</a-button>
            </template>
        </b-table>

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