<template>
  <z-paging
    ref="pagingRef"
    v-model="prodList"
    :refresher-enabled="false"
    :paging-style="{'top': '0','background-color': '#f2f3f7'}"
    loading-more-no-more-text="没有更多了，看看别的吧"
    @query="onGetProdList"
  >
    <view class="Mall4j page-sign-in">
      <!-- 会员资料 -->
      <view class="member-info">
        <view class="bg">
          <image src="@/package-activities/static/images/member-bg.png" />
        </view>
        <view class="user-box">
          <view class="sculpture">
            <image
              v-if="userInfo.pic"
              :src="util.addDomain(userInfo.pic)"
              @error="userInfo.pic=''"
            />
            <image
              v-else
              src="/static/images/head-sculpture.png"
            />
          </view>
          <view class="text-box">
            <view
              v-if="userCenterInfo.signInCount"
              class="days"
            >
              已连续签到<text class="num">
                {{ userCenterInfo.isSignIn === 0 ? userCenterInfo.signInCount - 1 : userCenterInfo.signInCount }}
              </text>天
            </view>
            <view
              v-if="userCenterInfo.isSignIn === 0"
              class="due"
            >
              今日签到可领<text class="num">
                {{ userCenterInfo.curScore }}
              </text>积分
            </view>
            <view
              v-if="userCenterInfo.isSignIn === 1"
              class="due"
            >
              明日签到可领<text class="num">
                {{ userCenterInfo.scoreList[signInItem] }}
              </text>积分
            </view>
          </view>
          <view
            class="my-integral"
            @tap="oToMyIntegral"
          >
            <view class="img">
              <image src="@/package-activities/static/images/integral-icon.png" />
            </view>
            <view class="text">
              {{ userCenterInfo.score }}
            </view>
          </view>
        </view>
      </view>

      <!-- 每日签到 -->
      <view class="daily-sign">
        <view class="tit">
          每日签到，领惊喜好礼
        </view>
        <view class="sign-box">
          <scroll-view
            scroll-x="true"
            class="category"
            scroll-with-animation
            :scroll-into-view="'s'+ (userCenterInfo.signInCount < 7 ? userCenterInfo.signInCount : '6')"
          >
            <view
              v-for="(signItem, index) in userCenterInfo.scoreList"
              :id="'s'+(index+1)"
              :key="index"
              class="sign-item"
              :style="{'width': singInItemWidth + 'rpx'}"
              :class="['item', signInItem === index + 1 && userCenterInfo.isSignIn === 0 ? 'available'
                : (signInItem >= index + 1 && userCenterInfo.isSignIn === 1)
                  || (signInItem > index + 1 && userCenterInfo.isSignIn === 0) ? 'received' : '' ]"
            >
              <!-- 标准 -->
              <view
                v-if="signInItem < index + 1 && 7 > userCenterInfo.signInCount"
                class="item-box"
              >
                <view class="text">
                  {{ signItem }}积分
                </view>
                <view class="number">
                  <image src="@/package-activities/static/images/integral-icon.png" />
                </view>
              </view>

              <!-- 大于等于7天 -->
              <view
                v-if="signInItem < index + 1 && 7 <= userCenterInfo.signInCount"
                class="item-box"
              >
                <view class="text">
                  {{ userCenterInfo.scoreList[6] }}积分
                </view>
                <view class="number">
                  <image src="@/package-activities/static/images/integral-icon.png" />
                </view>
              </view>

              <!-- 可签到 -->
              <view
                v-if="signInItem === index + 1 && userCenterInfo.isSignIn === 0"
                class="item-box"
              >
                <view class="text">
                  {{ signItem }}积分
                </view>
                <view class="number">
                  <image src="@/package-activities/static/images/integral-icon.png" />
                </view>
              </view>

              <!-- 已签到 -->
              <view
                v-if="(signInItem >= index + 1 && userCenterInfo.isSignIn === 1)
                  || (signInItem > index + 1 && userCenterInfo.isSignIn === 0)"
                class="item-box"
              >
                <view class="text">
                  已领取
                </view>
                <view class="number">
                  {{ signItem }}
                </view>
              </view>

              <!-- 标准 -->
              <view
                v-if="userCenterInfo.signInCount < 7 && signInItem !== index + 1"
                class="day"
              >
                第{{ index + 1 }}天
              </view>
              <!-- 今天 -->
              <view
                v-if="signInItem === index + 1"
                class="day"
              >
                今天
              </view>
              <!-- 连续签到大于7天 -->
              <view
                v-if="userCenterInfo.signInCount >= 7 && signInItem !== index + 1"
                class="day"
              >
                第{{ index + 1 + (userCenterInfo.signInCount - 7 + 1) }}天
              </view>
            </view>
          </scroll-view>
        </view>

        <view
          v-if="!userCenterInfo.isSignIn"
          class="btn"
          @tap="onSignIn()"
        >
          立即签到
        </view>
        <view
          v-if="userCenterInfo.isSignIn"
          class="btn grey"
          @tap="onSignedInFinish()"
        >
          已签到
        </view>
      </view>

      <!-- 积分任务 -->
      <view class="upgrade">
        <view class="tit">
          积分任务
        </view>
        <view
          v-if="shoppingScoreSwitch"
          class="item"
        >
          <view class="text-box">
            <view class="text">
              商城购物送积分
            </view>
            <view class="add">
              消费{{ shoppingGetScore }}元送1积分
            </view>
          </view>
          <view
            class="btn"
            @tap="onToShopping()"
          >
            去完成
          </view>
        </view>
        <view
          v-if="registerScore>0"
          class="item"
        >
          <view class="text-box">
            <view class="text">
              会员注册送积分
            </view>
            <view class="add">
              +{{ registerScore }} 积分
            </view>
          </view>
          <view class="btn default">
            已完成
          </view>
        </view>
      </view>

      <!-- 商品兑换 -->
      <view
        v-if="prodList.length > 0"
        class="guess-like"
      >
        <view class="tit">
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
          <view class="text">
            商品兑换
          </view>
          <view class="bg">
            <image src="/static/images/tit-bg.png" />
          </view>
        </view>
        <view class="prods">
          <block
            v-for="prodItem in prodList"
            :key="prodItem.spuId"
          >
            <ScoreProdItem :prod-item="prodItem" />
          </block>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import ScoreProdItem from '../../components/score-prod-item/index.vue'
