<template>
  <div class="userPanel-container">
    <img
      src="@/assets/images/head/anchorUserListTitle2.png"
      alt=""
      class="headerImage"
      style="margin-top: -7px"
    />
    <div class="tabs">
      <div class="tabs-switch">
        <div
          class="switch-item"
          v-for="item in tabsSwitch"
          :key="item"
          @click="swichToTabs(item)"
          :class="{ 'tabsSwich-active': KeyNodeOneStore.currentTabType == item }"
        >
          {{ item }}
        </div>
      </div>
      <div class="tabs-list">
        <div
          class="tabs-list-item"
          v-for="(item, index) in tabsList"
          :key="item.id"
          @click="highLightNodeHandle(item)"
        >
          <div class="order">{{ index + 1 }}</div>
          <img :src="item.avatar" alt="" class="avatar" />
          <div class="user-info">
            <div class="username">{{ item.name }}</div>
            <div class="userState">
              <div class="userState-fancy">
                粉丝数:
                <p>{{ item.number }}</p>
              </div>
              <div class="userState-monitor-count">
                推荐频率:
                <p>{{ item.transmit }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from "vue";
import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index";
const KeyNodeOneStore = useKeyNodeRecognitionStore();
const props = defineProps({
  tabsSwitch: {
    type: Array,
    default: () => []
  },
  tabsList: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["click:switchTab"]);

const swichToTabs = (item) => {
  emit("click:switchTab", item);
};

const highLightNodeHandle = (item) => {
  KeyNodeOneStore.currentUser = item;
};
</script>

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

  .tabs {
    flex: 1;
    padding: 10px 20px;

    .tabs-switch {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .switch-item {
        flex: 1;
        padding: 4px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #20406e;
        font-size: 14px;
        cursor: pointer;
        color: #cccccc9d;
        &:first-child {
          border-radius: 5px 0 0 5px;
        }
        &:last-child {
          border-radius: 0px 5px 5px 0px;
        }
      }
    }
    .tabs-list {
      width: 100%;
      height: 430px;
      margin-top: 10px;
      padding-right: 5px;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 3px; /* 垂直滚动条宽度 */
        height: 5px; /* 水平滚动条高度 */
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
        border-radius: 4px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
      }
      .tabs-list-item {
        width: 100%;
        height: 80px;
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
        .order {
          color: #fff;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          margin-right: 15px;
        }
        .avatar {
          width: 48px;
          height: 48px;
          border-radius: 5px;
        }
        .user-info {
          flex: 1;
          padding-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .username {
            color: #fff;
            font-size: 16px;
            font-family: "微软雅黑";
          }
          .userState {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 13px;
            color: #cccccc9d;
            div {
              display: flex;
              p {
                color: #fff;
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
  }
}

.tabsSwich-active {
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: 1;
  background-color: #326190;
  border: 1px solid #3fa9f5;
}
</style>
