{$layout} 
{$template "menu"}

<p class="ui message warning" v-if="clusterId == 0">
    <i class="icon warning circle"></i>
    需要管理员在后台设置当前用户所属集群后才能继续操作。
</p>

<div class="http-config-container" v-show="clusterId > 0">
    <form class="ui form http-config-form" style="padding: 0em !important;" method="post" data-tea-action="$" data-tea-success="success" data-tea-fail="fail">
        <csrf-token></csrf-token>

        <div class="config-section">
            <div class="section-title">
                <i class="icon globe"></i>
                创建网站
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon tag"></i>
                    网站类型
                </div>
                <div class="item-content">
                    <b-select name="serverType" v-model="serverType" auto-width :options="[
                        {label: 'CDN加速', value: 'httpProxy'},
                        {label: '静态网站', value: 'pages'}
                    ]">
                    </b-select>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon at"></i>
                    加速域名 *
                </div>
                <div class="item-content">
                    <server-name-box ref="serverNameBox" ref="serverNameBox"></server-name-box>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon exchange"></i>
                    域名协议 *
                </div>
                <div class="item-content">
                    <checkbox name="protocols" :v-value="'http'">HTTP</checkbox> &nbsp; &nbsp; &nbsp;
                    <checkbox name="protocols" :v-value="'https'" v-model="supportHTTPS">HTTPS</checkbox>
                </div>
            </div>
            
            <div class="config-item" v-show="supportHTTPS">
                <div class="item-label">
                    <i class="icon shield"></i>
                    HTTPS证书 *
                </div>
                <div class="item-content">
                    <ssl-certs-box :v-domains="findServerNames"></ssl-certs-box>
                </div>
            </div>
            
            <div class="config-item" v-show="serverType == 'httpProxy'">
                <div class="item-label">
                    <i class="icon server"></i>
                    源站信息 *
                </div>
                <div class="item-content">
                    <origin-input-box :v-oss-types="ossTypes"></origin-input-box>
                </div>
            </div>
            
            <div class="config-item" v-show="serverType == 'httpProxy'">
                <div class="item-label">
                    <i class="icon reply"></i>
                    回源主机名 *
                </div>
                <div class="item-content">
                    <radio name="requestHostType" :v-value="0" v-model="requestHostType">跟随CDN服务</radio> &nbsp;
                    <radio name="requestHostType" :v-value="1" v-model="requestHostType">跟随源站</radio> &nbsp;
                    <radio name="requestHostType" :v-value="2" v-model="requestHostType">自定义</radio>
                    <div v-show="requestHostType == 2" style="margin-top: 0.8em">
                        <input type="text" name="requestHost" placeholder="比如example.com" v-model="requestHost" />
                    </div>
                    <p class="comment">请求源站时的Host，用于设置访问源站的站点域名
                        <span v-if="requestHostType == 0">，"跟随CDN服务"是指访问源站的站点域名和当前CDN服务保持一致</span>
                        <span v-if="requestHostType == 1">，"跟随源站"是指访问源站的站点域名仍然是填写的源站地址中的信息，不随CDN服务域名改变而改变</span>
                        <span v-if="requestHostType == 2">，自定义Host内容中支持请求变量</span>。
                    </p>
                </div>
            </div>
            
            <div class="config-item" v-show="serverType == 'httpProxy'">
                <div class="item-label">
                    <i class="icon database"></i>
                    缓存设置
                </div>
                <div class="item-content">
                    <cache-cond-box></cache-cond-box>
                </div>
            </div>
            
            <div class="config-item" v-show="requirePlan || userPlans.length > 0">
                <div class="item-label">
                    <i class="icon gift"></i>
                    绑定套餐 <span v-if="requirePlan">*</span>
                </div>
                <div class="item-content">
                    <input type="hidden" name="isChanged" value="1" />
                    <span v-if="userPlans.length == 0 && !requirePlan" class="disabled">当前还没有可以使用的套餐。</span>
                    <span v-if="userPlans.length == 0 && requirePlan" class="red"><a href="/plans"><span
                                class="red">当前还没有可以使用的套餐，请先购买套餐</span></a> 。</span>
                    <div v-else>
                        <b-select name="userPlanId" :options="[requirePlan ? {label: '选择套餐', value: 0} : {label: '不使用套餐', value: 0}, ...userPlans.map(userPlan => ({label: userPlan.name + '（' + userPlan.dayTo + '）', value: userPlan.id}))]" auto-width v-model="userPlanId" ></b-select>
                    </div>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon folder"></i>
                    所属分组
                </div>
                <div class="item-content">
                    <server-group-selector></server-group-selector>
                </div>
            </div>
        </div>

        <submit-btn></submit-btn>
    </form>
</div>