<template>
  <div class="mine-container">
    <sticky-bar>
      <template #right>
        <img
          :src="getIconUrl('btn_service_black_24')"
          alt=""
          style="margin-right: 15px"
          class="top-icon"
        />
        <img :src="getIconUrl('btn_set_black_24')" alt="" class="top-icon" />
      </template>
    </sticky-bar>

    <!-- 用户信息区域 -->
    <div class="user-info">
      <div class="avatar">
        <van-image
          round
          width="80px"
          height="80px"
          :error-icon="'@/assets/icons/icon_my_head_64@2x.png'"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          fit="cover"
        />
      </div>
      <div class="info">
        <div class="name">王武</div>
        <div class="id">106 456 · 188 4567 7890</div>
        <div class="department">长春市朝阳分局文和派出所</div>
      </div>
      <div class="arrow">
        <van-icon name="arrow" />
      </div>
    </div>

    <div style="background-color: #fff; height: 71vh; padding-bottom: 15px">
      <!-- 统计数据区域 -->
      <div class="stats" :class="`active-${activeIndex}`">
        <div
          v-for="(item, index) in menu"
          :key="index"
          class="stat-item"
          :class="{ active: activeIndex == index }"
          @click="activeIndex = index"
        >
          <div class="label">{{ item.label }} {{ item.count }}</div>
        </div>
      </div>

      <div class="content">
        <div class="year-title">
          <span>2025年</span>
        </div>

        <div class="month-selector">
          <div class="month-item active">
            <van-icon name="arrow-left" />
            <span>2月</span>
          </div>
        </div>

        <!-- 动态内容列表 -->
        <div class="content-list">
          <DynamicItem v-for="(item, index) in 2" :key="index"></DynamicItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getIconUrl } from '@/utils/utils'
  import { ref } from 'vue'
  import DynamicItem from './Mine/DynamicItem.vue'
  const activeIndex = ref(1)
  const menu = ref([
    {
      label: '我的动态',
      value: 'dynamics',
      count: 0
    },
    {
      label: '我的点赞',
      value: 'zan',
      count: 0
    },
    {
      label: '参与的话题',
      value: 'subject',
      count: 0
    }
  ])
</script>

<style lang="scss" scoped>
  .mine-container {
    width: 100%;
    height: 100vh;
    padding-bottom: 60px;
    background: linear-gradient(to left bottom, #cfeafe, #ffffff);
  }

  // 已有的用户信息样式
  .user-info {
    display: flex;
    align-items: center;
    padding: 20px;

    .avatar {
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #e0e7ff;
        object-fit: cover;
      }
    }

    .info {
      flex: 1;
      margin-left: 15px;

      .name {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .id,
      .department {
        font-size: 14px;
        color: #666;
        margin-top: 5px;
      }
    }

    .arrow {
      color: #999;
    }
  }

  .stats {
    display: flex;
    background-color: #fff;
    padding: 15px 0;
    margin-bottom: 15px;
    position: relative;

    // 添加一个公共的指示线元素
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: calc(100% / 6); // 初始位置在第一个选项中间
      transform: translateX(-50%);
      width: 20px;
      height: 5px;
      background: url('@/assets/icons/nav_line.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 3px;
      transition: left 0.3s ease; // 只对left属性添加过渡效果
    }

    // 根据激活的选项调整指示线位置
    &.active-0::after {
      left: calc(100% / 6);
    }
    &.active-1::after {
      left: calc(100% / 2);
    }
    &.active-2::after {
      left: calc(5 * 100% / 6);
    }

    .stat-item {
      flex: 1;
      text-align: center;
      position: relative;

      .count {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .label {
        font-size: 14px;
        color: #747474;
      }

      &.active {
        .label {
          color: #191919;
          font-weight: 600;
        }
      }
    }
  }

  .content {
    height: calc(100% - 45px);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    &::-webkit-scrollbar {
      display: none; /* Chrome/Safari/Opera */
    }
    .year-title {
      padding: 15px 20px;
      font-size: 18px;
      font-weight: bold;
    }
    .month-selector {
      padding: 0 20px 15px;

      .month-item {
        display: inline-flex;
        align-items: center;
        background-color: #1989fa;
        color: #fff;
        padding: 5px 15px;
        border-radius: 20px;

        span {
          margin-left: 5px;
        }
      }
    }

    .content-list {
      padding: 0 15px;
    }
  }
</style>
