<template>
    <div class="center-line">
        <div v-for="(btn, i) in buttons" :key="i" style="width: 100%;">
            <div v-if="btn.show?.()" class="left-button"
                :class="[{ active: btn.key && activeKey === btn.key, disabled: btn.key && isLocked && activeKey !== btn.key }]"
                :style="btn.style ? btn.style() : {}" @click="$emit('click', btn)" @mouseenter="hoverIndex = i"
                @mouseleave="hoverIndex = null">
                <img :src="hoverIndex === i ? btn.img.hover : btn.img.normal" alt="">
                {{ btn.label }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
    buttons: { type: Array, required: true },
    activeKey: { type: String, default: '' },
    isLocked: { type: Boolean, default: false }
})

defineEmits(['click'])

const hoverIndex = ref(null)
</script>

<!-- 注意：不要 scoped，直接引入全局样式，避免父组件 scoped 导致样式穿透问题 -->
<style scoped lang="less">
.center-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
}

.left-button {
    position: relative;
    z-index: 999;
    margin-bottom: 19px;
    width: 100%;
    height: 72px;
    // background: #32C9CD;
    border-radius: 10px;

    font-family: Source Han Sans SC;
    font-weight: 800;
    font-size: 20px;
    color: #7A8B97;
    line-height: 16px;
    align-items: center;
    display: flex;
    align-items: center;

    img {
        width: 30px;
        margin: 20px;
    }
}

.left-button:hover {
    background: #32C9CD;
    color: #F9FAFE;

}

/* 鼠标按下时效果 */
.left-button:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

.left-button.active {
    background-color: red;
}

/* 互斥期间的其它三枚按钮置灰禁点 */
.left-button.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.4);
}
</style>