{$layout "layout_popup"}

<!-- <h3>添加源站地址</h3> -->

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<table class="ui table selectable definition">
		<tr>
			<td class="title">{{t('index_源站协议_0101')}} *</td>
			<td>
				<!-- HTTP -->
                <b-select
                    v-if="serverType == 'httpProxy' || serverType == 'httpWeb'"
                    name="protocol"
                    v-model="protocol"
                    @change="changeProtocol"
                    auto-width
                    :options="[
                        {label: 'HTTP', value: 'http'},
                        {label: 'HTTPS', value: 'https'},

                        ...ossTypes.length > 0 ? [
                            {label: t('index_对象存储_0101'), type: 'header'},
                            ...ossTypes.map(ossType => ({
                                label: ossType.name,
                                value: ossType.code,
                            }))
                        ]:[],
                    ]"
                ></b-select>

				<!-- <select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'" @change="changeProtocol" v-model="protocol">
					<option value="http">HTTP</option>
					<option value="https">HTTPS</option>

                    <optgroup label="对象存储" v-if="ossTypes.length > 0"></optgroup>
                    <option v-for="ossType in ossTypes" :value="ossType.code">{{ossType.name}}</option>
				</select> -->

				<!-- TCP -->
                <b-select
                    v-if="serverType == 'tcpProxy'"
                    name="protocol"
                    v-model="protocol"
                    auto-width
                    :options="[
                        {label: 'TCP', value: 'tcp'},
                        {label: 'TLS', value: 'tls'},
                    ]"
                ></b-select>
                
				<!-- <select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'tcpProxy'" v-model="protocol">
					<option value="tcp">TCP</option>
					<option value="tls">TLS</option>
				</select> -->

                <!-- UDP -->
                <b-select
                    v-if="serverType == 'udpProxy'"
                    name="protocol"
                    v-model="protocol"
                    auto-width
                    :options="[
                        {label: 'UDP', value: 'udp'},
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'udpProxy'" v-model="protocol">
                    <option value="udp">UDP</option>
                </select> -->
			</td>
		</tr>

        <!-- 普通源站 -->
		<tr v-show="!isOSS">
			<td class="title">{{t('index_源站地址_0101')}} *</td>
			<td>
				<div class="ui input left labeled">
                    <span class="ui label">{{protocol.toLowerCase()}}://</span>
                    <input type="text" name="addr" ref="focus" v-model="addr" @input="changeAddr" @change="detectHTTPS"/>
                </div>
                <p class="comment" style="padding-bottom: 0; margin-bottom: 0" v-if="addrError.length == 0 && adviceHTTPS && protocol == 'http'"><span class="red">{{t('index_系统检测到当前源站有HTTPS协议可用，是否切换到HTTPS协议？_0101')}}</span> <a href="" @click.prevent="switchToHTTPS">[{{t('index_点此切换_0101')}}]</a></p>
				<p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>{{t('index_源站服务器地址_0101')}}，{{t('index_通常是一个IP（或域名）加端口_0101')}}，{{t('index_80和443端口可以省略_0101')}}<span v-if="serverType == 'httpProxy'">，{{t('index_不需要加 http:// 或 https://_0101')}}</span>。</p>
			</td>
		</tr>
        <tr v-if="(isHTTP || protocol == 'tls') && !isOSS">
            <td>{{t('index_回源主机名_0101')}}</td>
            <td>
                <input type="text" name="host" :placeholder="t('index_比如_0101') + 'example.com'" maxlength="100"/>
                <p class="comment">{{t('index_可选项_0101')}}。{{t('index_请求源站时的Host字段值_0101')}}，{{t('index_用于设置访问源站的站点域名_0101')}}<span v-if="isHTTP">{{t('index_支持请求变量_0101')}}</span>；{{t('index_如果用户访问的域名和源站域名不一致_0101')}}，{{t('index_请务必设置为源站域名_0101')}}。</p>
            </td>
        </tr>

        <!-- OSS -->
        {$ .ossForm}

        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr v-if="protocol == 'https' || protocol == 'tls'">
                <td>{{protocol.toUpperCase()}}{{t('index_证书_0101')}}</td>
                <td>
                    <ssl-certs-box :v-single-mode="true" :v-view-size="'mini'" :v-description="t('index_可以选择连接源站使用的证书；除非源站有特殊需求，否则不需要添加。_0101')"></ssl-certs-box>
                </td>
            </tr>
            <tr v-if="isHTTP">
                <td>{{t('index_专属域名_0101')}}</td>
                <td>
                    <domains-box></domains-box>
                    <p class="comment">{{t('index_默认不需要填写_0101')}}，{{t('index_表示支持所有域名_0101')}}。{{t('index_如果填写了专属域名_0101')}}，{{t('index_表示这些源站只会在所列的专属域名被访问时才生效_0101')}}。</p>
                </td>
            </tr>
            <tr v-show="!isOSS">
                <td>{{t('index_端口跟随_0101')}}</td>
                <td>
                    <checkbox name="followPort"></checkbox>
                    <p class="comment">{{t('index_选中后_0101')}}，{{t('index_表示源站的端口保持和用户访问的服务端口保持一致_0101')}}；{{t('index_此时的源站地址中的端口号可以任意填写_0101')}}。</p>
                </td>
            </tr>
            <tr v-show="!isOSS && protocol == 'https'">
                <td>{{t('index_支持HTTP_2_0101')}}</td>
                <td>
                    <checkbox name="http2Enabled"></checkbox>
                    <p class="comment">{{t('index_选中后_0101')}}，{{t('index_表示源站支持HTTP/2协议_0101')}}。</p>
                </td>
            </tr>
        </tbody>
	</table>
	<submit-btn></submit-btn>
</form>