{$layout}
{$template "menu"}

<div class="http-config-container">
    <form method="post" class="ui form http-config-form" data-tea-action="$" data-tea-success="success" data-tea-fail="fail">
        <div class="config-section">
            <div class="section-title">
                <i class="icon globe"></i>
                {{t('index_新网站主要信息_0101')}}
            </div>
            
            <div class="config-item" v-show="hasUsers">
                <div class="item-label">
                    <i class="icon users"></i>
                    {{t('index_所属用户_0101')}}<optional-label></optional-label>
                </div>
                <div class="item-content">
                    <user-selector @change="changeUserId"></user-selector>
                    <p class="comment">{{t('index_当前网站所属平台用户_0101')}}</p>
                </div>
            </div>
            
            <div class="config-item" v-if="plans.length > 0">
                <div class="item-label">
                    <i class="icon gift"></i>
                    {{t('index_选择套餐_0101')}}
                </div>
                <div class="item-content">
                    <b-select
                        name="userPlanId"
                        v-model="userPlanId"
                        auto-width
                        :options="[
                            {label: t('index_选择套餐_0101'), value: '0'},
                            ...plans.map(plan => ({
                                label: (plan.name??'') + '（' + (plan.dayTo??'') + '）',
                                value: plan.id,
                            }))
                        ]"
                    ></b-select>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon server"></i>
                    {{t('index_部署的集群_0101')}} *
                </div>
                <div class="item-content">
                    <div v-if="userId == 0">
                        <node-cluster-combo-box></node-cluster-combo-box>
                        <p class="comment">{{t('index_当前网站将会部署到所选集群的节点上_0101')}}</p>
                    </div>
                    <div v-else>{{t('index_跟随用户设置_0101')}}</div>
                </div>
            </div>
            
            <div class="config-item" v-if="serverType == 'httpProxy' || serverType == 'httpWeb' || serverType == 'pages'">
                <div class="item-label">
                    <i class="icon at"></i>
                    {{t('index_绑定域名_0101')}} *
                </div>
                <div class="item-content">
                    <server-name-box ref="serverNameBox"></server-name-box>
                    <p class="comment">{{t('index_绑定后，才能通过域名可以访问不同的服务_0101')}}</p>
                </div>
            </div>
            
            <div class="config-item" v-if="tlsProtocolName.length > 0">
                <div class="item-label">
                    <i class="icon shield"></i>
                    {{tlsProtocolName.toUpperCase()}}{{t('index_证书_0101')}}
                </div>
                <div class="item-content">
                    <ssl-certs-box :v-protocol="tlsProtocolName.toLowerCase()" :v-domains="findServerNames" :v-user-id="userId"></ssl-certs-box>
                </div>
            </div>
            
            <div class="config-item" v-if="serverType == 'httpProxy' || serverType == 'tcpProxy' || serverType == 'udpProxy'">
                <div class="item-label">
                    <i class="icon exchange"></i>
                    {{t('index_源站地址_0101')}} *
                </div>
                <div class="item-content">
                    <input type="hidden" name="origins" :value="JSON.stringify(origins)"/>
                    <div v-if="origins.length > 0">
                        <div v-for="(origin, index) in origins" class="ui label small basic">
                            <span v-if="origin.addrSummary != null && origin.addrSummary.length > 0">{{origin.addrSummary}}</span>
                            <span v-else>{{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}</span>
                            <a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove"></i></a>
                        </div>
                        <div class="ui divider"></div>
                    </div>
                    <a href="" @click.prevent="addOrigin" class="more-options-toggle"><i class="icon plus"></i>{{t('index_添加源站地址_0101')}}</a>
                </div>
            </div>
            
            <div class="config-item" v-if="serverType == 'httpWeb'">
                <div class="item-label">
                    <i class="icon folder open"></i>
                    {{t('index_Web目录_0101')}}
                </div>
                <div class="item-content">
                    <input type="text" name="webRoot"/>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon plug"></i>
                    {{t('index_绑定端口_0101')}} *
                </div>
                <div class="item-content">
                    <network-addresses-box :v-server-type="serverType" :v-addresses="defaultAddresses"></network-addresses-box>
                </div>
            </div>
        </div>
        
        <div class="config-section">
            <div class="section-title">
                <i class="icon setting"></i>
                {{t('index_次要信息_0101')}}
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon clone"></i>
                    {{t('index_网站类型_0101')}}
                </div>
                <div class="item-content">
                    <b-select
                        name="serverType"
                        v-model="serverType"
                        @change="changeServerType()"
                        auto-width
                        :options="[
                            ...serverTypes.map(s => ({
                                label: s.name,
                                value: s.code,
                            }))
                        ]"
                    ></b-select>
                    <p class="comment" v-for="s in serverTypes" v-if="s.code == serverType">{{s.description}}</p>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon tag"></i>
                    {{t('index_网站名称_0101')}}
                </div>
                <div class="item-content">
                    <input type="text" name="name" maxlength="60"/>
                    <p class="comment">{{t('index_可以是网站用途或者域名等_0101')}}</p>
                </div>
            </div>
            
            <div class="config-item" v-if="serverType == 'httpProxy' || serverType == 'httpWeb' || serverType == 'pages'">
                <div class="item-label">
                    <i class="icon check square"></i>
                    {{t('index_默认开启配置_0101')}}
                </div>
                <div class="item-content">
                    <div class="checkboxes">
                        <checkbox checked="checked" name="accessLogIsOn">{{t('index_访问日志_0101')}}</checkbox>
                        <checkbox checked="checked" name="websocketIsOn">{{t('index_Websocket_0101')}}</checkbox>
                        <checkbox checked="checked" name="cacheIsOn">{{t('index_缓存_0101')}}</checkbox>
                        <checkbox name="wafIsOn">{{t('index_WAF_0101')}}</checkbox>
                        <checkbox name="remoteAddrIsOn">{{t('index_从上级代理中读取IP_0101')}} <tip-icon :content="t('index_从上级代理中读取IP_0101_tip')"></tip-icon> </checkbox>
                        <checkbox checked="checked" name="statIsOn">{{t('index_统计_0101')}} <tip-icon :content="t('index_统计_0101_tip')"></tip-icon> </checkbox>
                    </div>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">
                    <i class="icon folder"></i>
                    {{t('index_选择分组_0101')}}<optional-label></optional-label>
                </div>
                <div class="item-content">
                    <server-group-selector></server-group-selector>
                </div>
            </div>
        </div>
        
        <submit-btn></submit-btn>
    </form>
</div>