<template>
	<v-stepper class="elevation-0" v-model="stepIndex">
		<v-stepper-header class="elevation-0" style="overflow: hidden;">
			<v-row class="stepList">
				<v-col class="pl-0 colItem" v-for="(item, index) in step" :key="index" style="">
					<div class="first-box1 last-box pl-10 py-5 stepItem" :class="stepIndex > index? 'selected' : ''"
						:complete="stepIndex > index" :step="index + 1">
						{{ item }}
					</div>
				</v-col>
			</v-row>
		</v-stepper-header>

		<v-stepper-window>
			<v-stepper-window-item v-for="(item, index) in list" :key="index" :value="index + 1">
				<slot :name="index + 1"></slot>
			</v-stepper-window-item>
			<slot></slot>
		</v-stepper-window>
	</v-stepper>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

// 定义组件名称
defineOptions({
	name: "VtkStepper",
	inheritAttrs: false,
});

// 定义props
const props = defineProps({
	list: {
		type: String,
		default: null,
	},
	el: {
		type: Number,
		default: 1,
	},
});

// 响应式数据
const stepIndex = ref(props.el);
const step = ref([]);

// 监听el属性变化
watch(() => props.el, (val) => {
	stepIndex.value = val;
});

// 处理内容
const content = () => {
	if (props.list) {
		step.value = props.list.split(",");
	}
};

// 组件挂载时执行
onMounted(() => {
	content();
});

// 监听list变化
watch(() => props.list, () => {
	content();
});
</script>

<style lang="scss" scoped>
// 颜色变量定义
$color-background: #c7ccd538;
$color-selected: #165dff;
$color-white: #fff;
$color-light-bg: #f2f3f5;
$color-dark-bg: #1e1e1e;

.v-stepper__step {
	background: $color-background;
	position: relative;
}

// 隐藏步骤数字
:deep(.v-stepper__step__step) {
	display: none !important;
}

.stepItem {
	align-items: center;
	display: flex;
	flex-direction: row;
	padding: 24px;
	position: relative;
	background: $color-background;

	// 暗色主题样式
	.v-theme--dark & {
		color: rgba(255, 255, 255, 0.5);
	}

	// 选中状态
	&.selected {
		background: $color-selected;
		color: $color-white !important;

		&.last-box::after {
			border-color: transparent transparent transparent $color-selected;
		}

		:deep(.v-stepper__label) {
			color: $color-white !important;
		}
	}
}

.colItem {
	&:first-child .first-box1::before {
		border-color: transparent !important;
	}

	&:last-child .last-box::after {
		border-color: transparent !important;
	}
}

.first-box1::before {
	position: absolute;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	z-index: 0;
	border: 30px solid;
	border-color: transparent transparent transparent $color-white;

	.v-theme--dark & {
		border-color: transparent transparent transparent $color-dark-bg;
	}
}

.last-box::after {
	position: absolute;
	right: -70px;
	content: "";
	z-index: 1;
	width: 0;
	height: 0;
	border: 35px solid;
	border-color: transparent transparent transparent $color-light-bg;

	.v-theme--dark & {
		border-color: transparent transparent transparent $color-background;
	}
}

.theme--dark.v-stepper {
	background: transparent;
}
</style>