<template>
	<view class="searchs">
		<view class="item">
			<view class="title updown">
				岗位
				<view v-if="!isTrue" @click="listslice" class="up">
					收起
					<image class="img" src="../../static/images/learnpath/updown.png" mode=""></image>
				</view>
			</view>
			<view class="check">
				<view style="display: flex;flex-wrap: wrap;">
					<view :style="{marginRight:index/2!=0||index==0?'12rpx':''}" :class="indexs.includes(index)?'items':'item'" @click="searchItem(item,index)" v-for="(item,index) in posiLists" :key="index" class="item">
						{{item.positionName}}
					</view>
					<view v-if="startList.length > 9 && isTrue" class="item" @click="allList">
						<text class="text">查看更多</text>
						<image class="img" src="../../static/images/learnpath/uotdown.png" mode=""></image>
					</view>
					
				</view>
			</view>
		</view>
		<view class="item" style='margin-bottom: 180rpx;'>
			<view class="title">
				职级
			</view>
			<view class="downlist">
				<view class="title">
					<view @click="downList" class="btn">
						<text>{{bandFirst || '职级'}}</text>
						<img class="img" src="../../static/images/learnpath/uotdown.png" alt="">
					</view>
					<text class="line"></text>
					<view @click="downList" class="btn">
						<text>{{bandEnd || '职级'}}</text>
						<img class="img" src="../../static/images/learnpath/uotdown.png" alt="">
					</view>
				</view>
				<view v-if="bandShow" class="body">
					<view @click="isBand(item,index)" :class=" {'item2': bandIndexs.includes(index),'disabled-item': isDisabled(index)}" v-for="(item,index) in bandLists" :key="index" class="item">
						{{item.bandCode}}
					</view>
				</view>
			</view>
		</view>
		<view class="footers">
			<view class="btn left" @click="reach">
				重置
			</view>
			<view class="btn right" @click="goAllPath">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import { getAllPosition,getAllBandInfo } from "@/api/modules/growth.js"
	export default {
		data() {
			return {
				posiLists: [],
				startList: [],
				isTrue: true,
				indexs: [],
				posiData: [],
				bandLists: [],
				bandShow: false,
				bandIndexs: [],
				bandItem: [],
				bandFirst: '',
				bandEnd: '',
			}
		},
		onLoad() {
			this.getPosiList()
		},
		methods: {
			reach(){
				this.bandIndexs = []
				this.bandItem = []
				this.indexs = [0]
				this.posiData = [this.posiLists[0]]
				this.bandFirst = ''
				this.bandEnd = ''
			},
			goAllPath(){
				let bandCodeList = this.bandItem.map(item => item.bandCode).join(',')
				let positionIdList = this.posiData.map(item => item.positionName).join(',')
				// uni.navigateTo({
				// 	url: `/pages/learnPath/allPath?bandCodeList=${bandCodeList}&positionIdList=${positionIdList}`,
				// })
				uni.setStorageSync('bandCodeList', bandCodeList);
				uni.setStorageSync('positionIdList', positionIdList);
				uni.navigateBack({
				  delta: 1
				});
			},
			getPosiList(){
				getAllPosition().then(res=>{
					this.startList = res.data
					if(res.code == 200 ){
						const majorItem = res.data.find(item => item.isMajor === 1);
						if (majorItem) {
						  const index = res.data.indexOf(majorItem);
						  res.data.splice(index, 1);
						  res.data.unshift(majorItem);
						}
						this.posiLists = res.data
						const positionName = this.$route.query.positionId
						const positionNames = positionName.split(',');
						const matchedItemsWithIndexes = positionNames.flatMap((item, index) => {
						  // 先找到匹配的项
						  const matches = this.posiLists
						    .map((listItem, listItemIndex) => listItem.positionName === item ? { listItem, listItemIndex } : null)
						    .filter(match => match !== null);
						  return matches.map(match => ({ 
						    matchedItem: match.listItem, 
						    indexInPosiLists: match.listItemIndex 
						  }));
						});
						this.posiData = matchedItemsWithIndexes.map(item=> item.matchedItem)
						this.indexs = matchedItemsWithIndexes.map(item=> item.indexInPosiLists)
						if(this.$route.query.positionId == ''){
							this.posiData.push(this.posiLists[0])
							this.indexs.push(0)
						}
						if(this.posiLists.length > 9){
							this.posiLists = this.posiLists.slice(0, 9)
						}
					}
				})
				getAllBandInfo().then(res=>{
					if(res.code == 200){
						this.bandLists = res.data
					}
				})
			},
			allList(){
				this.posiLists = this.startList
				this.isTrue = false
			},
			listslice(){
				this.posiLists = this.startList.slice(0, 9)
				this.isTrue = true
			},
			searchItem(item,index){
				if(index == 0){
					return
				}
				const indexToRemove = this.indexs.indexOf(index);
				if (indexToRemove !== -1) {
				    this.indexs.splice(indexToRemove, 1);
				} else {
				    this.indexs.push(index);
				}
				console.log(this.indexs,'this.indexs')
				this.posiData = this.indexs.map(index => this.startList[index]);
			},
			downList(){
				this.bandShow = !this.bandShow
			},
			isDisabled(index) {
			    if (this.bandIndexs.length == 1) {
			      const firstClickIndex = this.bandIndexs[0];
			      const allowedRangeEnd = firstClickIndex + 2;
			      return index < firstClickIndex - 2 || index > allowedRangeEnd;
			    }
				if (this.bandIndexs.length == 2) {
				  const firstClickIndex = this.bandIndexs[0];
				  const allowedRangeEnd = firstClickIndex + 2;
				  return index < firstClickIndex - 1 || index > allowedRangeEnd;
				}
				if (this.bandIndexs.length == 3) {
					const firstClickIndex = Math.min(...this.bandIndexs);
					const allowedRangeEnd = Math.max(...this.bandIndexs);
				  return index < firstClickIndex || index > allowedRangeEnd;
				}
			    return false;
			},
			isBand(item,index){
				console.log(this.bandIndexs.length)
				if (this.bandIndexs.length == 1) {
					const firstClickIndex = this.bandIndexs[0];
					const allowedRangeEnd = firstClickIndex + 2;
					if (index < firstClickIndex - 2 || index > allowedRangeEnd) {
						return;
					}
				}
				if (this.bandIndexs.length == 2) {
					const firstClickIndex = this.bandIndexs[0];
					const allowedRangeEnd = firstClickIndex + 2;
					if (index < firstClickIndex - 1 || index > allowedRangeEnd) {
						return;
					}
				}
				if (this.bandIndexs.length == 3) {
					const firstClickIndex = Math.min(...this.bandIndexs);
					const allowedRangeEnd = Math.max(...this.bandIndexs);
				  if (index < firstClickIndex  || index > allowedRangeEnd) {
				  	return;
				  }
				}
				this.bandIndexs.sort((a, b) => a - b);
				 if (this.bandIndexs.length === 3 && this.bandIndexs.includes(index) && this.bandIndexs.indexOf(index) == 1) {
					// 删除最后一个元素
					this.bandIndexs.sort((a, b) => a - b);
					this.bandIndexs.pop();
					this.bandItem = this.bandIndexs.map(index => this.bandLists[index])
					this.bandItem = this.bandItem.sort((a, b) => parseInt(a.bandId, 10) - parseInt(b.bandId, 10));
					this.bandFirst = this.bandItem[0].bandCode
					if(this.bandItem && this.bandItem.length > 1){
						this.bandEnd = this.bandItem[this.bandItem.length - 1].bandCode
					}
					return;
				}
				let currentIndex = index;
				let firstClickIndex = this.bandIndexs[0];
				
				if (this.bandIndexs.length === 0) {
					this.bandIndexs.push(currentIndex);
					this.bandItem = this.bandIndexs.map(index => this.bandLists[index])
					this.bandItem = this.bandItem.sort((a, b) => parseInt(a.bandId, 10) - parseInt(b.bandId, 10));
					this.bandFirst = this.bandItem[0].bandCode
					return;
				}
			
				// 确保currentIndex和firstClickIndex按顺序排列
				// if (currentIndex < firstClickIndex) {
				// 	[currentIndex, firstClickIndex] = [firstClickIndex, currentIndex];
				// }
				// 检查是否有连续的未选择项，并自动填充
				// for (let i = firstClickIndex + 1; i < currentIndex; i++) {
				// 	if (!this.bandIndexs.includes(i)) {
				// 		this.bandIndexs.splice(this.bandIndexs.indexOf(i - 1) + 1, 0, i);
				// 	}
				// }
					
				// const start = Math.min(firstClickIndex, currentIndex);
				// const end = Math.max(firstClickIndex, currentIndex);
				
				// this.bandIndexs = this.bandIndexs.filter(index => index < start || index > end);
				
				// for (let i = start; i <= end; i++) {
				//     if (!this.bandIndexs.includes(i)) {
				//         this.bandIndexs.push(i);
				//     }
				// }
				
				// 添加或移除当前点击的index
				// const indexToRemove = this.bandIndexs.indexOf(currentIndex);
				// if (indexToRemove !== -1) {
				// 	this.bandIndexs.splice(indexToRemove, 1);
				// } else {
				// 	this.bandIndexs.push(currentIndex);
				// }
				const indexToRemove = this.bandIndexs.findIndex(index => index === currentIndex);
				if (indexToRemove !== -1) {
				    this.bandIndexs.splice(indexToRemove, 1);
				} else {
				    // 如果索引不存在于数组中，则需要检查是否需要填充连续索引
				    const start = Math.min(firstClickIndex, currentIndex);
				    const end = Math.max(firstClickIndex, currentIndex);
				    console.log(start,end,'end')
				    for (let i = start; i <= end; i++) {
				        if (!this.bandIndexs.includes(i)) {
				            this.bandIndexs.push(i);
				        }
				    }
				}
				if(this.bandIndexs.length == 0){
					this.bandFirst = ''
					this.bandItem = []
					return
				}
				if(this.bandIndexs.length == 1){
					this.bandEnd = ''
				}
				this.bandItem = this.bandIndexs.map(index => this.bandLists[index])
				this.bandItem = this.bandItem.sort((a, b) => parseInt(a.bandId, 10) - parseInt(b.bandId, 10));
				this.bandFirst = this.bandItem[0].bandCode
				if(this.bandItem && this.bandItem.length > 1){
					this.bandEnd = this.bandItem[this.bandItem.length - 1].bandCode
				}
			},
		}
	}
