<template>
	<view class="long-indexedList">
		<view class="left">
			<scroll-view 
				scroll-y 
				scroll-with-animation 
				scroll-y="true" 
				:refresher-triggered="triggered"
				@refresherrefresh="onRefresh" 
				refresher-enabled="true" 
				@scroll="scroll" 
				:scroll-into-view="cIndex" 
				@scrolltolower="onScrolltolower"
			>
				<!-- 人员管理 -->
				<view v-if="type=='user'">
					<view class="list_item" v-for="(item, index) in list" :key="index">
						<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0">{{ item.char }}</view>
						<view class="list-container">
							<view 
								v-for="(child, cIndex) in item.list" 
								:key="cIndex" 
								class="list-item"
								@click="itemClick(child)"
							>
								<view class="l_item_name2">
									<view class="l_item_name2_1">
										<block v-if="userPx">
											[{{child.roleName}}]
										</block>
										<block v-if="!userPx">
											{{child.employeeName}}
										</block>
									</view>
									<view class="l_item_name2_icon">
										<uni-icons
											v-show="selectedMap[child.id] != undefined"
											size="24" 
											type="checkmarkempty" 
											color="#007CFF"
										></uni-icons>
									</view>
									<view class="l_item_name2_2">
										<block v-if="!userPx">
											[{{child.roleName}}]
										</block>
										<block v-if="userPx">
											{{child.employeeName}}
										</block>
									</view>
								</view>
								<view class="l_item_phone">
									{{child.employeePhone}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 车辆管理 -->
				<view v-if="type=='car'">
					<view class="list_item" v-for="(item, index) in list" :key="index">
						<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0">{{ item.char }}</view>
						<view class="list-container">
							<view 
								v-for="(child, cIndex) in item.list" 
								:key="cIndex" 
								class="list-item"
								@click="itemClick(child)"
							>
								<view class="l_item_name2">
									<view class="l_item_name2_1">
										{{child.vehicleCode}}
									</view>
									<view class="l_item_name2_icon">
										<uni-icons
											v-show="selectedMap[child.id] != undefined" 
											size="24" 
											type="checkmarkempty" 
											color="#007CFF"
										></uni-icons>
									</view>
									<view class="l_item_name2_2" v-if="child.vehiclePersonName!=null">
										{{child.vehiclePersonName}}
									</view>
								</view>
								<view class="l_item_phone" v-if="child.vehiclePersonPhone!=null">
									{{child.vehiclePersonPhone}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 工程管理 -->
				<view v-if="type=='project'">
					<view class="list_item" v-for="(item, index) in list" :key="index">
						<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0" >{{ item.char }}</view>
						<view class="list-container">
							<view 
								v-for="(child, cIndex) in item.list" 
								:key="cIndex" 
								class="list-item"
								@click="itemClick(child)"
							>
								<view class="l_item_name2">
									<view class="l_item_name2_1">
										{{child.projectName}}
									</view>
									<view class="l_item_name2_icon">
										<uni-icons
											v-show="selectedMap[child.id] != undefined" 
											size="24" 
											type="checkmarkempty" 
											color="#007CFF"
										></uni-icons>
									</view>
									<view class="l_item_name2_2" v-if="child.projectPeoples.length>0">
										{{child.projectPeoples[0].projectPersonName}}
									</view>
								</view>
								<view class="l_item_phone"  v-if="child.projectPeoples.length>0">
									{{child.projectPeoples[0].projectPersonPhone}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 施工单位 -->
				<view v-if="type=='companyInfo'">
					<view class="list_item" v-for="(item, index) in list" :key="index">
						<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0" >{{ item.char }}</view>
						<view class="list-container">
							<view 
								v-for="(child, cIndex) in item.list" 
								:key="cIndex" 
								class="list-item"
								@click="itemClick(child)"
							>
								<view class="l_item_name2">
									<view class="l_item_name2_1">
										{{child.constructionName}}
									</view>
									<view class="l_item_name2_icon">
										<uni-icons
											v-show="selectedMap[child.id] != undefined" 
											size="24" 
											type="checkmarkempty" 
											color="#007CFF"
										></uni-icons>
									</view>
									<view class="l_item_name2_2">
										{{child.contactName}}
									</view>
								</view>
								<view class="l_item_phone">
									{{child.contactPhone}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 任务车型 -->
				<view v-if="type=='taskCar'">
					<view class="list_item" v-for="(item, index) in list" :key="index">
						<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0" >{{ item.char }}</view>
						<view class="list-container">
							<view 
								v-for="(child, cIndex) in item.list" 
								:key="cIndex" 
								class="list-item"
								@click="itemClick(child)"
							>
								<view class="l_item_name2">
									<view class="l_item_name2_1">
										{{child.name}}
									</view>
									<view class="l_item_name2_icon">
										<uni-icons
											v-show="selectedMap[child.id] != undefined" 
											size="24" 
											type="checkmarkempty" 
											color="#007CFF"
										></uni-icons>
									</view>
									<view class="l_item_name2_2">
										<!-- {{child.contactName}} -->
									</view>
								</view>
								<view class="l_item_phone">
									<!-- {{child.contactPhone}} -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottomTitle" v-if="is_no">
					<text>没有更多数据了 ~</text>
				</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)"
			>	
				<block v-if="item.list.length>0">
					{{ item.char }}
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			multi: {
				type: Boolean,
				default: false
			},
			is_no: {
				type: Boolean,
				default: false
			},
			triggered: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: ''
			},
			userPx:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				activeIndex: 0,
				cIndex: '',
				topList: [],
				flag: false,
				selectedMap: {},
				is_nos:false
			};
		},
		methods: {
			// 下拉刷新
			onRefresh() {
				this.$emit('onRefresh')
			},
			// 上拉加载
			onScrolltolower() {
				console.log('加载')
				this.is_nos=true
				// this.$emit('Scrolltolower')
			},
			indexedClick(index) {
				this.$nextTick(() => {
					this.cIndex = `cid${ index }`
					this.flag = true
				})
				this.cIndex = ''
				this.activeIndex = index
			},
			itemClick(item) {
				this.$emit("onclick", item)
			},
			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()
		}
	}
</script>
<style>
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
</style>
<style lang="scss" scoped>
	.long-indexedList {
		height: 90vh;
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #333333;
		scroll-view {
			width: 100%;
			height: 100%;
		}
		.bottomTitle {
			width: 100%;
			height: 70rpx;
			color: #666666;
			font-size: 24rpx;

			display: flex;
			align-items: center;
			justify-content: center;
		}
		.left {
			width: 700rpx;
			height: 100%;
			.list_item {
				width: 100%;
				display: flex;
				flex-direction: column;
				background-color: #efefef;
				.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_name2 {
							// border: 1rpx solid red;
							width: 495rpx;
							padding-left: 20rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 28rpx;
							flex: 1;
							.l_item_name2_1{
								// border: 1rpx solid red;
								width:250rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
							.l_item_name2_icon{
								// border: 1rpx solid red;
								width: 65rpx;
								display: flex;
								justify-content: center;
							}
							.l_item_name2_2{
								// border: 1rpx solid red;
								width: 180rpx;
								color: #8ca1b0;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								flex:1;
							}
						}
						.l_item_phone{
							// border: 1rpx solid red;
							width: 165rpx;
							padding-right:20rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-end;
							font-size: 24rpx;
							color: #6abae7;
						}
					}
					.active {
						background: #FFF7EE;
						border: 2upx solid #FFE4C6;
						color: #F8571A;
					}
				}
			}
		}
		.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;
			}

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