<template>
  <!-- 左侧分类侧边栏 - Figma 1512:230 (90x794) -->
  <view class="sidebar-wrap">
    <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>

    <!-- 底部 0元拿样本 卡片 -->
    <view class="sample-banner" @tap="onSample">
      <text class="sample-title">0元拿样本</text>
      <text class="sample-sub">免费寄送</text>
    </view>
  </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)
    },
    onSample() {
      this.$emit('sample')
    }
  }
}
</script>

<style scoped>
/* 侧边栏容器 - 包含上方滚动分类 + 底部 0元拿样本 卡片 */
.sidebar-wrap {
  width: 180rpx;
  height: 100%;
  background: #ffffff;
  border-right: 1rpx solid #eeeeee;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
/* 侧边栏 - 上方滚动区域 */
.sidebar {
  flex: 1;
  min-height: 0;
  background: #ffffff;
}
/* 单项 - 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;
}
/* 底部 0元拿样本 卡片 - 橙色渐变背景 圆角 内边距 12px 8px */
.sample-banner {
  flex-shrink: 0;
  margin: 16rpx 12rpx 24rpx;
  padding: 24rpx 16rpx;
  background: linear-gradient(180deg, #ff8a3d 0%, #ff6800 100%);
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 104, 0, 0.25);
}
.sample-title {
  font-size: 24rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.sample-sub {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
}
</style>
