{$layout}
{$template "menu"}


<table class="ui table selectable definition">
    <tr>
        <td class="title">{{t('套餐名称')}}</td>
        <td>
           {{plan.name}}
        </td>
    </tr>
    <tr>
        <td>{{t('状态')}}</td>
        <td><label-on :v-is-on="plan.isOn"></label-on></td>
    </tr>
    <tr>
        <td>{{t('套餐简介')}}</td>
        <td>
            <span v-if="plan.description.length > 0">{{plan.description}}</span>
            <span v-else class="disabled">{{t('还没有简介。')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('关联集群')}}</td>
        <td>
               <span v-if="plan.cluster.id > 0">
                <link-icon :href="'/clusters/cluster?clusterId=' + plan.cluster.id">{{plan.cluster.name}}</link-icon>
            </span>
            <span v-else class="red">{{t('已删除')}}</span>
            <p class="comment">{{t('使用当前套餐的网站都将会部署在此集群上。')}}</p>
        </td>
    </tr>
    <tr>
        <td>{{t('用户')}}</td>
        <td>
               <span v-if="plan.user.id > 0">
                <link-icon :href="'/users/user?userId=' + plan.user.id">{{plan.user.name}}</link-icon>
            </span>
            <span v-else> — </span>
            <p class="comment">{{t('当前套餐的所属用户。设置后，对其他用户不可见。')}}</p>
        </td>
    </tr>
    <tr>
        <td>{{t('价格设置')}}</td>
        <td>
             <plan-price-view :v-plan="plan"></plan-price-view>
        </td>
    </tr>
</table>

<table class="ui table selectable definition">
    <tr>
        <td class="title">{{t('流量限制')}}</td>
        <td>
            <div v-if="plan.trafficLimit != null && plan.trafficLimit.isOn">
                <plan-limit-view :value="plan" :v-single-mode="true"></plan-limit-view>
            </div>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('带宽限制')}}</td>
        <td>
            <div v-if="plan.bandwidthLimitPerNode != null && plan.bandwidthLimitPerNode.count > 0">
                <bandwidth-size-capacity-view :v-value="plan.bandwidthLimitPerNode"></bandwidth-size-capacity-view>
            </div>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('总网站数限制')}}</td>
        <td>
            <span v-if="plan.totalServers > 0">{{plan.totalServers}}</span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('总域名数限制')}}</td>
        <td>
            <span v-if="plan.totalServerNames > 0">{{plan.totalServerNames}}</span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('每个网站最多域名数')}}</td>
        <td>
            <span v-if="plan.totalServerNamesPerServer > 0">{{plan.totalServerNamesPerServer}}</span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('单日请求数限制')}}</td>
        <td>
            <span v-if="plan.dailyRequests > 0">{{plan.dailyRequestsFormat}}{{t('次/日')}}</span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('单月请求数限制')}}</td>
        <td>
            <span v-if="plan.monthlyRequests > 0">{{plan.monthlyRequestsFormat}}{{t('次/月')}}</span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('单日Websocket连接数限制')}}</td>
        <td>
            <span v-if="plan.dailyWebsocketConnections > 0">{{plan.dailyWebsocketConnections}}{{t('次/日')}}</span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('单月Websocket连接数限制')}}</td>
        <td>
            <span v-if="plan.monthlyWebsocketConnections > 0">{{plan.monthlyWebsocketConnections}}{{t('次/月')}}</span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
    <tr>
        <td>{{t('文件上传最大尺寸')}}</td>
        <td>
            <span v-if="plan.maxUploadSize != null && plan.maxUploadSize.count > 0">
                <size-capacity-view :v-value="plan.maxUploadSize"></size-capacity-view>
            </span>
            <span v-else class="disabled">{{t('没有限制')}}</span>
        </td>
    </tr>
</table>

<table class="ui table selectable definition">
    <tr>
        <td class="title">{{t('支持的功能')}}</td>
        <td>
            <div v-if="plan.hasFullFeatures">{{t('所有功能')}}</div>
            <div v-else>
                <span v-if="plan.features == null || plan.features.length == 0" class="disabled">{{t('没有任何功能')}}</span>
                <span v-else>
                    <span class="ui label basic small" v-for="feature in plan.features" :class="{disabled: !feature.isChecked}">{{feature.name}}</span>
                </span>
            </div>
        </td>
    </tr>
</table>