{$layout "layout_popup"}

<!-- <h3>{{t('续费套餐')}}</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">{{t('用户')}}</td>
            <td>
                <user-link :v-user="user"></user-link>
                <p class="comment" v-if="userAccount != null">{{t('用户账户余额')}}{{userAccount.total}}{{t('元。')}}</p>
            </td>
        </tr>
        <tr>
            <td>{{t('套餐')}} *</td>
            <td>
                {{plan.name}}
                <p class="comment" v-if="plan != null">
                    <span v-if="plan.priceType == 'period'">{{t('按时间周期付费，')}}{{plan.monthlyPrice}}{{t('元/月，')}}{{plan.seasonallyPrice}}{{t('元/季度，')}}{{plan.yearlyPrice}}{{t('元/年。')}}</span>
                    <span v-if="plan.priceType == 'traffic'">{{t('按流量付费。')}}</span>
                </p>
            </td>
        </tr>

        <tbody v-if="plan != null && plan.priceType == 'period'">
            <tr>
                <td>{{t('周期')}} *</td>
                <td>
                    <b-select
                        name="period"
                        v-model="period"
                        auto-width
                        :options="[
                            {label: t('按月'), value: 'monthly'},
                            {label: t('按季度'), value: 'seasonally'},
                            {label: t('按年'), 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>{{t('月数')}} *</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">{{t('月')}}</span>
                    </div>
                </td>
            </tr>
            <tr v-if="period == 'seasonally'">
                <td>{{t('季度数')}} *</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">{{t('季度')}}</span>
                    </div>
                </td>
            </tr>
            <tr v-if="period == 'yearly'">
                <td>{{t('年数')}} *</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">{{t('年')}}</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>{{t('预计费用')}}</td>
                <td>
                    <span v-if="fee > 0">{{fee}}{{t('元')}}</span>
                    <span v-else>-</span>
                </td>
            </tr>
        </tbody>

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

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