<template>
	<!-- 首字母检索 -->
	<view>
		<view class="letter touch" @touchstart.stop="searchStart" @touchmove.stop="searchMove" @touchend.stop="searchEnd">
			<!-- 右边字母数据数据 触摸事件-->
			<view class="letter-item" v-for="item in options" :key="item.key">{{item.key}}</view>
			<!-- 左边字母跟右边字母true时 屏幕中心显示选中的首字母-->
		</view>
		<!-- 居中首字母样式 -->
		<view class="cont-letter" v-if="isShowLetter">
			{{showLetter}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Array
			},
			length: {
				type: Number
			}
		},
		data() {
			let windowHeight = uni.getSystemInfoSync().windowHeight
			let startHeight = windowHeight * 0.1
			return {
				startHeight,
				letterHeight: windowHeight - startHeight,
				isShowLetter: false,
				showLetter: ''
			}
		},
		computed: {
			letters() {
				const arr = []
				for (let key in this.options) {
					arr.push(this.options[key])
				}
				return arr.key
			}
		},
		methods: {
			getLetter(pageY) {
				let index = ((pageY - this.startHeight) / this.letterHeight) * this.options.length
				return this.options[parseInt(index)].key
			},
			/* 检索字母拖动开始 */
			searchStart(e) {
				let pageY = e.touches[0].clientY;
				this.showLetter = this.getLetter(pageY);
				this.$emit("touchmove", this.showLetter)
				this.isShowLetter = true
				return false
			},
			/* 检索字母拖动中 */
			searchMove(e) {
				let pageY = e.touches[0].clientY;
				this.showLetter = this.getLetter(pageY);
				this.$emit("touchmove", this.showLetter)
				return false
			},
			/* 检索字母拖动结束 */
			searchEnd() {
				setTimeout(() => {
					this.isShowLetter = false
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 首字母样式 */
	.letter {
		position: absolute;
		right: 0;
		top: 10%;
		width: 30px;
		height: 90%;
		text-align: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		color: #666;
		background-color: transparent;
		z-index: 1;
	}

	/* 右边首字母样式 */
	.touch {
		color: #666;
		font-size: 28rpx;
	}

	.letter-item {
		color: #1B66FF;
		flex-grow: 1;
	}

	/* 居中显示的选中首字母 */
	.cont-letter {
		background-color: #666;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 50%;
		left: 50%;
		margin: -50px;
		width: 100px;
		height: 100px;
		border-radius: 10px;
		font-size: 26px;
		z-index: 1
	}
</style>