</script>

<style>
.searchs{
	background: #fff;
	min-height: 100vh;
	overflow: auto;
	padding: 56rpx 56rpx 0 38rpx;
	.item{
		
		.downlist{
			margin: 0 auto;
			.body{
				display: flex;
				flex-wrap: wrap;
				.item{
					margin-right: 18rpx;
					width: 190rpx;
					margin-bottom: 28rpx;
					height: 60rpx;
					background: #F7F7F7;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					text-align: center;
					line-height: 60rpx;
				}
				.item2{
					background: #EAF2FF;
					border: 2rpx solid #387DF7;
					font-weight: 400;
					font-size: 28rpx;
					color: #387DF7;
				}
				.disabled-item {
				  background-color: #ccc;
				}
			}
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
				.line{
					width: 16rpx;
					border: 2rpx solid #979797;
					margin-left: 6rpx;
					margin-right: 6rpx;
				}
				.btn{
					width: 316rpx;
					height: 60rpx;
					background: #F7F7F7;
					border-radius: 34rpx;
					padding: 0 32rpx 0 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					.img{
						width: 20rpx;
						height: 10rpx;
					}
				}
			}
		}
		.updown{
			display: flex;
			justify-content: space-between;
			.up{
				margin-right: 18rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				.img{
					width: 24rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}
		}
		.title{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			margin-bottom: 34rpx;
		}
			.check{
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				margin-bottom: 34rpx;
				.item{
					margin-bottom: 28rpx;
					width: 240rpx;
					height: 60rpx;
					padding: 0 30rpx 0 34rpx;
					border-radius: 34rpx;
					background: #F7F7F7;
					line-height: 60rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					.text{
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 40rpx;
					}
					.img{
						width: 24rpx;
						height: 16rpx;
						margin-left: 14rpx;
					}
				}
				.items{
					width: 240rpx;
					height: 60rpx;
					background: #EAF2FF;
					border-radius: 34rpx;
					border: 1rpx solid #387DF7;
					font-weight: 400;
					font-size: 28rpx;
					color: #387DF7;
				}
			}
		
	}
	.footers{
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0%);
		display: flex;
		justify-content: center;
		/* align-items: center; */
		background: #fff;
		.btn{
			width: 284rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			text-align: center;
		}
		.left{
			border: 2rpx solid #387DF7;
			font-weight: 500;
			font-size: 28rpx;
			color: #387DF7;
			margin-right: 36rpx;
		}
		.right{
			background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}
</style>
