<template>
  <!-- 我的页面 -->
  <div class="mine-page">
    <!-- 顶部选项卡 -->
    <div class="tab-bar">
      <div
        v-for="item in tabs"
        :key="item.value"
        class="tab-item"
        :class="{ active: activeTab === item.value }"
        @click="activeTab = item.value"
      >
        <img class="tab-icon" :class="item.iconClass" :src="item.icon" alt="" />
        <span class="tab-label">{{ item.label }}</span>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="tab-content">
      <AnchorLibrary v-if="activeTab === 1" />
      <PKmessage v-if="activeTab === 2" />
      <PKRecord v-if="activeTab === 3" />
      <PointsList v-if="activeTab === 4" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AnchorLibrary from '@/components/pk-mini/mine/AnchorLibrary.vue'
import PKmessage from '@/components/pk-mini/mine/PKmessage.vue'
import PKRecord from '@/components/pk-mini/mine/PKRecord.vue'
import PointsList from '@/components/pk-mini/mine/PointsList.vue'

// 导入本地图片
import iconAnchorLibrary from '@/assets/pk-mini/AnchorLibrary.png'
import iconPKInformation from '@/assets/pk-mini/PKInformation.png'
import iconPKRecord from '@/assets/pk-mini/PKRecord.png'
import iconPointsList from '@/assets/pk-mini/PointsList.png'

const activeTab = ref(1)

const tabs = [
  {
    value: 1,
    label: '主播库',
    icon: iconAnchorLibrary
  },
  {
    value: 2,
    label: 'PK信息',
    icon: iconPKInformation,
    iconClass: 'pk-info-icon'
  },
  {
    value: 3,
    label: '我的PK记录',
    icon: iconPKRecord
  },
  {
    value: 4,
    label: '积分列表',
    icon: iconPointsList,
    iconClass: 'points-icon'
  }
]
</script>

<style scoped lang="less">
.mine-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-bar {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.tab-item {
  flex: 1;
  height: 90px;
  margin: 0 10px;
  border-radius: 24px;
  background-color: #f1f5f9; // slate-100
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item:hover {
  transform: scale(1.02);
}

.tab-item.active {
  background: linear-gradient(90deg, #eff6ff, #ffffff); // from-blue-50 to-white
  border-color: #2563eb; // blue-600
}

.tab-icon {
  width: 65px;
  height: 65px;
  margin-right: 20px;
}

.tab-icon.pk-info-icon {
  width: 50px;
  height: 72px;
}

.tab-icon.points-icon {
  width: 65px;
  height: 69px;
}

.tab-label {
  font-size: 24px;
  color: #64748b; // slate-500
}

.tab-item.active .tab-label {
  color: #2563eb; // blue-600
  font-weight: bold;
}

.tab-content {
  flex: 1;
  height: calc(100% - 110px);
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}
</style>
