{$layout "layout_popup"}

<!-- <h3>{{t('updatePopup@修改源站')}}</h3> -->

<form method="post" class="ui form" data-tea-action="$" id="updateOriginForm" data-tea-success="success" @submit.prevent="submitForm">
	<input type="hidden" name="reverseProxyId" :value="reverseProxyId"/>
	<input type="hidden" name="originType" :value="originType"/>
	<input type="hidden" name="originId" :value="originId"/>

	<table class="ui table selectable definition">
		<tr>
			<td class="title">{{t('addPopup@源站协议')}}</td>
			<td>
				<!-- HTTP -->
                <b-select
                    v-if="serverType == 'httpProxy' || serverType == 'httpWeb'"
                    name="protocol"
                    v-model="origin.protocol"
                    @change="changeProtocol"
                    auto-width
                    :options="[
                        {label: 'HTTP', value: 'http'},
                        {label: 'HTTPS', value: 'https'},

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

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

                    <optgroup :label="t('addPopup@对象存储')" 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="origin.protocol"
                    auto-width
                    :options="[
                        {label: 'TCP', value: 'tcp'},
                        {label: 'TLS', value: 'tls'},
                    ]"
                ></b-select>

				<!-- <select class="ui dropdown auto-width" name="protocol" v-model="origin.protocol" v-if="serverType == 'tcpProxy'">
					<option value="tcp">TCP</option>
					<option value="tls">TLS</option>
				</select> -->

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

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

        <!-- 普通源站 -->
		<tr v-show="!isOSS">
			<td class="title">{{t('addPopup@源站地址')}} *</td>
			<td>
                <div class="ui input left labeled">
                    <span class="ui label">{{origin.protocol.toLowerCase()}}://</span>
				    <input type="text" name="addr" ref="focus" v-model="origin.addr" @input="changeAddr"/>
                </div>
				<p class="comment">
                    <span class="red" v-if="addrError.length > 0">{{addrError}}</span>
                    <span v-if="serverType == 'httpProxy'">{{t('addPopup@源站服务器地址提示HTTP')}}</span>
                    <span v-else>{{t('addPopup@源站服务器地址提示其他')}}</span>
                </p>
			</td>
		</tr>
        <tr v-if="(isHTTP || origin.protocol == 'tls') && !isOSS">
            <td>{{t('addPopup@回源主机名')}}</td>
            <td>
                <input type="text" name="host"  v-model="origin.host" :placeholder="t('addPopup@比如example_com')" maxlength="100"/>
                <p class="comment">
                    <span v-if="isHTTP">{{t('addPopup@回源主机名提示HTTP')}}</span>
                    <span v-else>{{t('addPopup@回源主机名提示其他')}}</span>
                </p>
            </td>
        </tr>

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

		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
            <tr v-if="origin.protocol == 'https' || origin.protocol == 'tls'">
                <td>{{origin.protocol.toUpperCase()}} {{t('addPopup@证书')}}</td>
                <td>
                    <ssl-certs-box :v-single-mode="true" :v-cert="origin.cert" :v-view-size="'mini'" :v-description="t('addPopup@证书说明')"></ssl-certs-box>
                </td>
            </tr>
            <tr v-show="origin.protocol != 'udp'">
                <td>{{t('addPopup@专属域名')}}</td>
                <td>
                    <domains-box :v-domains="origin.domains"></domains-box>
                    <p class="comment">{{t('addPopup@专属域名提示')}}</p>
                </td>
            </tr>
            <tr v-show="!isOSS">
                <td>{{t('addPopup@端口跟随')}}</td>
                <td>
                    <checkbox name="followPort" v-model="origin.followPort"></checkbox>
                    <p class="comment">{{t('addPopup@端口跟随提示')}}</p>
                </td>
            </tr>
            <tr v-show="!isOSS && origin.protocol == 'https'">
                <td>{{t('addPopup@支持HTTP2')}}</td>
                <td>
                    <checkbox name="http2Enabled" v-model="origin.http2Enabled"></checkbox>
                    <p class="comment">{{t('addPopup@支持HTTP2提示')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('addPopup@权重')}} *</td>
                <td>
                    <input type="text" name="weight" maxlength="4" v-model="origin.weight"  style="width:5em"/>
                    <p class="comment">{{t('addPopup@权重提示')}}</p>
                </td>
            </tr>
			<tr>
				<td>{{t('addPopup@名称')}}</td>
				<td>
					<input type="text" name="name" maxlength="100" v-model="origin.name"/>
					<p class="comment">{{t('addPopup@名称提示')}}</p>
				</td>
			</tr>
            <tr v-show="!isOSS">
                <td>{{t('addPopup@连接失败超时时间')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="connTimeout" value="10" size="6" v-model="origin.connTimeout"/>
                        </div>
                        <div class="ui field">
                           {{t('addPopup@秒')}}
                        </div>
                    </div>
                    <p class="comment">{{t('addPopup@连接失败超时时间提示')}}</p>
                </td>
            </tr>
            <tr v-if="isHTTP && !isOSS">
                <td>{{t('addPopup@读取超时时间')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="readTimeout" value="0" size="6" v-model="origin.readTimeout"/>
                        </div>
                        <div class="ui field">
                            {{t('addPopup@秒')}}
                        </div>
                    </div>
                    <p class="comment">{{t('addPopup@读取超时时间提示')}}</p>
                </td>
            </tr>
            <tr v-if="isHTTP && !isOSS">
                <td>{{t('addPopup@最大并发连接数')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="maxConns" value="0" size="6" maxlength="10" v-model="origin.maxConns"/>
                        </div>
                    </div>
                    <p class="comment">{{t('addPopup@最大并发连接数提示')}}</p>
                </td>
            </tr>
            <tr v-if="isHTTP && !isOSS">
                <td>{{t('addPopup@最大空闲连接数')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="maxIdleConns" value="0" size="6" maxlength="10" v-model="origin.maxIdleConns"/>
                        </div>
                    </div>
                    <p class="comment">{{t('addPopup@最大空闲连接数提示')}}</p>
                </td>
            </tr>
            <tr v-if="isHTTP && !isOSS">
                <td>{{t('addPopup@最大空闲超时时间')}}</td>
                <td>
                    <div class="ui fields inline">
                        <div class="ui field">
                            <input type="text" name="idleTimeout" value="0" size="6" v-model="origin.idleTimeout"/>
                        </div>
                        <div class="ui field">
                           {{t('addPopup@秒')}}
                        </div>
                    </div>
                    <p class="comment">{{t('addPopup@最大空闲超时时间提示')}}</p>
                </td>
            </tr>
			<tr>
				<td>{{t('addPopup@备注')}}</td>
				<td>
					<textarea name="description" rows="3" maxlength="100" v-model="origin.description"></textarea>
				</td>
			</tr>
			<tr>
				<td>{{t('addPopup@启用当前源站')}}</td>
				<td>
					<!-- <checkbox name="isOn" :v-value="origin.isOn"></checkbox> -->
                    <checkbox name="isOn" :v-value="1" v-model="origin.isOn"></checkbox>
				</td>
			</tr>
		</tbody>
	</table>
	<button class="ui button primary" @click="submitForm">{{t("index_保存_0101")}}</button>
</form>