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

<div class="right-box">
    <form class="ui form" data-tea-action="$" data-tea-success="success">
        <csrf-token></csrf-token>
        <div class="config-section">
            <div class="section-title">{{t('基本信息')}}</div>
            <div class="config-item">
                <div class="item-label">{{t('套餐名称')}} *</div>
                <div class="item-content">
                    <input type="text" name="name" ref="focus" maxlength="100" class="ui input"/>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('套餐简介')}}</div>
                <div class="item-content">
                    <input type="text" name="description" maxlength="100" class="ui input"/>
                    <p class="comment">{{t('为用户介绍当前套餐的应用场景。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('关联集群')}} *</div>
                <div class="item-content">
                    <cluster-selector></cluster-selector>
                    <p class="comment">{{t('使用当前套餐的网站都将会部署在此集群上。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('用户')}}</div>
                <div class="item-content">
                    <user-selector></user-selector>
                    <p class="comment">{{t('当前套餐的所属用户。设置后，对其他用户不可见。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('价格设置')}} *</div>
                <div class="item-content">
                    <plan-price-config-box></plan-price-config-box>
                </div>
            </div>
        </div>

        <div class="config-section">
             <div class="section-title">{{t('限制设置')}}</div>
             <traffic-limit-config-box></traffic-limit-config-box>
            <div class="config-item">
                <div class="item-label">{{t('带宽限制')}}</div>
                <div class="item-content">
                    <bandwidth-size-capacity-box :v-name="'bandwidthLimitPerNodeJSON'" :v-unit="'mb'"></bandwidth-size-capacity-box>
                    <p class="comment">{{t('该套餐在单个CDN节点上的带宽限制，不填或者为0表示不限制。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('总网站数限制')}}</div>
                <div class="item-content">
                    <digit-input name="totalServers" size="6" style="width: 6em" value="1" maxlength="6"></digit-input>
                    <p class="comment">{{t('当前套餐能够绑定的总网站数量，0表示不限制。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('总域名数限制')}}</div>
                <div class="item-content">
                    <digit-input name="totalServerNames" size="6" style="width: 6em" value="0" maxlength="6"></digit-input>
                    <p class="comment">{{t('当前套餐能够绑定的总域名数量（即每个网站的所有域名总数量），0表示不限制。')}}</p>
                </div>
            </div>
             <div class="config-item">
                <div class="item-label">{{t('每个网站最多域名数')}}</div>
                 <div class="item-content">
                    <digit-input name="totalServerNamesPerServer" size="6" style="width: 6em" value="0" maxlength="6"></digit-input>
                    <p class="comment">{{t('当前套餐能够绑定的单个网站能够添加的最多域名数量，0表示不限制。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('单日请求数限制')}}</div>
                <div class="item-content">
                    <div class="ui input right labeled">
                        <digit-input name="dailyRequests" size="16" style="width: 12em" value="0" maxlength="16" @input="changeDailyRequests"></digit-input>
                        <span class="ui label">{{t('次/每日')}}</span>
                    </div>
                    <p class="comment"><span v-if="dailyRequestsFormat.length > 0">{{t('当前输入：')}}{{dailyRequestsFormat}}。</span>{{t('当前套餐下的所有网站每天可以处理的请求数限制，0表示不限制。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('单月请求数限制')}}</div>
                <div class="item-content">
                    <div class="ui input right labeled">
                        <digit-input name="monthlyRequests" size="16" style="width: 12em" value="0" maxlength="16" @input="changeMonthlyRequests"></digit-input>
                        <span class="ui label">{{t('次/每月')}}</span>
                    </div>
                    <p class="comment"><span v-if="monthlyRequestsFormat.length > 0">{{t('当前输入：')}}{{monthlyRequestsFormat}}。</span>{{t('当前套餐下的所有网站每月可以处理的请求数限制，0表示不限制。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('单日Websocket连接数限制')}}</div>
                <div class="item-content">
                    <div class="ui input right labeled">
                        <digit-input name="dailyWebsocketConnections" size="16" style="width: 12em" value="0" maxlength="16" @input="changeDailyWebsocketConnections"></digit-input>
                        <span class="ui label">{{t('次/每日')}}</span>
                    </div>
                    <p class="comment"><span v-if="dailyWebsocketConnectionsFormat.length > 0">{{t('当前输入：')}}{{dailyWebsocketConnectionsFormat}}。</span>{{t('当前套餐下的所有网站每天可以接受的Websocket连接数限制，0表示不限制。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('单月Websocket连接数限制')}}</div>
                <div class="item-content">
                    <div class="ui input right labeled">
                        <digit-input name="monthlyWebsocketConnections" size="16" style="width: 12em" value="0" maxlength="16" @input="changeMonthlyWebsocketConnections"></digit-input>
                        <span class="ui label">{{t('次/每月')}}</span>
                    </div>
                    <p class="comment"><span v-if="monthlyWebsocketConnectionsFormat.length > 0">{{t('当前输入：')}}{{monthlyWebsocketConnectionsFormat}}。</span>{{t('当前套餐下的所有网站每月可以接受的Websocket连接数限制，0表示不限制。')}}</p>
                </div>
            </div>
             <div class="config-item">
                <div class="item-label">{{t('文件上传最大尺寸')}}</div>
                <div class="item-content">
                    <size-capacity-box :v-name="'maxUploadSizeJSON'" :v-unit="'gb'"></size-capacity-box>
                    <p class="comment">{{t('单次上传的文件最大内容尺寸；0表示不限制。')}}</p>
                </div>
            </div>
        </div>

        <div class="config-section">
            <div class="section-title">{{t('功能设置')}}</div>
            <div class="config-item">
                <div class="item-label">{{t('包含所有功能')}}</div>
                <div class="item-content">
                    <checkbox name="hasFullFeatures" v-model="hasFullFeatures"></checkbox>
                    <p class="comment">{{t('选中后，表示当前套餐用户包含所有功能；取消选中后，可以选择支持的功能。')}}</p>
                </div>
            </div>
            <div class="config-item" v-show="!hasFullFeatures">
                <div class="item-label">{{t('选择支持的功能')}}</div>
                <div class="item-content">
                    <div class="feature-boxes">
                        <div class="feature-box" v-for="feature in features">
                            <checkbox name="featureCodes" :v-value="feature.code" v-model="feature.isChecked">{{feature.name}}</checkbox>
                            <p class="comment">{{feature.description}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label"></div>
            <div class="item-content">
                <submit-btn></submit-btn>
            </div>
        </div>
    </form>
</div>