{$layout}
{$template "menu"}

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success" data-tea-fail="fail">
    <div class="tables-box">
        <div class="table-box left">
            <b-settings-header>新网站主要信息：</b-settings-header>
            <!-- <h3>新网站主要信息：</h3> -->
            <table class="ui table selectable definition">
                <tr v-show="hasUsers">
                    <td class="title">所属用户<optional-label></optional-label></td>
                    <td>
                        <user-selector @change="changeUserId"></user-selector>
                        <p class="comment">当前网站所属平台用户。</p>
                    </td>
                </tr>
                <tr v-if="plans.length > 0">
                    <td class="title">选择套餐</td>
                    <td>
                        <b-select
                            name="userPlanId"
                            v-model="userPlanId"
                            auto-width
                            :options="[
                                {label: '[选择套餐]', value: '0'},
                                ...plans.map(plan => ({
                                    label: (plan.name??'') + '（' + (admin.dayTo??'') + '）',
                                    value: plan.id,
                                }))
                            ]"
                        ></b-select>

                        <!-- <select class="ui dropdown auto-width" name="userPlanId">
                            <option value="0">[选择套餐]</option>
                            <option v-for="plan in plans" :value="plan.id">{{plan.name}}（{{plan.dayTo}}）</option>
                        </select> -->
                    </td>
                </tr>
                <tr>
                    <td class="title">部署的集群 *</td>
                    <td>
                        <div v-if="userId == 0">
                            <node-cluster-combo-box></node-cluster-combo-box>
                            <p class="comment">当前网站将会部署到所选集群的节点上。</p>
                        </div>
                        <div v-else>跟随用户设置。</div>
                    </td>
                </tr>

                <!-- 域名 -->
                <tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
                    <td>绑定域名 *</td>
                    <td>
                        <server-name-box ref="serverNameBox"></server-name-box>
                        <p class="comment">绑定后，才能通过域名可以访问不同的服务。</p>
                    </td>
                </tr>

                <!-- 证书 -->
                <tbody v-if="tlsProtocolName.length > 0">
                    <tr>
                        <td>{{tlsProtocolName.toUpperCase()}}证书</td>
                        <td>
                            <ssl-certs-box :v-protocol="tlsProtocolName.toLowerCase()" :v-domains="findServerNames" :v-user-id="userId"></ssl-certs-box>
                        </td>
                    </tr>
                </tbody>

                <!-- 源服务器地址 -->
                <tr v-if="serverType == 'httpProxy' || serverType == 'tcpProxy' || serverType == 'udpProxy'">
                    <td>源站地址 *</td>
                    <td>
                        <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">[添加源站地址]</a>
                    </td>
                </tr>

                <!-- Web Server -->
                <tr v-if="serverType == 'httpWeb'">
                    <td>Web目录</td>
                    <td>
                        <input type="text" name="webRoot"/>
                    </td>
                </tr>

                <tr>
                    <td class="title">绑定端口 *</td>
                    <td>
                        <network-addresses-box :v-server-type="serverType" :v-addresses="defaultAddresses"></network-addresses-box>
                    </td>
                </tr>
            </table>
        </div>

        <div class="table-box right">
            <b-settings-header>次要信息：</b-settings-header>
            <!-- <h3>次要信息：</h3> -->
            <table class="ui table selectable definition">
                <tr>
                    <td class="title">网站类型</td>
                    <td>
                        <b-select
                            name="serverType"
                            v-model="serverType"
                            @change="changeServerType()"
                            auto-width
                            :options="[
                                ...serverTypes.map(s => ({
                                    label: s.name,
                                    value: s.code,
                                }))
                            ]"
                        ></b-select>

                        <!-- <select class="ui dropdown auto-width" name="serverType" v-model="serverType" @change="changeServerType()">
                            <option v-for="s in serverTypes" :value="s.code">{{s.name}}</option>
                        </select> -->
                        <p class="comment" v-for="s in serverTypes" v-if="s.code == serverType">{{s.description}}</p>
                    </td>
                </tr>
                <tr>
                    <td class="title">网站名称</td>
                    <td>
                        <input type="text" name="name" maxlength="60"/>
                        <p class="comment">可以是网站用途或者域名等。</p>
                    </td>
                </tr>
                <tr v-if="serverType == 'httpProxy' || serverType == 'httpWeb'">
                    <td>默认开启配置</td>
                    <td>
                        <div class="checkboxes">
                           <checkbox checked="checked" name="accessLogIsOn">访问日志</checkbox>
                            <checkbox checked="checked" name="websocketIsOn">Websocket</checkbox>
                            <checkbox checked="checked" name="cacheIsOn">缓存</checkbox>
                            <checkbox name="wafIsOn">WAF</checkbox>
                            <checkbox name="remoteAddrIsOn">从上级代理中读取IP <tip-icon content="用来支持读取上级代理传递的X-Real-IP、X-Forwarded-For等信息。如果用户需要通过别的代理服务才能访问到这个网站，才需要选中。"></tip-icon> </checkbox>
                            <checkbox checked="checked" name="statIsOn">统计 <tip-icon content="开启统计后，会统计访客区域、操作系统、浏览器等信息。"></tip-icon> </checkbox>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>选择分组<optional-label></optional-label></td>
                    <td>
                        <server-group-selector></server-group-selector>
                    </td>
                </tr>
            </table>
        </div>
        <div class="clear"></div>
    </div>

    <div class="margin clear"></div>
	<submit-btn></submit-btn>
</form>