<script setup>
  import { ref } from 'vue'

  const weekList = ['一', '二', '三', '四', '五', '六', '日']

  const indexData = ref([1, 2, 3, 4])

  const onItem = item => {
    if (indexData.value.includes(item)) {
      return
    }
    indexData.value.push(item)
  }
</script>

<template>
  <view class="punch">
    <nav-bar>
      <template #back>
        <image
          src="/static/images/public/return-icon.png"
          mode="heightFix"
          class="top-left-icon"
        ></image>
      </template>
    </nav-bar>
    <view class="public-header—box">
      <view class="integral-box">
        <text>我的积分</text>
        <text>410</text>
      </view>
      <image
        src="/static/images/discover/calendar.png"
        mode="aspectFit"
        class="right-icon"
      ></image>
    </view>

    <view class="punch-box">
      <view class="top-title">
        <text class="title">每日签到领积分</text>
        <view class="right-box">
          <text>已连续签到</text>
          <text>05</text>
          <text>天</text>
        </view>
      </view>
      <!-- 切换 -->
      <view class="switch-box">
        <text class="date">2025年12月</text>
        <view class="btn">
          <uni-icons type="left" size="22" color="#666666"></uni-icons>
          <uni-icons type="right" size="22" color="#666666"></uni-icons>
        </view>
      </view>

      <!-- 签到列表 -->
      <view class="list-box">
        <view v-for="(item, index) in weekList" :key="index" class="item">
          <text class="bottom-name">{{ item }}</text>
        </view>
        <view
          v-for="item in 30"
          :key="item"
          :class="{ active: indexData.includes(item) }"
          class="item"
          @click="onItem(item)"
        >
          <view class="bg-box">
            <image
              src="/static/images/discover/bean.png"
              mode="heightFix"
              class="icon"
            ></image>
            <text>+10</text>
          </view>
          <text class="bottom-name">今天</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './styles/index.scss';
  .right-icon {
    right: -86rpx !important;
  }
  .punch-box {
    padding: 0 24rpx;
    .top-title {
      font-family: PingFang SC, PingFang SC;
      font-style: normal;
      text-transform: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
      }
      .right-box {
        margin-left: 32rpx;
        display: flex;
        align-items: center;
        text {
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          &:nth-child(2) {
            margin: 0 4rpx;
            color: #00d993;
          }
        }
      }
    }

    .switch-box {
      margin: 50rpx 0 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .date {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #666666;
        font-style: normal;
        text-transform: none;
      }
      .btn {
        width: 180rpx;
        display: flex;
        justify-content: space-between;
      }
    }

    .list-box {
      margin-top: 38rpx;
      font-family: PingFang SC, PingFang SC;
      font-style: normal;
      text-transform: none;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-gap: 22rpx;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .bg-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 80rpx;
          height: 100rpx;
          background: #f4f4f4;
          border-radius: 8rpx;
          .icon {
            height: 48rpx;
          }
          text {
            font-weight: bold;
            font-size: 24rpx;
            color: #999999;
          }
        }
        .bottom-name {
          margin-top: 8rpx;
          font-size: 24rpx;
          color: #999999;
        }
      }
      .active {
        .bg-box {
          background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
          text {
            color: #ffffff;
          }
        }
        .bottom-name {
          color: #00d993;
        }
      }
    }
  }
</style>
