{$layout "layout_popup"}

<!-- <h3>续费套餐</h3> -->
<form class="ui form" data-tea-action="$"  data-tea-success="success">
    <csrf-token></csrf-token>
    <input type="hidden" name="userPlanId" :value="userPlanId"/>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">用户</td>
            <td>
                <user-link :v-user="user"></user-link>
                <p class="comment" v-if="userAccount != null">用户账户余额{{userAccount.total}}元。</p>
            </td>
        </tr>
        <tr>
            <td>套餐 *</td>
            <td>
                {{plan.name}}
                <p class="comment" v-if="plan != null">
                    <span v-if="plan.priceType == 'period'">按时间周期付费，{{plan.monthlyPrice}}元/月，{{plan.seasonallyPrice}}元/季度，{{plan.yearlyPrice}}元/年。</span>
                    <span v-if="plan.priceType == 'traffic'">按流量付费。</span>
                </p>
            </td>
        </tr>

        <tbody v-if="plan != null && plan.priceType == 'period'">
            <tr>
                <td>周期 *</td>
                <td>
                    <b-select
                        name="period"
                        v-model="period"
                        auto-width
                        :options="[
                            {label: '按月', value: 'monthly'},
                            {label: '按季度', value: 'seasonally'},
                            {label: '按年', value: 'yearly'},
                        ]"
                    ></b-select>

                    <!-- <select class="ui dropdown auto-width" name="period" v-model="period">
                        <option value="monthly">按月</option>
                        <option value="seasonally">按季度</option>
                        <option value="yearly">按年</option>
                    </select> -->
                </td>
            </tr>
            <tr v-if="period == 'monthly'">
                <td>月数 *</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" name="countMonths" value="1" style="width: 5em" maxlength="4" v-model="countMonths"/>
                        <span class="ui label">月</span>
                    </div>
                </td>
            </tr>
            <tr v-if="period == 'seasonally'">
                <td>季度数 *</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" name="countSeasons" value="1" style="width: 5em" maxlength="4" v-model="countSeasons"/>
                        <span class="ui label">季度</span>
                    </div>
                </td>
            </tr>
            <tr v-if="period == 'yearly'">
                <td>年数 *</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" name="countYears" value="1" style="width: 5em" maxlength="4" v-model="countYears"/>
                        <span class="ui label">年</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>预计费用</td>
                <td>
                    <span v-if="fee > 0">{{fee}}元</span>
                    <span v-else>-</span>
                </td>
            </tr>
        </tbody>

        <tbody v-if="plan != null && plan.priceType == 'traffic'">
            <tr>
                <td>结束日期</td>
                <td>
                    <datepicker :v-name="'dayTo'" :v-bottom-left="true" :v-value="defaultDayTo"></datepicker>
                </td>
            </tr>
            <tr>
                <td>预计费用</td>
                <td>月结</td>
            </tr>
        </tbody>

        <tbody v-if="plan != null && plan.priceType == 'bandwidth'">
            <tr>
                <td>结束日期</td>
                <td>
                    <datepicker :v-name="'dayTo'" :v-bottom-left="true" :v-value="defaultDayTo"></datepicker>
                </td>
            </tr>
            <tr>
                <td>预计费用</td>
                <td>月结</td>
            </tr>
        </tbody>
    </table>
    <submit-btn></submit-btn>
</form>