{$layout "layout"}
{$template "menu"}

<form class="ui form" data-tea-action="$"  data-tea-success="success">
    <csrf-token></csrf-token>
    <input type="hidden" name="planId" :value="planId"/>

    <table class="ui table selectable celled structured plans-table">
        <thead>
            <tr>
                <th></th>
                <th class="two wide"><span class="small">用量/功能</span></th>
                <th v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                    <div class="plan-name">{{plan.name}}</div>
                    <div><span class="small grey">{{plan.description}}</span>&nbsp;</div>
                </th>
            </tr>
        </thead>

        <!-- 选择 -->
        <tr>
            <td></td>
            <td></td>
            <td v-for="plan in plans" class="" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}">
                <button class="ui button basic" :class="{primary: selectedPlan != null && plan.id == selectedPlan.id}" type="button" @click.prevent="selectPlan(plan, true)">选择</button>
            </td>
        </tr>

        <!-- 流量限制 -->
        <tr>
            <td rowspan="2" class="value-category-name">流量配额</td>
            <td class="value-name">日流量限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <div v-if="plan.trafficLimit != null && plan.trafficLimit.isOn && plan.trafficLimit.dailySize != null && plan.trafficLimit.dailySize.count > 0">
                    {{composeCapacity(plan.trafficLimit.dailySize)}}
                </div>
                <div v-else>无限制</div>
            </td>
        </tr>
        <tr>
            <td class="value-name">月流量限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}"  @click.prevent="selectPlan(plan)">
                <div v-if="plan.trafficLimit != null && plan.trafficLimit.isOn && plan.trafficLimit.monthlySize != null && plan.trafficLimit.monthlySize.count > 0">
                    {{composeCapacity(plan.trafficLimit.monthlySize)}}
                </div>
                <div v-else>无限制</div>
            </td>
        </tr>

        <!-- 带宽限制 -->
        <tr>
            <td class="value-category-name">带宽限制</td>
            <td class="value-name">单节点带宽限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <div v-if="plan.bandwidthLimitPerNode != null && plan.bandwidthLimitPerNode.count > 0">
                   <bandwidth-size-capacity-view :v-value="plan.bandwidthLimitPerNode"></bandwidth-size-capacity-view>
                </div>
                <div v-else>无限制</div>
            </td>
        </tr>

        <!-- 用量限制 -->
        <tr>
            <td rowspan="8" class="value-category-name">用量配额</td>
            <td class="value-name">总网站数限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <plan-quota-value v-model="plan.totalServers"></plan-quota-value>
            </td>
        </tr>
        <tr>
            <td class="value-name">总域名数限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <plan-quota-value v-model="plan.totalServerNames"></plan-quota-value>
            </td>
        </tr>
        <tr>
            <td class="value-name">每个网站最多域名数</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <plan-quota-value v-model="plan.totalServerNamesPerServer"></plan-quota-value>
            </td>
        </tr>
        <tr>
            <td class="value-name">单日请求数限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <plan-quota-value v-model="plan.dailyRequests"></plan-quota-value>
            </td>
        </tr>
        <tr>
            <td class="value-name">单月请求数限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <plan-quota-value v-model="plan.monthlyRequests"></plan-quota-value>
            </td>
        </tr>
        <tr>
            <td class="value-name">单日Websocket连接数限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <plan-quota-value v-model="plan.dailyWebsocketConnections"></plan-quota-value>
            </td>
        </tr>
        <tr>
            <td class="value-name">单月Websocket连接数限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <plan-quota-value v-model="plan.monthlyWebsocketConnections"></plan-quota-value>
            </td>
        </tr>
        <tr>
            <td class="value-name">文件上传限制</td>
            <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                <span v-if="plan.maxUploadSize != null && plan.maxUploadSize.count > 0">{{composeCapacity(plan.maxUploadSize)}}</span>
                <span v-else>无限制</span>
            </td>
        </tr>

        <!-- 功能限制 -->
        <tr>
            <td :colspan="plans.length+2">
                <more-options-indicator>
                    <span v-if="!moreOptionsVisible">查看网站功能支持</span>
                    <span v-if="moreOptionsVisible">收起网站功能支持</span>
                </more-options-indicator>
            </td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr v-for="(feature, index) in allFeatures">
                <td :rowspan="allFeatures.length" v-if="index == 0" class="value-category-name">网站功能</td>
                <td class="value-name">{{feature.name}}</td>
                <td v-for="plan in plans" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}" @click.prevent="selectPlan(plan)">
                    <span v-if="plan.hasFullFeatures || (plan.featureCodes != null && plan.featureCodes.$contains(feature.code))">
                        <i class="icon check green"></i>
                    </span>
                    <span v-else>/</span>
                </td>
            </tr>
        </tbody>


        <!-- 选择 -->
        <tr>
            <td></td>
            <td></td>
            <td v-for="plan in plans" class="bottom" :class="{selected: selectedPlan != null && plan.id == selectedPlan.id}">
                <button class="ui button basic" :class="{primary: selectedPlan != null && plan.id == selectedPlan.id}" type="button" @click.prevent="selectPlan(plan)">选择</button>
            </td>
        </tr>
    </table>

    <table class="ui table definition selectable">
        <tr v-if="selectedPlan != null">
            <td>已选择套餐</td>
            <td><strong>{{selectedPlan.name}}</strong></td>
        </tr>
        <tr>
            <td class="title">账户余额</td>
            <td>
                <span v-if="userAccount != null">{{userAccount.total}}元</span>
                <span v-else>0元</span>
                &nbsp; <a href="/finance/charge"><span class="small">[充值]</span></a>
            </td>
        </tr>
        <tr v-if="selectedPlan != null">
            <td>计费方式</td>
            <td>
                <span v-if="selectedPlan.priceType == 'period'">按时间周期付费，{{selectedPlan.monthlyPrice}}元/月，{{selectedPlan.seasonallyPrice}}元/季度，{{selectedPlan.yearlyPrice}}元/年。</span>
                <span v-if="selectedPlan.priceType == 'traffic'">按流量付费。</span>
                <span v-if="selectedPlan.priceType == 'bandwidth'">按带宽付费。</span>
            </td>
        </tr>


        <!-- 按时间周期计费 -->
        <tbody v-if="selectedPlan != null && selectedPlan.priceType == 'period'">
            <tr>
                <td>周期 *</td>
                <td>
                    <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="selectedPlan != null && selectedPlan.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="selectedPlan != null && selectedPlan.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>

        <tr>
            <td>备注名称</td>
            <td>
                <input type="text" name="name" maxlength="50"/>
                <p class="comment">用于识别不同的套餐，默认为套餐名称。</p>
            </td>
        </tr>
    </table>
    <submit-btn>确定购买</submit-btn>
</form>