<template>
	<view class="cu-treeSelectB flex">
		<scroll-view scroll-with-animation :scroll-top="VerticalNavTop" class="bg-white margin-right" scroll-y="true" :style="{ height, width: labelWidth, minWidth: labelWidth }">
			<view @click="handler(index)" :style="{ height: labelHeight + 'px' }" class="label text-cut flex align-center justify-center" :class="{'cur':key==index}" v-for="(item, index) in labelCom" :key="index">{{ item.label }}</view>
		</scroll-view>
		<view style="flex:auto"><slot /></view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default: () => []
		},
		height: {
			type: String,
			default: '100vh'
		},
		labelWidth: {
			type: String,
			default: '200rpx'
		}
	},
	computed: {
		labelCom() {
			let value = this.value;
			return value;
		},
		VerticalNavTop(){
			var key=this.key;
			var labelHeight=this.labelHeight;
			return key * 50
		},
		VerticalNavTopB(){
			var key=this.key;
			return 0
		}
	},
	data() {
		return {
			labelHeight: 50,
			key:0,
		};
	},
	methods:{
		handler(key){
			this.key=key;
			let item=this.value[key];
			this.$emit("change",item)
		}
	}
	
};
</script>

<style lang="scss" scoped>
.cu-treeSelectB {
	white-space: initial;
	.label {
		width: 100%;
		background-color: #fff;
		margin: 0;
		border: none;
		position: relative;
	}
	.cur {
		background-color: #f1f1f1;
		&::after {
			content: '';
			width: 8rpx;
			height: 30rpx;
			border-radius: 10rpx 0 0 10rpx;
			position: absolute;
			background-color: #f03;
			top: 0;
			right: 0rpx;
			bottom: 0;
			margin: auto;
		}
	}
}
</style>
