<template>
  <!-- 我的 -->
  <div class="mine">
  <div class="custom-style">
    <div class="Selector" v-for="item in options">
        <div class="card" @click="SelectorClick(item.value)" :class="{ 'active': item.value === segmentedvalue }">
          <div class="card-icon">
          <img class="icon" :class="{ 'pk-info-icon': item.value === 2 , 'PointsList-icon': item.value === 4 }" :src="item.icon" alt=""/>
          </div>
          <div class="card-content">
            <div class="card-title" :class="{'active-text': item.value === segmentedvalue}">{{item.label}}</div>
          </div>
        </div>
    </div>
  </div>
  <div class="mine-content">
    <PointsList v-if="segmentedvalue === 4" />
    <PKRecord v-if="segmentedvalue === 3" />
    <PKmessage v-if="segmentedvalue === 2" />
    <AnchorLibrary v-if="segmentedvalue === 1" />
  </div>  
  </div>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
const refname = ref('');

import PointsList from "@/components/mineSubComponent/PointsList";
import PKRecord from "@/components/mineSubComponent/PKRecord";
import PKmessage from "@/components/mineSubComponent/PKmessage";
import AnchorLibrary from "@/components/mineSubComponent/AnchorLibrary";



const options = [
  {
    label: '主播库',
    value: 1,
    icon: require("@/assets/AnchorLibrary.png"),
  },
  {
    label: 'PK信息',
    value: 2,
    icon: require("@/assets/PKInformation.png"),
  },
  {
    label: '我的PK记录',
    value: 3, 
    icon: require("@/assets/PKRecord.png"),
  },
  {
    label: '积分列表',
    value: 4,
    icon: require("@/assets/PointsList.png"),
  },
]
import { throttle } from 'lodash-es';

const throttledUpdate = throttle((value) => {
  segmentedvalue.value = value;
}, 500);

function SelectorClick(value) {
  throttledUpdate(value);
}

const segmentedvalue = ref(1);
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onMounted(() => {
  // 组件挂载完成后执行
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped lang="less">
.mine{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.custom-style{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content:space-between;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.Selector{
  width: 420px;
  height: 110px;
}
.card{
  width: 100%;
  height: 90px;
  border-radius: 24px;
  background-color: #CEF1EB;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-icon{
  height: 100%;
  display: flex;
  align-items: center;
}
.mine-content{
  width: 100%;
  height: calc(100% - 110px);
  background-color: #ffffff;
  border-radius: 16px;
}
.icon{
  width:65px;
  height: 65px;
}
.card-content{
  margin-left: 62px;
}
.card-title{
  font-size: 24px;
  color: #636363;
}
.pk-info-icon {
  width:50px;
  height:72px;
}
.PointsList-icon{
  width: 65px;
  height: 69px;
}
.active{
  background-image: linear-gradient(90deg, #E4FFFF, #FFFFFF);
  border: 1px solid #03ABA8;
}
.active-text{
  color: #03ABA8;
}
</style>