<template>
	<view>
		<!--  兼容vue2-->
		<view class="lin-fixed" v-show="showComboxSelect" @click="gclick"></view>
		<view class="lin-combox">
			<uni-easyinput ref="uni-easyinput" v-model="checkValue" :placeholder="placeholder" type="text"
				@input="oninput" />
			<view class="lin-combox-select" v-show="showComboxSelect">
				<view class="lin-popper__arrow"></view>
				<scroll-view scroll-y="true" :style="'max-height:' + maxHeight + 'px;'">
					<view v-if="loading" class="fedback-popper_loading">{{ loadingText }}</view>
					<template v-else>
						<view v-if="!list.length" class="fedback-popper_nodata">暂无数据</view>
						<view v-else class="items" v-for="item, key in list" :key="key" :id="key"
							@click="comboxCheckHandel(item)">
							{{ item[nameKey] }}
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		emits: ['update:modelValue', 'input', 'confirm'],
		props: {
			loading: {
				type: Boolean,
				default: false
			},
			maxHeight: {
				type: String || Number,
				default: 125
			},
			valueKey: {
				type: String,
				default: 'value'
			},
			nameKey: {
				type: String,
				default: 'name'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			loadingText: {
				type: String,
				default: '加载中'
			},
			modelValue: [Number, String],
			value: [Number, String],
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				showComboxSelect: false,
				checkValue: ''
			}
		},

		created() {

		},

		mounted() {
			if (!this.$refs['uni-easyinput']) {
				console.error('请先导入uni-easyinput插件')
				return
			}
			this.watchInitialValue()
		},

		watch: {
			// #ifdef VUE2
			value(val) {

				this.checkValue = val
				this.getInitText()

			},
			// #endif
			// #ifdef VUE3
			modelValue(val) {
				this.checkValue = val
				this.getInitText()
			},
			// #endif
			checkValue(val) {},
			list: {
				handler(val) {
					// console.log(val, 'watch')
				}
			}
		},
		methods: {
			gclick() {
				this.showComboxSelect = false
				this.reset()
			},

			/*
			 * 判断如果数据源有数据直接获取，没有数据就进行监听
			 */
			watchInitialValue() {
				if (this.list.length) {
					this.getInitText()
					return
				}
				const unwatchList = this.$watch('list', (val) => {
					this.getInitText()
					unwatchList()
				})
			},

			getInitText() {

				this.checkValue = this.modelValue === null ? this.value : this.modelValue

				if (!this.list.length) return
				if (this.checkValue === '' || this.checkValue === undefined || this.checkValue === null) return
				if (this.showComboxSelect) return

				const _item = this.list.find((item) => {
					return item[this.valueKey] === +this.checkValue
				})
				if (this.nameKey) this.$refs['uni-easyinput'].val = _item[this.nameKey]
			},

			/**
			 * 重置
			 */
			reset() {

				// #ifdef VUE3
				this.$emit('update:modelValue', '')
				// #endif
				// #ifdef VUE2
				this.$emit('input', '')
				// #endif
				this.$nextTick(() => {
					this.$refs['uni-easyinput'].val = ''
				})
			},

			/**
			 * 选中事件
			 */
			comboxCheckHandel(item) {
				const text = item[this.nameKey]
				const value = item[this.valueKey]
				this.checkValue = ''
				this.checkValue = value
				this.showComboxSelect = false
				// #ifdef VUE3
				this.$emit('update:modelValue', value)
				// #endif
				// #ifdef VUE2
				this.$emit('input', value)
				// #endif
				this.$nextTick(() => {
					this.$refs['uni-easyinput'].val = text
				})
				this.$emit('confirm', value)
			},

			/**
			 * 输入事件
			 */
			oninput(val) {
				this.$emit('update:modelValue', val);
				this.$emit('input', val)
				if (!val) {
					this.showComboxSelect = false
					return
				}
				this.showComboxSelect = true
			}
		}
	}
</script>
<style lang="less">
	.lin-fixed {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
	}

	.lin-combox {
		position: relative;

		.lin-combox-select {
			position: absolute;
			top: 45px;
			left: 0;
			right: 0;
			background-color: #fff;
			z-index: 2;
			border-radius: 3px;
			padding: 3px 0;
			z-index: 8;
			background-color: #fff;
			border: 1px solid #ebeef5;
			border-radius: 6px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

			.fedback-popper_nodata {
				font-size: 13px;
				padding: 5px;
				color: #5d5959;
				text-align: center;
			}

			.lin-popper__arrow {
				position: absolute;
				top: -13px;
				left: 32px;
				z-index: 3;
				content: '';
				width: 0;
				height: 0;
				display: block;
				border-color: transparent;
				border-style: solid;
				border-width: 6px;
				border-bottom-color: #ebeef5;

				&::before {
					content: '';
					position: absolute;
					display: block;
					width: 0;
					height: 0;
					border-color: transparent;
					border-style: solid;
					border-width: 6px;
					top: 1px;
					margin-left: -6px;
					border-top-width: 0;
					border-bottom-color: #fff;
				}
			}

			.items {
				height: 35px;
				line-height: 35px;
				padding: 0 10px;
				font-size: 15px;
			}

			.fedback-popper_loading {
				text-align: center;
				font-size: 13px;
				padding: 5px;
				color: #5d5959;
			}
		}

	}
</style>