<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	item: {
		type: Object,
		default: () => ({})
	},
	selectItem: {
		type: Object,
		default: () => {},
	},
})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="btn" :class="{'active': item.id === props.selectItem?.id}">
		{{ item.name }}
	</div>
</template>
<style lang="less" scoped>
	.btn{
		font-size: 1.2rem;
		width: var(--treeItem-width);
		height: var(--treeItem-height);
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--treeItem-raduis);
		border: var(--treeItem-border);
		color: #000;
		cursor: pointer;
		margin-bottom: 4rem;
		background-color: var(--treeItem-background);
		position: relative;
		&::after{
			content: '';
			cursor: auto;	
			position: absolute;
			top: calc(100% + 2px);
			height: 4rem;
			left: 50%;
			width: 1.8px;
			transform: translateX(-50%);
			background: 
				repeating-linear-gradient(0deg, #333 0, #333 5px, transparent 5px, transparent 10px),
				linear-gradient(white, white);
			background-clip: padding-box, border-box;
			background-origin: border-box;
		}
		&.active{
			background-color: var(--treeItem-active-background);
		}
	}
	.btn:nth-child(1){
		background-color: #7A7A7A;
		color: #FFF;
		border: 2px solid #7A7A7A;
	}
	.btn:last-child{
		margin-bottom: 0;
		&::after{
			display: none;
		}
	}
</style>