<template>
	<scroll-view
		:scroll-x="true"
		:scroll-y="true"
		:scroll-left="scrollLeft"
		:scroll-top="scrollTop"
	>
		<view class="list-view">
			<view class="show-view first-view">
				<view
					v-for="item in listReal"
					:key="item.value"
					class="show-view-item"
					:class="{ selected: item.isSel }"
					@click="handleClick(item)"
				>
					{{ item[useName] }}
				</view>
			</view>

			<view
				v-for="(item, index) in listArray"
				:key="index"
				class="show-view second-view"
			>
				<after-select
					v-if="item.length"
					:list="item"
					:index="index"
					:use-name="useName"
					@click="childClick"
				></after-select>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import AfterSelect from './after-select';
export default {
	components: { AfterSelect },
	props: {

		list: {
			type: Array,
			default() {
				return [];
			}
		},
		useName: {
			type: String,
			default: 'label'
		}
	},
	emits: ['click'],
	data() {
		return {
			listReal: [], // 第一列数组
			listArray: [], // 第二列及之后数组
			selectedArray: [], // 选中内容数组
			scrollLeft: 0, // 滑动距离
			scrollTop: 0 // 距离顶部距离
		};
	},

	created() {
		this.listReal = this.list;
		this.listReal.map(i => {
			i.isSel = false;
		});
	},

	methods: {
		handleClick(item) {
			this.listReal.forEach(i => {
				i.isSel = false;
			});
			item.isSel = true;

			this.selectedArray.splice(0);
			this.selectedArray.push(item);
			this.listArray.splice(0);
			
			this.common(item.children);
		},

		childClick(item, index) {
			this.listArray.splice(index);
			this.selectedArray.splice(index, 99, item);

			this.common(item.children, index);
		},

		common(data, index) {
			this.scrollTop === 0
				? (this.scrollTop = 0.1)
				: (this.scrollTop = 0);

			if (data && data.length) {
				data.forEach(i => {
					this.$set(i, 'isSel', false);
				});
				this.listArray.push(data);
			} else {
				this.$emit('click', this.selectedArray);
			}

			if (!index) return;
			this.$nextTick(() => {
				this.scrollLeft = 250 * index;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
scroll-view {
	white-space: nowrap;
	height: 40vh;
	border: solid 1px #ebebeb;
	margin-bottom: 10px;
}

.list-view {
	display: flex;
	font-size: 30rpx;
	min-height: 100%;

	.show-view {
		min-width: calc((100% - 1px) / 3);
		border-right: solid 1px #ebebeb;
		
		&:first-child{
			width:30%
		}
		&.second-view {
			border: 0;
			width:70%;
			height:40vh;
			overflow-y: auto;
		}

		&-item {
			height: 80rpx;
			padding: 0 13rpx 0 40rpx;
			line-height: 80rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.first-view {
		background-color: $uni-bg-color-grey;
	}

	.selected {
		color: $uni-color-primary;
		background-color: $uni-bg-color;
	}
}
</style>
