<template>
    <el-scrollbar ref="scrollbarRef" style="width: 100%;" class="step-scrollbar">
        <div class="step-wrapper" ref="stepWrapperRef">
            <el-steps :active="activeStep" finish-status="success">
                <el-step v-for="item in list" :key="value" :title="item.waypointName" :description="item.remark" />
            </el-steps>
        </div>
    </el-scrollbar>
</template>
<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    activeStep: {
        type: Number,
        default: 0
    }
})

const scrollbarRef = ref(null)
const stepWrapperRef = ref(null)


/**
 * 滚动到当前激活的步骤
 */
const scrollToActiveStep = () => {
    nextTick(() => {
        // 获取 el-scrollbar 的可视区域宽度
        const scrollbarEl = scrollbarRef.value?.$el
        const wrapEl = scrollbarEl?.querySelector('.el-scrollbar__wrap')
        if (!wrapEl) return

        const viewWidth = wrapEl.clientWidth

        // 获取所有 step 元素
        const steps = stepWrapperRef.value?.querySelectorAll('.el-step')
        if (!steps || !steps[props.activeStep]) return

        // 计算激活 step 的位置
        const activeEl = steps[props.activeStep]
        const stepLeft = activeEl.offsetLeft
        const stepWidth = activeEl.offsetWidth

        // 让激活 step 居中显示
        const scrollLeft = stepLeft - viewWidth / 2 + stepWidth / 2
        console.log('滚动位置：', scrollLeft)
        // 使用 el-scrollbar 提供的方法滚动
        scrollbarRef.value.setScrollLeft(Math.max(0, scrollLeft))
    })
}

setTimeout(() => {
    scrollToActiveStep()
}, 1000)
</script>

<style lang="scss" scoped>
.step-scrollbar {
    margin-top: 12px;
    white-space: nowrap;

    .step-wrapper {
        display: inline-block;
        /* 让wrapper宽度由内容决定 */
        width: 100%;
        /* 至少和容器一样宽 */
        white-space: nowrap;
        /* 防止 flex 项换行 */

        margin: 10px 0 20px 0;

        :deep(.el-steps) {
            flex-wrap: nowrap;
            width: calc(100% - 150px);

            .el-step {
                flex-shrink: 0 !important;
                /* 禁止步骤项被压缩 */
                min-width: 150px;
                /* 每个步骤的最小宽度，按需调整 */
            }
        }
    }
}
</style>