<template>
	<view class="cu-treeSelectA VerticalBox">
		<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="VerticalNavTop" :style="{ height }">
			<view class="cu-item" :class="{ 'text-green cur': index == TabCur }" v-for="(item, index) in 10" :key="index" @click="tabSelect(index)" >Tab-{{ item }}</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		type: String,
		default: '100vh'
	},
	data() {
		return {
			VerticalNavTop: 0,
			TabCur: 0,
			MainCur:0,
		};
	},
	methods: {
		tabSelect(index) {
			this.TabCur=index;
			this.MainCur=index;
			this.VerticalNavTop=(index-1)*50
		}
	}
};
</script>

<style lang="scss" scoped>
	.VerticalBox{
		display: flex;
		.VerticalNav {
			.nav {
				width: 200rpx;
				white-space: initial;
				.cu-item {
					width: 100%;
					text-align: center;
					background-color: #fff;
					margin: 0;
					border: none;
					height: 50px;
					position: relative;
					.cur {
						background-color: #f1f1f1;
						&::after {
							content: '';
							width: 8rpx;
							height: 30rpx;
							border-radius: 10rpx 0 0 10rpx;
							position: absolute;
							background-color: currentColor;
							top: 0;
							right: 0rpx;
							bottom: 0;
							margin: auto;
						}
					}
				}
			}
		}
		.VerticalMain{
		  background-color: #f1f1f1;
		}
	}
</style>
