<template>
    <view class="sidebar">
        <view
            v-for="item in config"
            :key="item.id"
            :class="['sidebar-item', { active: modelValue === item.id }]"
            @click="onSelect(item)"
        >
            <view class="sidebar-dot" v-if="item.warning && modelValue !== item.id"></view>
            <text>{{ item.name }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
/**
 * 学科 / 分组 选择侧边栏
 * - v-model 绑定当前激活项 id
 * - config: [{ id, name, warning? }]
 *
 * 与原 qy-Sidebar API 保持一致
 */

interface Item {
    id: string | number;
    name: string;
    warning?: boolean;
    [key: string]: any;
}

const props = defineProps<{
    modelValue: string | number;
    config: Item[];
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', val: string | number): void;
    (e: 'handleChange', item: Item): void;
}>();

const onSelect = (item: Item) => {
    if (props.modelValue === item.id) return;
    emit('update:modelValue', item.id);
    emit('handleChange', item);
};
</script>

<style lang="scss" scoped>
.sidebar {
    width: 100%;
    height: 100%;
    padding: 16rpx 12rpx;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 32rpx;
    box-shadow:
        0 8rpx 24rpx rgba(99, 102, 241, 0.1),
        inset 0 -4rpx 0 rgba(199, 210, 254, 0.4);
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    overflow-y: auto;
}

.sidebar-item {
    position: relative;
    flex-shrink: 0;
    height: 88rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7ff;
    color: #6366f1;
    font-size: 26rpx;
    font-weight: 500;
    transition: all 200ms ease;

    &:active {
        transform: scale(0.96);
    }

    &.active {
        background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%);
        color: #ffffff;
        box-shadow:
            0 6rpx 16rpx rgba(79, 70, 229, 0.35),
            inset 0 -4rpx 0 rgba(0, 0, 0, 0.12),
            inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
    }
}

.sidebar-dot {
    position: absolute;
    top: 12rpx;
    right: 12rpx;
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 4rpx rgba(239, 68, 68, 0.18);
}
</style>
