<script setup>
import request from '@/utils/request';
import AppHeader from '@/components/AppHeader.vue'
import { showToast, showFailToast, showSuccessToast } from 'vant'
const checkinDays = ref(0)
const signInDates = ref([])
const loading = ref(false)
const showInfo = ref(false)

const userData = ref({})
async function getUserInfo() {
  const res = await request.get('/system/user/')
  userData.value = res
}
getUserInfo()
const cardinfo = ref([])
function getCardList() {
  request.get('/ops/bankcard/list?cardtype=2').then((res) => {
    res.rows?.length > 0 && (cardinfo.value = res.rows[0])
  })
}
getCardList()
// 获取签到信息
async function getSignInInfo() {
  try {
    const res = await request.get('/system/user/getCheckinDaysAndDate')
    checkinDays.value = res.checkinDays
    signInDates.value = res?.list?.map(date => new Date(date).getTime()) || []
  }
  catch (error) {
    console.error('获取签到信息失败:', error)
    showFailToast(error.msg || '获取签到信息失败')
  }
  finally {
    showInfo.value = true
  }
}

// 判断是否已签到
const isSignedToday = computed(() => {
  if (!signInDates.value.length)
    return false
  const today = new Date()
  return signInDates.value.some((date) => {
    const signDate = new Date(date)
    return signDate.getFullYear() === today.getFullYear()
      && signDate.getMonth() === today.getMonth()
      && signDate.getDate() === today.getDate()
  })
})

// 判断某天是否可签到
function canSignDay(day) {
  if (day === 7 && checkinDays.value >= 6 && !isSignedToday.value) {
    return true
  }
  return day === checkinDays.value + 1 && !isSignedToday.value
}

// 判断某天是否已签到
function isSignedDay(day) {
  if (day === 7) {
    return false
  }
  return day <= checkinDays.value
}

// 处理签到格子点击
function handleDayClick() {
  if (userData.value.data != 'true') {
    showFailToast('请先完成实名认证')
    return false
  }
  signIn()
}

// 签到方法
async function signIn() {
  if (loading.value)
    return
  loading.value = true
  try {
    const res = await request.put('/system/user/sign', {}, true)
    if (res.code == 200) {
      showSuccessToast('签到成功')
      getSignInInfo()
    }
    else {
      showFailToast(res.msg || '签到失败')
    }
  }
  catch (error) {
    showFailToast(error.msg || '签到失败，请稍后重试')
  }
  finally {
    loading.value = false
  }
}
function gotx(balance, type, title) {
  if (balance && balance > 0) {
    if (!cardinfo.value?.bankNum) {
      showFailToast('请先启用银行卡')
      setTimeout(() => {
        window.location.href = '/index.html'
      }, 1000)
    }
    else {
      showSuccessToast('以成功提现到专属银行卡')
    }
    // navigateTo(`/user/tixian?balance=${balance}&type=${type}&title=${title}`)
  }
  else {
    showFailToast('余额不足')
  }
}

// 页面加载时获取签到信息
onMounted(() => {
  getSignInInfo()
})
</script>

