<template>
  <!-- 左侧分类侧边栏 - Figma 1512:230 (90x794) -->
  <scroll-view scroll-y class="sidebar">
    <view
      class="sidebar-item"
      :class="{ active: activeId === item.id }"
      v-for="(item, index) in list"
      :key="index"
      @tap="selectItem(item.id)"
    >
      <view class="sidebar-indicator" v-if="activeId === item.id"></view>
      <text class="sidebar-text">{{ item.name }}</text>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'CategorySidebar',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    activeId: {
      type: [String, Number],
      default: 'all'
    }
  },
  methods: {
    selectItem(id) {
      this.$emit('select', id)
    }
  }
}
</script>

<style scoped>
/* 侧边栏 - 固定宽度 180rpx(=90px),白底 + 右侧 1px #EEEEEE 边框 */
.sidebar {
  width: 180rpx;
  height: 100%;
  background: #ffffff;
  border-right: 1rpx solid #eeeeee;
  box-sizing: border-box;
  flex-shrink: 0;
}
/* 单项 - 90x46 (180rpx x 92rpx),居中文字 */
.sidebar-item {
  position: relative;
  width: 100%;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-sizing: border-box;
}
/* 选中态 - #FFF8F3 背景 */
.sidebar-item.active {
  background: #fff8f3;
}
/* 选中指示器 - 左侧 3x16 (6rpx x 32rpx) 橙色 圆角 2px */
.sidebar-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 32rpx;
  background: #ff6800;
  border-radius: 4rpx;
}
/* 文字 - 13px Medium 选中橙色 未选中 #666666 */
.sidebar-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #666666;
  text-align: center;
  line-height: 34rpx;
}
.sidebar-item.active .sidebar-text {
  color: #ff6800;
}
</style>
