<template>
  <sh-popup :filterPopup="filterPopup" maxHeight="700rpx" ref="popup" type="bottom">
	<template #content>
	<view class="picker-box">
		<!-- {{provinceArray}} -->
		<view class="top getHeight" id="top">
			<text>请选择所在地区</text>
			<text class="iconfont close" @click.stop="close">&#xe7fa;</text>
		</view>
		<!-- :scroll-into-view="scrollIntoView" -->
		<scroll-view scroll-x="true" :show-scrollbar="false" class="nav getHeight" id="nav">
			<view v-for="(item, index) in list" :class="areaIndex == index ? 'nav-item nav-item-a' : 'nav-item'"
			 :key="index" :id="'area' + index">
				<text>{{ item }}</text>
			</view>
			<view class="bottomBorder"></view>
		</scroll-view>
		<scroll-view scroll-y="true" scroll-with-animation scroll-anchoring :scroll-into-view='id2' @scroll="scroll"
		 :show-scrollbar="false" class="swiper-list">
			<view class="area-item" v-for="(item, index) in getList" :key="index" :id="'area' + index">
				<text class="area-item-id area-item-id-sticky area-item-id" :id='item._id'>{{ item._id }}</text>
				<view class="swiper-list2">
					<text class="area-item-name area-item-name-a area-item-name"
					 v-for="(item2, index2) in item.data" :key="index2">
						<text class="iconfont">&#xe674;</text>
						{{ item2.name }}
					</text>
				</view>
			</view>
		</scroll-view>
		<view class="slider-right">
			<view class="slider-list">
				<text class="slider-item" v-for="(item, index) in provinceArray"
				 :key="index" @click="sliderSelect(item._id)">{{ item._id }}</text>
			</view>
		</view>
	</view>
		</template>
  </sh-popup>
</template>

<script>
  import shPopup from '@/components/sh-popup/sh-popup.vue';
  import addressData from './address.js'
  export default {
	  components:{
		  shPopup
	  },
	props:{
		filterPopup: {
			type: Boolean,
			default: ''
		},
	},
    data() {
      return {
		  list: ['请选择', '', ''],
		  areaIndex: 0,
		  id2: ''
      }
    },
    mounted() {
    
    },
    computed: {
		provinceArray() {
			return addressData
		},
		getList() {	
			return this.provinceArray
		},
    },
    methods: {
		sliderSelect(id) {
			this.id2 = id
			console.log(this.id2)
		},
		scroll(e) {
			console.log(e)
		},

    }
  }
</script>


<style lang="scss" scoped>
  .picker-box {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-top-right-radius: 24rpx;
    border-top-left-radius: 24rpx;
	height: 700rpx;
	.nav {
		white-space: nowrap;
		width: 100%;
		position: relative;
		padding: 0rpx 20rpx;

		.bottomBorder {
			position: absolute;
			width: 60rpx;
			height: 6rpx;
			background-image: linear-gradient(to right, red, white);
			bottom: 0rpx;
			left: 17rpx;
			transition: left 0.5s ease;
		}

		.nav-item {
			padding: 10rpx 20rpx;
			display: inline-block;
			text-align: center;
			font-size: 28rpx;
		}

		.nav-item-a {
			color: rgb(201, 22, 35);
		}
	}
		.swiper-list {
			height: 100%;
			display: flex;
			flex-direction: column;
			position: relative;
		.area-item {
			font-size: 28rpx;

			.area-item-id {
				padding: 20rpx 44rpx;
				border-bottom: 1rpx solid #f0ecf2;
				font-weight: bold;
				display: block;
			}

			.area-item-id-sticky {
				position: sticky;
				top: 0;
				background-color: #FFFFFF;
				transition: all 0.1s;

			}

			.swiper-list2 {
				display: flex;
				flex-direction: column;


				.area-item-name {
					padding: 20rpx 40rpx 0;
					font-weight: 400;

					.iconfont {
						color: rgb(201, 22, 35);
						margin-right: 10rpx;
					}
				}

				.area-item-name-a {
					color: rgb(201, 22, 35);
				}
			}
		}
	}
	.slider-right {
	
				position: absolute;
				right: 0rpx;
				top: 80rpx;
				bottom: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
	
				.slider-list {
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #ebe8ee;
					border-radius: 20rpx;
				}
	
				.slider-item {
					padding: 10rpx 10rpx;
					font-size: 18rpx;
					color: #24292E;
	
					&:first-child {
						padding-top: 20rpx;
					}
	
					&:last-child {
						padding-bottom: 20rpx;
					}
				}
			}
  }
</style>