import util from '@/utils/util.js'

const userInfo = ref({}) // 会员信息
onLoad(() => {
  // 获取缓存里的用户信息
  userInfo.value = uni.getStorageSync('cloudUserDetails')
  // 获取积分签到数据
  onGetMemberCenterInfo()
})
/**
 * 获取商品列表
 */
const prodList = ref([]) // 商品列表
const pagingRef = ref(null)
const onGetProdList = (pageNum, pageSize) => {
  http.request({
    url: '/mall4cloud_search/ua/search/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      spuType: 3
    }
  }).then(res => {
    pagingRef.value.complete(res.list[0].spus)
  })
}

/**
 * 获取积分签到数据
 */
const userCenterInfo = ref({
  signInCount: 0,
  curScore: 0, // 当天签到可领积分
  score: 0,
  scoreList: [],
  isSignIn: 0
})
const signInItem = ref('') // 第N天的签到按钮
const registerScore = ref(0) // 注册赠送积分
const shoppingGetScore = ref(0) // 购物消费多少金额可获得1积分
const shoppingScoreSwitch = ref(null)
const singInItemWidth = ref(90) // 签到项的宽度
let isSignInItem = ''
const onGetMemberCenterInfo = () => {
  http.request({
    url: '/mall4cloud_user/score/score_info',
    method: 'GET',
    data: {}
  }).then(res => {
    // 领取积分签到第几个签到按钮，大于7天，一直为第六个签到按钮
    if (res.signInCount >= 7) {
      isSignInItem = 6
      const exceededDays = res.signInCount - (res.scoreList.length - 1)
      for (let i = 0; i < exceededDays; i++) {
        res.scoreList.push(res.scoreList[6])
      }
      res.scoreList.splice(0, exceededDays)
    } else {
      isSignInItem = res.signInCount
    }
    signInItem.value = isSignInItem
    userCenterInfo.value = res
    // 注册可获得积分
    registerScore.value = res.registerScore
    // 购物消费多少金额可获得1积分
    shoppingGetScore.value = util.accuracyCount(res.shoppingGetScore, 100, 3)
    shoppingScoreSwitch.value = res.shoppingScoreSwitch
    const maxWidth = Math.max.apply(Math, userCenterInfo.value.scoreList.map((item) => {
      return item
    }))
    singInItemWidth.value = ((maxWidth / 10).toFixed().length * 12) + 90
  })
}

/**
 * 签到（获取积分）
 */
const onSignIn = () => {
  http.request({
    url: '/mall4cloud_user/score/update_user_score',
    method: 'GET'
  }).then(res => {
    uni.showToast({
      title: res,
      icon: 'none',
      duration: 1000
    })
    onGetMemberCenterInfo()
  })
}

// 已签到
const onSignedInFinish = () => {
  uni.showToast({
    title: '今天已经签到过啦~ 请明天再来！',
    icon: 'none'
  })
}

// 去我的积分
const oToMyIntegral = () => {
  uni.navigateTo({
    url: '/package-activities/pages/my-integral/my-integral'
  })
}

/**
 * 去购物
 */
const onToShopping = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}

</script>

<style lang="scss" scoped>
@use "./sign-in.scss";
</style>
