<template>
	<div class="select middle">
		<div ref="select" class="select_zgh  " :class="active ? 'active':''">
			<div class="val middle_before nowrap" @click="active=!active">
				<input class="h100" ref="input" autocomplete="off" readonly="readonly" type="text" :value="defaultOpt" :placeholder="placeholder" />

			</div>
			<i class="icon"></i>
			<div class="option box-shadow">
				<span v-for="(option,i) in options" :class="i==selectIndex?'active':''" @click="selectHandle($event,i,option)">
					<i class="iconfont fs40 mgR10 " v-if="option.iconfont" v-html="option.iconfont"></i>
					{{option.name}}
				</span>
			</div>
		</div>
	</div>
	<!--<i class="iconfont">&#xe68b;</i>-->
	<!--<i class="iconfont">&#xe7b8;</i>-->
</template>

<script>
	export default {
		name: 'tip',
		props: {
			placeholder: '',
			options: {
				default() {
					return [{
						name: '请选择',
						value: '0'
						//iconfont:'&#xe68b;'
					}, {
						name: '店铺',
						value: '1'
						//iconfont:'&#xe7b8;'
					}]

				}
			},
			value: {
				default: ''
			}
		},
		data() {
			return {
				defaultOpt: '',
				selectIndex: -1,
				active: false,
				currentValue: this.value
			}
		},
		computed: {

		},
		watch: {
			options: {
				handler(newValue, oldValue) {

					newValue.forEach((value, key) => {
						if(value.value == this.value) {
							this.defaultOpt = value.name
							this.selectIndex = key
						}
					})
				},
				deep: true
			},
			currentValue(val) {
				this.$emit('input', val);
			},
			value(val) {
				this.currentValue = val;
				if(!this.options) return;
				this.options.forEach((value, key) => {
					if(value.value == this.value) {
						this.defaultOpt = value.name
						this.selectIndex = key
					}
				})

			}
		},
		mounted() {
			let vm = this;
			document.addEventListener('click', function(e) {
				if(vm.$refs.input != e.target) {
					vm.active = false;
				}

			}, false)

		},
		methods: {
			selectHandle(event, index, option) {
				event.stopPropagation()
				this.selectIndex = index;
				this.active = false
				this.defaultOpt = this.options[index].name;
				this.currentValue = this.options[index].value
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../assets/config");
	@common_cl: #d60b2b;
	.select {
		height: 22px;
		font-size: 12px;
		line-height: 22px;
		border: 1px solid #cfcfcf;
		background: #fff;
	}
	
	.select_zgh {
		@h: 24px;
		@radius: 2px;
		position: relative;
		height: 100%;
		color: #333;
		.iconfont {
			position: absolute;
			top: 0;
			left: .8rem;
		}
		.val {
			display: inline-block;
			height: 100%;
			width: 100%;
			overflow: hidden;
			input {
				width: 100%;
				padding: 0 20px 0 10px;
			}
		}
		&.active {
			.option {
				display: block;
				top: 120%;
				opacity: 1;
				z-index: 1;
				/*height:auto;*/
			}
		}
		.icon {
			display: inline-block;
			position: absolute;
			top: 50%;
			right: 10px;
			width: 0px;
			height: 0;
			border: 4px solid #62B6F8;
			border-color: #848383 transparent transparent;
			margin-top: -1px;
		}
		.option {
			background: #fff;
			position: absolute;
			width: 100%;
			max-height: 300px;
			top: 200%;
			left: 0px;
			opacity: 0;
			border-radius: @radius;
			text-align: center;
			z-index: -1;
			/*height:0;*/
			display: none;
			padding: 10px 0;
			transition: height .5s;
			overflow-y: scroll;
			&:after {
				/*content: '';*/
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #000;
				opacity: .7;
				z-index: 1;
				box-shadow: 2px 2px 5px #E0E3E9;
				border-radius: @radius;
			}
			span {
				@h: 30px;
				position: relative;
				z-index: 2;
				width: 100%;
				height: @h;
				line-height: @h;
				display: block;
				text-align: center;
				cursor: pointer;
				/*border-bottom: 1px solid #333;*/
				&.active {
					color: @common_cl;
					/*background: @common_cl;*/
				}
				&:hover {
					/*color: #fff;*/
					background: #eee;
				}
			}
		}
	}
</style>