<script setup>
  import { ref } from 'vue'
  import { formatMonthDay, formatDate } from '@/utils/dateUtils'
  import { onLoad } from '@dcloudio/uni-app'
  import { getSignList, signIn } from '@/api'
  import { useUI } from '@/utils/use-ui'
  import { useAuthUser } from '@/composables/useAuthUser'
  import { useUserStore } from '@/stores/user'

  const { showToast } = useUI()
  const { userInfo } = useAuthUser()
  const { refreshUserInfo } = useUserStore()

  const weekList = [
    { name: '一', value: 1 },
    { name: '二', value: 2 },
    { name: '三', value: 3 },
    { name: '四', value: 4 },
    { name: '五', value: 5 },
    { name: '六', value: 6 },
    { name: '日', value: 7 }
  ]
  const indexData = ref([])

  const currentYear = ref(2025)
  const currentMonth = ref(12)
  /** 日期列表 */
  const dateList = ref([])
  /** 连续天数 */
  const continuousDays = ref(0)

  /** 给数子补零 */
  const padZero = num => {
    return num < 10 ? `0${num}` : num
  }

  const getData = async msg => {
    const res = await getSignList({
      signMonth: `${currentYear.value}-${padZero(currentMonth.value)}`
    })

    dateList.value = generateCalendar(
      currentYear.value,
      currentMonth.value
    )

    if (msg) {
      await refreshUserInfo()
      showToast(msg)
    }

    continuousDays.value = res.data.continuousDays
    indexData.value = res.data.list.map(v => v.signDate)
  }

  /**
   * 生成一个 5x7 的日历数组（从周一到周日）
   * @param {number} year - 当前年份
   * @param {number} month - 当前月份（1-12）
   * @returns {Array<{ date: Date, type: 'prev' | 'current' | 'next' }>}
   */
  const generateCalendar = (year, month) => {
    const today = new Date()
    const todayYear = today.getFullYear()
    const todayMonth = today.getMonth()
    const todayDate = today.getDate()
    // 辅助函数：判断两个 Date 是否是同一天（忽略时分秒）
    const isSameDay = (d1, d2) => {
      return (
        d1.getFullYear() === d2.getFullYear() &&
        d1.getMonth() === d2.getMonth() &&
        d1.getDate() === d2.getDate()
      )
    }

    // 创建当前月的第一天
    const firstDay = new Date(year, month - 1, 1)
    // 创建当前月的最后一天
    const lastDay = new Date(year, month, 0)

    // 获取当前月第一天是星期几
    let startDayOfWeek = firstDay.getDay()
    // 转换为以周一为 0：如果 getDay() 是 0（周日），则视为 6（即一周最后一天）
    if (startDayOfWeek === 0) startDayOfWeek = 7
    const offsetFromMonday = startDayOfWeek - 1 // 周一为0

    // 上个月的最后一天
    const prevMonthLastDay = new Date(year, month - 1, 0).getDate()

    // 当前月总天数
    const currentMonthDays = lastDay.getDate()

    const calendar = []
    // 仅用于比较
    const todayRef = new Date(todayYear, todayMonth, todayDate)

    // 填充上个月的尾几天
    for (let i = 0; i < offsetFromMonday; i++) {
      const day = prevMonthLastDay - offsetFromMonday + 1 + i

      const date = new Date(year, month - 2, day) // month - 2 表示上个月
      calendar.push({
        date: formatMonthDay(date),
        signDate: formatDate(date),
        type: 'prev',
        isToday: isSameDay(date, todayRef)
      })
    }

    // 填充当前月
    for (let i = 0; i < currentMonthDays; i++) {
      const date = new Date(year, month - 1, i + 1)

      calendar.push({
        date: formatMonthDay(date),
        signDate: formatDate(date),
        type: 'current',
        isToday: isSameDay(date, todayRef)
      })
    }

    // 填充下个月的前几天，使总数达到 35（5*7）
    const remaining = 35 - calendar.length
    for (let i = 1; i <= remaining; i++) {
      const date = new Date(year, month, i) // month 是下个月（因为 JS 月份从 0 开始）
      calendar.push({
        date: formatMonthDay(date),
        signDate: formatDate(date),
        type: 'next',
        isToday: isSameDay(date, todayRef)
      })
    }

    return calendar
  }

  /** 点击签到 */
  const onItem = async item => {
    if (!item.isToday) return
    const res = await signIn()
    await getData(res.data.message)
  }

  /** 日期切换 */
  const dateChange = e => {
    if (e === 0) {
      if (currentMonth.value === 1) {
        currentYear.value--
        currentMonth.value = 12
      } else {
        currentMonth.value--
      }
    } else {
      if (currentMonth.value === 12) {
        currentYear.value++
        currentMonth.value = 1
      } else {
        currentMonth.value++
      }
    }
    getData()
  }

  const formatNumberWithWan = num => {
    if (num < 10000) {
      return num.toString()
    }

    // 保留小数：根据需求可调整 toFixed 的位数
    let wan = num / 10000

    // 如果是整数万，不显示小数；否则保留两位小数（或你想要的位数）
    if (wan % 1 === 0) {
      return wan + '万'
    } else {
      return wan.toFixed(2).replace(/\.?0+$/, '') + '万' // 去掉不必要的尾随零
    }
  }

  onLoad(() => {
    const now = new Date()
    currentYear.value = now.getFullYear()
    currentMonth.value = now.getMonth() + 1

    getData()
  })
</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 style="font-size: 80rpx; margin-top: 30rpx;">
          {{ formatNumberWithWan(userInfo.totalPoints) }}
        </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>{{ continuousDays }}</text>
          <text>天</text>
        </view>
      </view>
      <!-- 切换 -->
      <view class="switch-box">
        <text class="date">
          {{ currentYear }}年{{ padZero(currentMonth) }}月
        </text>
        <view class="btn">
          <uni-icons
            type="left"
            size="22"
            color="#666666"
            @click="dateChange(0)"
          ></uni-icons>
          <uni-icons
            type="right"
            size="22"
            color="#666666"
            @click="dateChange(1)"
          ></uni-icons>
        </view>
      </view>

      <!-- 签到列表 -->
      <view class="list-box">
        <!-- 星期列表 -->
        <view v-for="(item, index) in weekList" :key="index" class="item">
          <text class="bottom-name">{{ item.name }}</text>
        </view>
        <!--  签到  -->
        <view
          v-for="(item, index) in dateList"
          :key="index"
          :class="{ active: indexData.includes(item.signDate) }"
          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
            :style="{ color: item.isToday ? '#00d993' : '#999999' }"
            class="bottom-name"
          >
            {{ item.isToday ? '今日' : item.date }}
          </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>
