<template>
	<view class="long-indexedList">
		<view class="left">
			<scroll-view scroll-y scroll-with-animation @scroll="scroll" :scroll-into-view="cIndex">
				<view class="list_item" v-for="(item, index) in list" :key="index">
					<block v-if="item.list.length > 0">
						<view class="item-label" :id="`cid${ index }`">{{ item.char }}</view>
						<view class="list-container">
							<view v-for="(child, cIndex) in item.list" :key="cIndex" class="list-item" @click="itemClick(child)">
								<view v-if="isType == true" class="l_item_name" >
									{{child.vehicleCode}}
									<uni-icons v-show="selectedMap[child.userId] != undefined" size="24" style="margin-left:20rpx;" type="checkmarkempty" color="#007CFF"></uni-icons>
								</view >
								<view v-if="isType == false" class="l_item_name">
									{{child.employeeName||child.constructionName}}
									<uni-icons v-show="selectedMap[child.userId] != undefined" size="24" style="margin-left:20rpx;" type="checkmarkempty" color="#007CFF"></uni-icons>
								</view>
								<view class="l_item_phone">
									<block v-if="isType == true">
										<view>{{child.vehiclePersonName}}</view>
										<block v-for="(va,ind) in child.vehiclePerson" :key="ind">
											<block v-if="va.isDriver">{{va.userPhone}}</block>
										</block>
									</block>
									<block v-else>
										<text v-if="child.contactName" style="color:#333;margin-right: 20rpx;">{{child.contactName}}</text>
										{{child.employeePhone||child.contactPhone}}
									</block>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<view class="right">
			<view 
				class="index-words" 
				:class="{ 'index-words-active': index === activeIndex }"
				v-for="(item, index) in list" 
				:key="item.char" 
				@click="indexedClick(index)"
			>
				<view v-if="item.list.length > 0||item.vehicleGpsList.length > 0">
					{{ item.char }}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			selectList: {
				type: Array,
				default: () => []
			},
			multi: {
				type: Boolean,
				default: false
			},
			isType: { //true自有车  false外请车
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				activeIndex: 0,
				cIndex: '',
				topList: [],
				selectedMap: {},
				flag: false,
			};
		},
		// watch: { 
		// 	//haveTask 为接收参数的名称 
		// 	selectList: { 
		// 		handler(item,index) { 
		// 			console.log('变了',item,index)
		// 		}, deep: true ,// 深度监听父组件传过来对象变化 
		// 	} 
		// },
		methods: {
			indexedClick(index) {
				this.$nextTick(() => {
					this.cIndex = `cid${ index }`
					this.flag = true
				})
				this.cIndex = ''
				this.activeIndex = index
			},
			itemClick(item) {
				if (!this.multi) {
					Object.keys(this.selectedMap).forEach(key => {
						this.$delete(this.selectedMap, key)
					})
				};
				if (this.selectedMap[item.userId] != undefined) {
					this.$delete(this.selectedMap, item.userId)
				} else {
					this.$set(this.selectedMap, item.userId, item)
				};
				this.$emit('change', this.getValues())
			},
			selectCar(id) {
				this.$emit('selectCar', id)
			},
			clearSelectList() {
				this.selectedMap = {};
			},
			scroll(e) {
				if (this.flag) {
					this.flag = false
					return
				}
				let scrollTop = e.target.scrollTop
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i]
					let h2 = this.topList[i + 1]
					if (scrollTop > h1 && scrollTop < h2) {
						this.activeIndex = i
					}
				}
			},
			getNodesInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.item-label').boundingClientRect().exec(res => {
					let nodes = res[0]
					this.topList = nodes.map(item => item.top)
				})
			},
			getValues() {
				return Object.values(JSON.parse(JSON.stringify(this.selectedMap)))
			}
		},
		mounted() {
			this.getNodesInfo()
			if (this.selectList) {
				setTimeout(() => {
					this.selectList.forEach(item => {
						this.$set(this.selectedMap, item.userId, item)
						console.log('this.selectedMap', this.selectedMap)
					})
				}, 100)
			}
		}
	}
</script>
<style>
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
</style>
<style lang="scss" scoped>
	.long-indexedList {
		height: 100%;
		width: 750rpx;
		// border: 1rpx solid red;
		background-color: #F3F4F6;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #333333;

		scroll-view {
			width: 100%;
			height: 100%;
		}

		.left {
			width: 90%;
			margin-left: 5%;
			height: 100%;

			.list_item {
				width: 100%;
				display: flex;
				flex-direction: column;

				.item-label {
					width: 100%;
					margin-left: 32rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-weight: bold;
				}

				.list-container {
					width: 100%;
					display: flex;
					flex-direction: column;
					.list-item {
						width: 100%;
						height: 80rpx;
						background-color: white;
						margin-bottom: 10rpx;
						border-radius: 3rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.l_item_name {
							margin-left: 32rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 27rpx;
							// font-weight: bold;
						}

						.l_item_phone {
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 28rpx;
							color: #3476FE;
							margin-right: 20rpx;

							view {
								color: #000000;
								margin-right: 30rpx;
							}
						}
					}
				}

			}

			.blank {
				font-size: 24rpx;
				color: #999999FF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.blank image {
				width: 300rpx;
				height: 240rpx;
				margin-bottom: 40rpx;
			}
		}

		.right {
			width: 5%;
			height: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.index-words {
				// border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					height: 50rpx;
					width: 50rpx;
					font-size: 20rpx;
					font-weight: bold;
					color: #6c6c6c;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			// .index-words-active{
			// 	background-color: #c1e2d8;
			// 	color: white;
			// }
		}
	}
</style>
