{$layout}

<first-menu>
    <menu-item href=".?type=available" :active="type == 'available'">{{t('ns_userPlans_index@有效套餐')}}({{countAvailable}})</menu-item>
    <menu-item href=".?type=expiring7" :active="type == 'expiring7'">{{t('ns_userPlans_index@7天内过期')}}(<span v-if="countExpiring7 > 0" class="red">{{countExpiring7}}</span><span v-else>0</span>)</menu-item>
    <menu-item href=".?type=expiring30" :active="type == 'expiring30'">{{t('ns_userPlans_index@30天内过期')}}(<span v-if="countExpiring30 > 0" class="red">{{countExpiring30}}</span><span v-else>0</span>)</menu-item>
    <menu-item href=".?type=expired" :active="type == 'expired'">{{t('ns_userPlans_index@过期套餐')}}({{countExpired}})</menu-item>
    <span class="item disabled">|</span>
    <menu-item @click.prevent="createUserPlan">{{t('ns_userPlans_index@新购套餐Link')}}</menu-item>
</first-menu>

<div class="margin"></div>
<form class="ui form" method="get" action="/ns/userPlans">
    <input type="hidden" name="type" :value="type"/>
    <div class="ui fields inline">
        <div class="ui field">
            <b-select
                name="planId"
                v-model="planId"
                auto-width
                :options="[
                    {label: t('ns_userPlans_index@套餐Filter'), value: '0'},
                    ...plans.map(plan => ({
                        label: plan.name,
                        value: plan.id,
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown auto-width" name="planId" v-model="planId">
                <option value="0">[套餐]</option>
                <option v-for="plan in plans" :value="plan.id">{{plan.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <b-select
                name="periodUnit"
                v-model="periodUnit"
                auto-width
                :options="[
                {label: t('ns_userPlans_index@付费周期Filter'), value: ''},
                {label: t('ns_userPlans_index@按月'), value: 'monthly'},
                {label: t('ns_userPlans_index@按年'), value: 'yearly'},
                ]"
            ></b-select>

            <!-- <select class="ui dropdown auto-width" name="periodUnit" v-model="periodUnit">
                <option value="">[付费周期]</option>
                <option value="monthly">按月</option>
                <option value="yearly">按年</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('ns_userPlans_index@检索Button')}}</button>
            &nbsp;
            <a href="/ns/userPlans" v-if="planId > 0 || periodUnit.length > 0">{{t('ns_userPlans_index@清除条件Link')}}</a>
        </div>
    </div>
</form>

<b-empty v-if="userPlans.length == 0" large>{{t('ns_userPlans_index@暂时还没有用户套餐')}}</b-empty>

<table class="ui table selectable celled" v-if="userPlans.length > 0">
    <thead>
        <tr>
            <th>{{t('ns_userPlans_index@用户Col')}}</th>
            <th class="four wide">{{t('ns_userPlans_index@套餐Col')}}</th>
            <th class="two wide">{{t('ns_userPlans_index@有效期Col')}}</th>
            <th class="width6">{{t('ns_userPlans_index@付费周期Col')}}</th>
            <th class="two op">{{t('ns_userPlans_index@操作Col')}}</th>
        </tr>
    </thead>
    <tr v-for="userPlan in userPlans">
        <td>
            <span v-if="userPlan.user != null">
                <user-link :v-user="userPlan.user"></user-link>
            </span>
            <span v-else class="disabled">{{t('ns_userPlans_index@已删除')}}</span>
        </td>
        <td>
            <span v-if="userPlan.plan != null">{{userPlan.plan.name}}</span>
            <span v-else class="disabled">{{t('ns_userPlans_index@已删除')}}</span>
        </td>
        <td>{{userPlan.dayTo}}</td>
        <td>
            <span v-if="userPlan.periodUnit == 'monthly'">{{t('ns_userPlans_index@按月Period')}}</span>
            <span v-if="userPlan.periodUnit == 'yearly'">{{t('ns_userPlans_index@按年Period')}}</span>
        </td>
        <td>
            <a href="" @click.prevent="updateUserPlan(userPlan.id)">{{t('ns_userPlans_index@修改Link')}}</a> &nbsp;
            <a href="" @click.prevent="deleteUserPlan(userPlan.id)">{{t('ns_userPlans_index@删除Link')}}</a>
        </td>
    </tr>
</table>


<page-box></page-box>