<template>

	<view :style="{top:(styles.top + styles.height + 10 )+'px'}" class="header">
		<view class="sele_car">
			<view @click="backFn()" class="flex ac">
				<uni-icons type="back" size="30"></uni-icons>
				<!-- <uni-icond  type="back" size="30"></uni-icond> -->
			</view>
			<view class=" flex sele_car_right">
				<view @click="chooseLocation('start')" class=" Padding flex ac flexone">
					<view class="yuan" />
					<view class="flexone margin size">{{Route.start.title}}</view>
				</view>
			</view>
		</view>
		<view  class="filter">
			<view v-for="(item,index) in menuList" :key='index' class="filter_item">
				<view @click="seleFilter(item,index)"> {{ item.value?item.value.split('/')[0]:item.title}} </view>
				<view :style="{maxHeight:item.SublistOpen?'200rpx':'0rpx'}" class="conditions">
					<view :style="{color:item.value?item.value.split('/')[0] == items.lable?'#666666':'#bbbbbb':'#bbbbbb'}" @click="filterItemSele(index,indexs)" v-for="(items,indexs) in item.Sublist" :key='indexs' style="margin-bottom: 10rpx; font-size: 25rpx;">{{items.lable}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	export default {
		props: {
			Route: {
				type: Object,
				default: () => {
					return {}
				}
			},
			polyline: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			polyline: function(n, o) {
				if (n.length !== 0) {
					this.isShow.conditions = true
				} else {
					this.isShow.conditions = false
				}
			}
		},
		data() {
			return {
				styles: {},
				isShow: {
					conditions: false
				},
				header:null,
				menuList: [
					// {
					// 	title: '距离',
					// 	value: '5KM/5',
					// 	field: 'juLi',
					// 	SublistOpen: false,
					// 	Sublist: [{
					// 		lable: '5KM',
					// 		value: '5'
					// 	}, {
					// 		lable: '20KM',
					// 		value: '20'
					// 	}, {
					// 		lable: '30KM',
					// 		value: '30'
					// 	},{
					// 		lable: '50KM',
					// 		value: '50'
					// 	}]
					// },
					{
						title: '全类型',
						value: '全类型/2',
						field: 'highSpeed',
						SublistOpen: false,
						Sublist: [
							{
								lable: '全类型',
								value: '2'
							},
							{
							lable: '高速',
							value: '1'
						}, {
							lable: '非高速',
							value: '0'
						}
						
						]
					}
				]
			}
		},
		mounted() {
			this.styles = uni.getMenuButtonBoundingClientRect();
			console.log(this.styles);
			const query = uni.createSelectorQuery().in(this);
			query.select('.header').boundingClientRect(data => {
			  console.log("得到布局位置信息" + JSON.stringify(data));
			  this.header = data
			  console.log("节点离页面顶部的距离为" + data.top);
			}).exec();
		},
		created() {
			this.getConditionMenu();
		
		},
		methods: {
			getElement(){
				return this.styles.top + this.styles.height + 10 + this.header.height
			},
			filterItemSele(index,indexs){
				this.menuList[index].value = `${this.menuList[index].Sublist[indexs].lable}/${this.menuList[index].Sublist[indexs].value}`;
				this.menuList[index].SublistOpen=false;
				console.log(this.datassFn(),'/-/-/');
				if(index==1){
						this.$emit('mapEventListeners','localScreen',this.datassFn())
				}else{
						this.$emit('mapEventListeners','apiScreen',this.datassFn())
				}
			},
			getConditionMenu() {
				oilSiteApi.getConditionMenu().then(res => {
					if (res.code !== 20000) return
					Object.keys(res.data).forEach((item,index)=>{
						let data = {
							title: index==0?'全渠道':'油品',
							value: index==0?'全渠道/':'0#/0#',
							field: index==0?'siteChannel':'oilProductCode',
							SublistOpen: false,
							Sublist: []
						}
						res.data[item].forEach(items=>{
							data.Sublist.push({
								lable:index==0?items.name:items.id,
								value:items.id
							})
						})
						this.menuList.push(data)
					})
					this.menuList[1].Sublist.unshift({
						lable:'全渠道',
						value:''
					});
					[this.menuList[0],this.menuList[1],this.menuList[2]]=[this.menuList[2],this.menuList[0],this.menuList[1]]
				})
			},
			datassFn(){
				let data = {}
				this.menuList.forEach((item,index)=>{
					data[item.field] = item.value?item.value.split('/')[1]:''
				})
				return data
			},
			seleFilter(e, w) {
				this.menuList.forEach((item,index)=>{
					if(w==index) return
					item.SublistOpen = false
				})
				e.SublistOpen = !e.SublistOpen;
				this.$emit('closeFooterScroll')
			},
			chooseLocation(e) {
				uni.navigateTo({
					url: '/BagStation/pages/newRoutePlanning/chooseLocation?type=' +
						`${e}/${this.Route.start.latitude},${this.Route.start.longitude}`,
						fail(e) {
							console.log(e,'****************************')
						}
				})
			},
			backFn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.conditions {
		position: absolute;
		background-color: #FFFFFF;
		width: 100%;
		max-height: 200rpx;
		top: 68rpx;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		/* padding: 21rpx 0; */
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		overflow: auto;
		transition: max-height 0.3s, opacity 0.3s;
		opacity: 1;
	}

	.filter_item {
		flex: 1;
		background-color: #FFFFFF;
		border-radius: 10px;
		margin-top: 30rpx;
		padding: 24rpx 0;
		text-align: center;
		position: relative;
		margin-right: 20rpx;
	/* 	border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px; */
	}
	.filter :last-child{
		margin-right: 0;
	}
	.filter {
		font-size: 28rpx;
		width: 100%;
		display: flex;
		/* gap: 20rpx; */
		color: #666666;
	}

	.colorb {
		color: #BBBBBB;
	}

	.Padding {
		padding: 0 28rpx;
	}

	.addressInput {
		background: #F0F0F0;
		border-radius: 10px;
	}

	.textoverflow {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.size {
		font-size: 28rpx;
		color: #666666;
	}

	.margin {
		margin: 0 28rpx;
	}

	.flexone {
		flex: 1;
	}

	.yuan {
		width: 20rpx;
		height: 20rpx;
		background: #2E8EF7;
		border-radius: 50%;
	}

	.sele_car_right {
		flex-direction: column;
		flex: 1;
		/* padding: 0 27.2rpx; */
		padding-left: 27.2rpx;
	}

	.flex {
		display: flex;
	}

	.jc {
		justify-content: center;
	}

	.ac {
		align-items: center;
	}

	.sele_car {
		/* height: 194rpx; */
		background: #FFFFFF;
		border-radius: 10px;
		padding: 18rpx 32rpx;
		display: flex;
	}

	.header {
		width: 100vw;
		position: absolute;
		z-index: 999999;
		padding: 0 44rpx;
	}
</style>
