<template>
	<view class="uni-select-lay" @click="loading_data">
		<input type="text" :name="name" v-model="value" class="uni-select-input">
		<view class="uni-select-lay-select" :class="{'active':active}">
			<!-- 禁用mask -->
			<view class="uni-disabled" v-if="disabled"></view>
			<!-- 禁用mask -->
			<!-- 清空 -->
			<!-- <view class="uni-select-lay-input-close" v-if="changevalue!=''&&this.active">
				<text @click.stop="removevalue"></text>
			</view> -->
			<!-- 清空 -->
			<input type="text" class="uni-select-lay-input" :class="{active:changevalue!=''&&changevalue!=placeholder}"
				v-model="changevalue" :disabled="disabled" :placeholder="placeholder" @focus="unifocus"
				@input.stop="intchange" @blur="uniblur">
		</view>
		<scroll-view class="uni-select-lay-options" :scroll-y="true" v-show="active" @scroll="selectmove"
			@touchstart="movetouch" :style="[{height:innerHeight}]">
			<template v-if="!changes">
				<view class="uni-select-lay-item" v-if="showplaceholder" :class="{active:value==''}"
					@click.stop="selectitem(-1,null)">
					{{placeholder}}
				</view>
				<view class="uni-select-lay-item" :class="{active:value==item[svalue]}" v-for="(item,index) in options"
					:key="index" @click.stop="selectitem(index,item)">{{item[slabel]}}</view>
			</template>
			<!-- 搜索 -->
			<template v-else>
				<template v-if="vlist.length>0">
					<view class="uni-select-lay-item" :class="{active:value==item[svalue]}"
						v-for="(item,index) in vlist" :key="index" @click.stop="selectitem(index,item)">{{item[slabel]}}
					</view>
				</template>
				<template v-else>
					<view class="nosearch">{{changesValue}}</view>
				</template>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "select-lay",
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			options: {
				type: Array,
				default () {
					return []
				}
			},
			name: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: 'auto'
			},
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			showplaceholder: {
				type: Boolean,
				default: true
			},
			slabel: {
				type: String,
				default: 'label'
			},
			svalue: {
				type: String,
				default: 'value'
			},
			index: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				active: false, //组件是否激活，
				isfocus: false, //是否有焦点
				isremove: false, //是否是因为点击清空才导致的失去焦点
				ismove: false, //是否是因为移动才失去焦点
				changevalue: this.value, //搜索框同步
				oldvalue: this.value, //数据回滚
				changes: false, //正在搜索
				changesValue: "",
				vlist: [], //搜索框查询的列表
				settimer: null, //value改变定时器
				wbindex: this.index,
				typename: this.type,
				innerHeight: this.height
			};
		},
		mounted() {
			this.itemcheck();
		},
		watch: {
			//value改变
			value() {
				this.itemcheck();
				this.oldvalue = this.value
				this.changevalue = this.value
			},
			//index改变
			index() {
				this.wbindex = this.index
			},
			//index改变
			height() {
				this.innerHeight = this.height
			},
			//初始化数组
			options() {
				// 此处判断是否有初始value,存在则判断显示文字
				this.itemcheck();
			},
			//type改变
			type() {
				this.typename = this.type
			}
		},
		methods: {
			//判断数组跟当前active值
			itemcheck() {

			},
			loading_data() {
				this.$emit("start")
			},
			//点击组件
			select() {
				if (this.disabled) return;
				this.active = !this.active;
				if (this.active) {
					this.changes = false;
				} else {
					this.changevalue = this.oldvalue;
				}
				this.loading_data()
			},
			// 获得焦点
			unifocus() {
				if (this.disabled) return;
				// this.oldvalue=this.changesValue
				this.changevalue = ""
				this.active = true;
				this.changes = false;
				this.isfocus = true;
			},
			// 失去焦点
			uniblur() {
				this.isfocus = false;
				// bug   点击组件列会先触发失去焦点，此时组件列事件不执行
				setTimeout(() => {
					if (this.isremove || this.ismove) {
						this.isremove = false;
						this.ismove = false;
					} else {
						this.changevalue = this.oldvalue;
						this.isremove = false;
						this.active = false;
					}
				}, 153)
			},
			movetouch() {
				setTimeout(() => {
					if (this.isfocus) {
						this.ismove = false;
						return;
					}
					if (!this.ismove) this.ismove = true;
				}, 100)
				// this.changes = false;
			},
			selectmove() {
				setTimeout(() => {
					if (this.isfocus) {
						this.ismove = false;
						return;
					}
					if (!this.ismove) this.ismove = true;
				}, 100)

				// this.changes = false;
			},
			//移除数据
			removevalue() {
				this.isremove = true;
				this.changes = false;
				this.changevalue = "";
			},
			//value 改变
			intchange() {
				if (this.changevalue == '') {
					this.changes = false;
					return;
				};
				if (this.oldvalue == this.changevalue) {
					return;
				}
				this.vlist = [];
				this.changes = true;
				this.changesValue = "正在搜索...";
				if (this.settimer) {
					clearTimeout(this.settimer)
				}
				this.settimer = setTimeout(() => {
					this.vlist = this.options.filter(item => {
						return item[this.slabel].includes(this.changevalue)
					});
					if (this.vlist.length === 0) {
						this.changesValue = "暂无匹配内容！";
					}
				}, 600)

			},

			//点击组件列
			selectitem(index, item) {
				this.changevalue = this.oldvalue;
				this.active = false;
				this.$forceUpdate()
				this.$emit("selectitem", index, item, this.wbindex, this.typename)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-select-lay {
		position: relative;

		.uni-select-input {
			opacity: 0;
			position: absolute;
			z-index: 1;
		}

		// select部分 
		.uni-select-lay-select {
			user-select: none;
			position: relative;
			z-index: 3;
			height: 36px;
			padding: 0 0px 0 10px;
			box-sizing: border-box;
			text-align: center;
			border-radius: 4px;
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #999;

			.uni-disabled {
				position: absolute;
				left: 0;
				width: 100%;
				height: 100%;
				cursor: no-drop;
				background: rgba(255, 255, 255, .5);
			}

			// input 框的清除按钮
			.uni-select-lay-input-close {
				position: absolute;
				right: 0px;
				top: 0;
				height: 100%;
				width: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 3;
				cursor: pointer;

				text {
					position: relative;
					background: #fff;
					width: 13px;
					height: 13px;
					border-radius: 50%;
					border: 1px solid #bbb;

					&::before,
					&::after {
						content: "";
						position: absolute;
						left: 20%;
						top: 50%;
						height: 1px;
						width: 60%;
						transform: rotate(45deg);
						background-color: #bbb;
					}

					&::after {
						transform: rotate(-45deg);
					}
				}
			}

			.uni-select-lay-input {
				font-size: 14px;
				color: #999;
				display: block;
				width: 100%;
				height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				line-height: 30px;
				box-sizing: border-box;

				&.active {
					color: #333
				}
			}

			.uni-select-lay-icon {
				cursor: pointer;
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				width: 30px;
				display: flex;
				align-items: center;
				justify-content: center;

				&::before {
					content: "";
					width: 1px;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					background-color: #e5e5e5;
				}

				text {
					display: block;
					width: 0;
					height: 0;
					border-width: 12rpx 12rpx 0;
					border-style: solid;
					border-color: #bbb transparent transparent;
					transition: .3s;
				}

				&.disabled {
					cursor: no-drop;

					text {
						width: 20rpx;
						height: 20rpx;
						border: 2px solid #ff0000;
						border-radius: 50%;
						transition: .3s;
						position: relative;

						&::after {
							content: "";
							position: absolute;
							top: 50%;
							left: 0;
							width: 100%;
							height: 2px;
							margin-top: -1px;
							background-color: #ff0000;
							transform: rotate(45deg);

						}
					}
				}
			}

			&.active .uni-select-lay-icon {
				text {
					transform: rotate(180deg);
				}
			}
		}

		// options部分
		.uni-select-lay-options {
			user-select: none;
			position: absolute;
			top: calc(100% + 5px);
			left: 0;
			width: 100%;
			// height: 500rpx;
			// overflow-y: auto;
			border-radius: 4px;
			border: 1px solid rgb(229, 229, 229);
			background: #fff;
			padding: 5px 0;
			box-sizing: border-box;
			z-index: 99;

			.uni-select-lay-item {
				padding: 0 10px;
				box-sizing: border-box;
				cursor: pointer;
				line-height: 2.5;
				transition: .3s;
				font-size: 14px;
				z-index: 99;

				&.active {
					// background: #007AFF;
					// color: #fff;

					// &:hover {
					// 	background: #007AFF;
					// 	color: #fff;
					// }
				}

				&:hover {
					background-color: #f5f5f5;
				}
			}

			.nosearch {
				font-size: 16px;
				line-height: 3;
				text-align: center;
				color: #666;
			}
		}
	}
</style>