<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}}
								</view >
								<view v-if="isType == false" class="l_item_name">
									{{child.employeeName||child.constructionName}}
								</view>
								<view class="l_item_icon">
									<uni-icons
										v-show="selectedMap[child.userId] != undefined" 
										size="24" 
										type="checkmarkempty" 
										color="#007CFF"
									></uni-icons>
								</view>
								<view class="l_item_phone">
									<block v-if="isType == true">
										<view class="l_item_phone_1">{{child.vehiclePersonName}}</view>
										<view class="l_item_phone_2">
											<block 
												v-for="(va,ind) in child.vehiclePerson" 
												:key="ind"
											>
												<block v-if="va.isDriver">{{va.userPhone}}</block>
											</block>
										</view>
									</block>
									<block v-else>
										<view class="l_item_phone_1">
											<block v-if="child.contactName">
												{{child.contactName}}
											</block>
										</view>
										<view class="l_item_phone_2">
											{{child.employeePhone||child.contactPhone}}
										</view>
									</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,
			};
		},
		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;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #333333;
		scroll-view {
			width: 100%;
			height: 100%;
		}
		.left {
			width: 700rpx;
			height: 100%;
			.list_item {
				width: 100%;
				background-color: #efefef;
				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: 4rpx;
						border-radius: 3rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						.l_item_name {
							width:250rpx;
							// border: 1rpx solid red;
							margin-left: 20rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: 28rpx;
						}
						.l_item_icon{
							// border: 1rpx solid red;
							width: 65rpx;
							display: flex;
							justify-content: center;
						}
						.l_item_phone {
							width: 345rpx;
							padding-right:20rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-end;
							font-size: 24rpx;
							color: #6abae7;
							.l_item_phone_1{
								width:180rpx;
								// border: 1rpx solid red;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								color: #000000;
							}
							.l_item_phone_2{
								width: 165rpx;
								// border: 1rpx solid red;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								font-size: 24rpx;
								color: #6abae7;
							}
						}
					}
				}
			}
		}
		.right {
			width: 50rpx;
			height: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.index-words {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 25rpx;
				font-weight: bold;
				color: #6c6c6c;
			}
		}
	}
</style>
