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

<div class="right-box">
    <second-menu>
        <menu-item @click.prevent="createPeriod">[{{t("finance_packages_periods_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="periods.length == 0">{{t("finance_packages_periods_index@暂时还没有有效期选项设置")}}</b-empty>

    <b-table
        v-if="periods.length > 0"
        :columns="[
            { title: t('finance_packages_periods_index@有效期选项'), key: 'period', scopedSlots: { customRender: 'periodSlot' } },
            { title: t('finance_packages_periods_index@状态'), dataIndex: 'isOn', key: 'status', scopedSlots: { customRender: 'statusSlot' }, width: '10%', align: 'center' },
            { title: t('finance_packages_periods_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '15%', align: 'center' }
        ]"
        :data-source="periods"
        :row-key="'id'"
        :pagination="false"
        size="middle"
    >
        <template slot="periodSlot" slot-scope="{ text, record }">
             <a href="" @click.prevent="updatePeriod(record.id)">{{record.count}}{{record.unitName}} <i class="icon expand small"></i></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="updatePeriod(record.id)">{{t("finance_packages_periods_index@修改")}}</a-button>
             <a-button type="link" @click.prevent="deletePeriod(record.id)">{{t("finance_packages_periods_index@删除")}}</a-button>
        </template>
    </b-table>
</div>