<template>
  <view 
    v-if="catalogues.length > 1" 
    :class="['catalogue-list', userVip ? 'vip-style' : '']"
  >
    <view
      v-for="(catalogue, index) in catalogues"
      :key="catalogue.id"
      :class="['catalogue-item', currentIndex === index ? 'active' : '']"
      @click="handleSelect(index)"
    >
      <text class="catalogue-title">{{ catalogue.title }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { ICatalogue, IVipInfo } from '@/types/course'

interface Props {
  catalogues: ICatalogue[]
  currentIndex: number
  userVip: IVipInfo | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  change: [index: number]
}>()

/**
 * 选择目录
 */
const handleSelect = (index: number) => {
  if (index === props.currentIndex) return
  emit('change', index)
}
</script>

<style lang="scss" scoped>
.catalogue-list {
  display: flex;
  align-items: flex-end;
  padding: 20rpx;
  padding-bottom: 0;
  border-radius: 20rpx 20rpx 0 0;
  margin-top: 20rpx;
  
  &.vip-style {
    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
    
    .catalogue-item {
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      border-color: #fff;
      
      &.active {
        background-color: #258feb;
        color: #fff;
      }
    }
  }
  
  .catalogue-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    margin-right: 10rpx;
    border-radius: 20rpx 20rpx 0 0;
    border: 1px solid #fff;
    border-bottom: none;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    transition: all 0.3s;
    
    &:last-child {
      margin-right: 0;
    }
    
    &.active {
      background-color: #258feb;
      padding: 20rpx 0;
      
      .catalogue-title {
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    
    .catalogue-title {
      font-size: 30rpx;
    }
  }
}
</style>
