<template>
	<view>
		<view :class="['scroll-popup', data.isShow ? 'scroll-open' : '', animation ? 'scroll-animation' : '']">
			<view class="scroll-box">
				<view class="scroll-top">
					<view class="scroll-top-left" @click="getResult('cancel')">取消</view>
					<view class="scroll-top-right" v-if="data.checkArr.length == data.tabList.length" @click="getResult('confirm')">确定</view>
				</view>
				<scroll-view class="scroll-title" scroll-x="true" :scroll-left="data.scrollViewWidth" scroll-with-animation>
					<view class="scroll-title-item-box" v-for="(i, e) in data.tabList" @click="checkTab(e)" :key="e">
						<view v-if="data.tabId >= e" :id="'se-' + e" :class="['scroll-title-item', data.tabId == e ? ' scroll-title-item-true' : '']">
							{{ data.checkArr[e] ? data.checkArr[e].label : i.title }}
							<image class="span" :src='data.nextImg' v-if="data.tabId > e"></image>
						</view>
					</view>
				</scroll-view>
				<scroll-view class="scroll-view_H" scroll-y="true">
					<view class="scroll-view-grid-box" v-if="data.checkBox && data.checkBox.length && data.checkBox[data.tabId] && data.checkBox[data.tabId].length">
						<view v-for="(item, index) in data.checkBox[data.tabId]" :key="index" @click="check(index)" :class="data.checkArr && data.checkArr[data.tabId] && data.checkArr[data.tabId].label == item.label ? 'scroll-view-item-true' : 'scroll-view-item'">
							{{ item.label || "" }}
						</view>
					</view>
					<view class="scroll-view-noBox" v-else>
						<image :src="data.noDataImg"></image>
						<view class="text">暂无数据</view>
					</view>
				</scroll-view>
				<view v-show="safeArea" class="scroll-temp"></view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view v-show="data.isShow" class="scroll-mask"></view>
	</view>
</template>

<script setup>
	import noData from './static/not.png'
	import next from './static/next.png'
	import { ref,watch,computed } from "vue";
	import { getClientRect } from "../../libs/style";
	
	const props = defineProps({
		//是否开启动画
		animation: {
			type: Boolean,
			default: true,
		},
		//是否开启安全条
		safeArea: {
			type: Boolean,
			default: false,
		},
		pid: {
			type: [String,Number],
			default: 0
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","change"]);
	
	let data = ref({
		isShow: false,
		checkBox: [],
		noDataImg: '',
		nextImg: '',
		tabId: 0, //计算当前顶部滑块id
		checkArr: [],
		id: 0, //通tabId，他们2的区别是，id先赋值，tabId在数据请求成功后才会赋值
		tabList: [{
				title: '选择所在省',
				id: 0
			},
			{
				title: '选择所在市',
				id: 1
			},
			{
				title: '选择所在区县',
				id: 2
			}
		],
		scrollViewWidth: 0,
		elWidth: 0
	});
	
	data.value.nextImg   = next;
	data.value.noDataImg = noData;
	
	const open = ()=>{
		data.value.isShow = true;
		init();
	}
	
	const close = ()=>{
		data.value.isShow = false;
	}
	
	const init = ()=>{
		data.value.id = 0;
		data.value.tabId = 0;
		data.value.checkBox = [];
		data.value.checkArr = [];
		getClientRect('.scroll-title').then(res=>{
			data.value.scrollViewWidth = Math.round(res.width);
		});
		
		getData();
	}
	
	const check = async (index)=>{
		data.value.checkArr[data.value.id] = data.value.checkBox[data.value.id][index];
		
		if(data.value.id < data.value.tabList.length - 1){
			data.value.id = data.value.id + 1;
		}
		
		await getData();
		getClientRect('#se-' + data.value.tabId).then(res=>{
			data.value.elWidth = Math.round(res.width);
		});
		
		setTimeout(() => {
			data.value.scrollViewWidth = data.value.scrollViewWidth + data.value.elWidth;
		});
		
		if(data.value.tabId < data.value.tabList.length - 1){
			data.value.tabId = data.value.tabId + 1;
		}
	}
	
	const checkTab = (e)=>{
		if(e == data.value.id) return;
		data.value.id 		= e;
		data.value.tabId 	= e;
		data.value.checkArr = data.value.checkArr.splice(0, e);
	}
	
	const getResult = (event)=>{
		if(event == 'confirm'){
			if (data.value.checkArr.length != data.value.tabList.length) return;
			let result = data.value.checkArr;
			emits('change', { value: result })
		}
		
		close();
	}
	
	const getData = async ()=>{
		if (data.value.checkArr.length == data.value.tabList.length){
			return ;
		}
		
		uni.showLoading({ title: '加载中...' });
		
		let params = {
			pid: data.value.checkArr && data.value.checkArr.length > 0 ? data.value.checkArr[data.value.checkArr.length - 1].value : props.pid
		};
		
		uni.$http.get('region/index',params).then(res=>{
			if(res.code){
				data.value.checkBox[data.value.id] = res.data;
			}else{
				data.value.checkBox[data.value.id] = [];
			}
			
			uni.hideLoading();
		})
	}
	
	defineExpose({
		open: open,
		close: close
	});
	
</script>

<style lang="scss" scoped>
	.scroll-popup {
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: -100%;
		z-index: 999;
	}

	.scroll-open {
		bottom: 0px !important;
	}

	.scroll-animation {
		transition: all 0.25s linear;
	}

	.scroll-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}

	.scroll-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: #ffff;
		border-radius: 24rpx 24rpx 0 0;
	}

	.scroll-temp {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.scroll-top {
		height: 88rpx;
		line-height: 88rpx;
	}

	.scroll-top-left {
		float: left;
		padding-left: 24rpx;
		font-size: 28rpx;
	}

	.scroll-top-right {
		float: right;
		padding-right: 24rpx;
		color: #1890ff;
		font-size: 28rpx;
	}

	.scroll-title {
		white-space: nowrap;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #fafafa;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 400rpx;
		line-height: 100rpx;
		background-color: #ffffff;
	}

	.scroll-title-item {
		position: relative;

		image {
			position: absolute !important;
			right: -48rpx !important;
			top: 0 !important;
			bottom: 0 !important;
			width: 28rpx !important;
			height: 28rpx !important;
			margin: auto !important;
		}
	}

	.scroll-title-item-box {
		display: inline-block;
		margin: 0 32rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.scroll-title-item-true {
		font-size: 28rpx;
		font-weight: 700;
		color: #1890ff;
	}

	.scroll-view-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 16rpx;
	}

	.scroll-view-grid-box {
		width: calc(100% - 20rpx);
		margin: 10rpx;
		padding-bottom: 10rpx;
	}

	.scroll-view-noBox {
		width: 100%;
		height: 400rpx;
		text-align: center;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-top: 32rpx;
		}

		.text {
			width: 100%;
			text-align: center;
			color: #888;
			font-size: 28rpx;
			margin-top: -40rpx;
		}
	}

	.scroll-view-item {
		padding: 0rpx 24rpx;
		text-align: left;
		border-radius: 6rpx;
		background: #f7f7f7;
		color: #333333;
		font-size: 28rpx;
		margin: 12rpx 4rpx;
		height: 66rpx;
		line-height: 66rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.scroll-view-item-true {
		padding: 0rpx 24rpx;
		text-align: left;
		border-radius: 6rpx;
		background-color: #1890ff;
		color: #ffffff;
		font-size: 28rpx;
		margin: 12rpx 4rpx;
		height: 66rpx;
		line-height: 66rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>