Vue.component("origin-input-box", {
	props: ["v-family", "v-oss-types"],
	data: function () {
		let family = this.vFamily
		if (family == null) {
			family = "http"
		}

		let ossTypes = this.vOssTypes
		if (ossTypes == null) {
			ossTypes = []
		}

		return {
			origins: [],
			isAdding: false,
			family: family,
			ossTypes: ossTypes
		}
	},
	methods: {
		add: function () {
			let scheme = ""
			switch (this.family) {
				case "http":
					scheme = "http"
					break
				case "tcp":
					scheme = "tcp"
					break
				case "udp":
					scheme = "udp"
					break
			}
			this.origins.push({
				id: "",
				host: "",
				isPrimary: true,
				isPrimaryValue: 1,
				scheme: scheme
			})

			let that = this
			setTimeout(function () {
				let inputs = that.$refs.originHost
				if (inputs != null) {
					inputs[inputs.length - 1].focus()
				}
			}, 10)
		},
		confirm: function () {
		},
		cancel: function () {
		},
		remove: function (index) {
			this.origins.$remove(index)
		},
		changePrimary: function (origin) {
			origin.isPrimary = origin.isPrimaryValue == 1
		},
		changeFamily: function (family) {
			this.family = family
			let that = this
			this.origins.forEach(function (origin) {
				let scheme = ""
				switch (that.family) {
					case "http":
						scheme = "http"
						break
					case "tcp":
						scheme = "tcp"
						break
					case "udp":
						scheme = "udp"
						break
				}
				origin.scheme = scheme
			})
		}
	},
	template: `<div>
	<input type="hidden" name="originsJSON" :value="JSON.stringify(origins)"/>
	<div>
		<div class="ui fields inline">
			<div class="ui field" style="padding-left: 0.1em; width:6.8em; color: grey">源站协议</div>
			<div class="ui field" style="width:21em; color: grey">源站地址（Host:Port）</div>
			<div class="ui field" style="color: grey">优先级 &nbsp;<tip-icon content="优先级：优先使用主源站，如果主源站无法连接时才会连接备用源站"></tip-icon></div>
		</div>
		<div class="ui divider"></div>
		<div v-for="(origin, index) in origins">
			<div class="ui fields inline" style="margin-top: 0.6em">
				<div class="ui field">
					<select class="ui dropdown auto-width" v-model="origin.scheme">
						<option value="http" v-if="family == 'http'">http://</option>
						<option value="https" v-if="family == 'http'">https://</option>
						
						<!-- 对象存储 -->
						<optgroup label="对象存储" v-if="family == 'http' && ossTypes.length > 0"></optgroup>
						<option v-if="family == 'http'" v-for="ossType in ossTypes" :value="ossType.code">{{ossType.name}}</option>
						
						<option value="tcp" v-if="family == 'tcp'">tcp://</option>
						<option value="tls" v-if="family == 'tcp'">tls://</option>
						<option value="udp" v-if="family == 'udp'">udp://</option>
					</select>
				</div>
				<div class="ui field">
					<div v-show="origin.scheme != null && origin.scheme.startsWith('oss:')">
						请在创建网站后，再在对应网站设置"源站"功能中进行添加对象存储源站。
					</div>
					<div v-show="!origin.scheme.startsWith('oss:')">
						<input type="text" placeholder="源站地址" v-model="origin.host" ref="originHost" style="width:20em"/>
					</div>	
				</div>
				<div class="ui field">
					<div v-show="origin.scheme != null && origin.scheme.startsWith('oss:')">
					</div>
					<div v-show="!origin.scheme.startsWith('oss:')">
						<select class="ui dropdown auto-width small" v-model="origin.isPrimaryValue" @change="changePrimary(origin)">
							<option value="1">主</option>
							<option value="0">备</option>
						</select>
					</div>	
				</div>
				<div class="ui field">
					<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove icon small"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div style="margin-top: 1em">
		<button class="ui button tiny" type="button" @click.prevent="add()">+</button>
	</div>
</div>`
})