<template>
  <AppHeader title="签到中心" />
  <div class="sign-container">
    <!-- 顶部奖励展示区 -->
    <div class="bonus-header">
      <div class="left">
        <div class="bonus-title">
          玩转签到中心赚钱更容易
        </div>
        <div class="bonus-desc" style="visibility: hidden;">
          <span>可用奖励金</span>
          <var-icon style="margin-left: 6px;" color="#000" :size="22" name="chevron-right" />
        </div>
        <div class="bonus-amount">
          <img class="gif" src="@/static/signin/gif.png" alt="">
          <span class="amount">{{ userData.q1 || 0 }}</span>
          <span class="unit">元</span>
          <button class="withdraw-btn" @click="gotx(userData.q1, '1', '银行卡储蓄金')">
            立即提现
          </button>
        </div>
      </div>
      <img class="gif1" src="@/static/signin/gif1.png" alt="">
    </div>
    <div class="daily-bonusw-warp">
      <!-- <div class="daily-text">每日签到、享公司红利奖励 1-9元</div>
      <div class="bonus-desc">再签到6天可得<span style="color: #d22d01;">800</span>元奖励金</div> -->
      <div class="daily-text">
        当前已连续签到{{ checkinDays }}天
      </div>
      <!-- 签到日历格子 -->
      <div class="sign-calendar">
        <div v-for="day in 7" :key="day" class="calendar-item" :class="[
          { signed: isSignedDay(day) },
          { current: canSignDay(day) },
          { disabled: day > checkinDays + 1 },
        ]" @click="handleDayClick(day)">
          <div class="day-text">
            第{{ day }}天
          </div>
          <img class="jl" src="@/static/signin/jl.png" alt="">
          <div class="bonus-text">
            {{ day == 1 ? 500 : day == 2 ? 800 : day == 3 ? 2000 : day == 4 ? 6000 : day == 5 ? 12000 : day == 6 ? 20000
              : day >= 7 ? 20000 : 0 }}
          </div>
        </div>
      </div>
    </div>
    <!-- 每日签到奖励提示 -->

    <!-- 签到规则 -->
    <div class="sign-rules">
      <div class="rules-title">
        签到规则
      </div>
      <div class="rules-content">
        <p>1.签到采用连续签到模式中断一天重新来过，连续签到天数越多，奖励越丰厚；</p>
        <p>2.最终解释权归"一带一路"世界银行平台所有</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sign-container {
  background: linear-gradient(to bottom, #fff3e6, #feeac9);
  min-height: 100vh;
  padding: 74px 0 0 0;
}

.bonus-header {
  display: flex;
  justify-content: space-between;
  margin-left: 34px;

  .gif {
    width: 28px;
    height: 25px;
  }

  .gif1 {
    width: 125px;
    position: absolute;
    top: 76px;
    right: 0;
    height: 83px;
  }

  .bonus-title {
    font-weight: 500;
    font-size: 15px;
    color: #161616;
    line-height: 17px;
  }

  .bonus-desc {
    margin-top: 26px;
    display: flex;
    font-weight: 500;
    font-size: 18px;
    color: #161616;
    line-height: 20px;
  }

  .bonus-amount {
    margin-top: 13px;
    display: flex;
    align-items: center;

    .amount {
      margin: 0 5px;
      font-weight: 400;
      font-size: 22px;
      color: #161616;
      line-height: 25px;
    }

    .unit {
      font-weight: 500;
      font-size: 13px;
      color: #161616;
    }

    .withdraw-btn {
      margin-left: auto;
      background-color: #d22d01;
      font-weight: 500;
      font-size: 12px;
      color: #f3e162;
      line-height: 13px;
      padding: 4px 10px;
      border-radius: 10px;
      margin-left: 21px;
      border: none;
    }
  }
}

.daily-bonusw-warp {
  background: url('@/static/signin/bg1.png') no-repeat;
  background-size: 100% 100%;
  margin: 30px 14px 0;
  padding: 16px 0;

  .daily-text {
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    margin-left: 26px;
    margin-top: -6px;
  }

  .bonus-desc {
    font-weight: 400;
    font-size: 16px;
    color: #292929;
    margin-top: 29px;
    margin-left: 26px;
    display: flex;
    align-items: center;
  }

  .sign-calendar {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 26px 0;
    text-align: center;

    .calendar-item {
      padding: 8px 0;
      background-color: #ebeae5;
      margin-bottom: 10px;
      margin-right: 10px;
      width: calc(25% - 10px);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .day-text {
        font-weight: 500;
        font-size: 14px;
        color: #8c8c8c;
        line-height: 16px;
      }

      .bonus-text {
        font-weight: 500;
        font-size: 12px;
        color: #8c8c8c;
        line-height: 12px;
      }

      .jl {
        width: 19px;
        height: 19px;
        margin: 5px 0;
      }

      &.signed {
        background-color: #d22d01;
        cursor: not-allowed;

        .day-text,
        .bonus-text {
          color: #fff;
        }
      }

      &.current {
        background-color: #fff;
        cursor: pointer;

        .day-text,
        .bonus-text {
          color: #d22d01;
        }
      }

      &.disabled {
        opacity: 0.5;
        cursor: not-allowed;

        .day-text,
        .bonus-text {
          color: #8c8c8c;
        }
      }
    }
  }
}

.sign-rules {
  padding: 39px 34px 80px;

  .rules-title {
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    line-height: 23px;
  }

  .rules-content {
    margin-top: 15px;
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    line-height: 17px;
  }
}
</style>