<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
      v-show="loaded"
      class="Mall4j"
      :class=" 'page-member '+'vip'+(memberInfo ? memberInfo.level : 4)"
    >
      <!-- 会员资料 -->
      <view class="member-info">
        <view class="member-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 class="name-level">
              <view class="name">
                {{ userInfo.nickName }}
              </view>
              <view class="level vip">
                <view
                  class="img"
                >
                  <image
                    src="@/package-activities/static/images/vip-icon.png"
                  />
                </view>
                <view class="text">
                  <text v-if="!memberInfo">
                    未开通
                  </text>
                  <text v-else>
                    {{ memberInfo.levelName }}
                  </text>
                </view>
              </view>
            </view>
            <view class="due">
              <!-- <text>开通会员尊享额外特权</text> -->
              <text v-if="!memberInfo">
                你还不是付费会员~
              </text>
              <text v-else>
                {{ userInfo.expireTime.substr(0,10) }}到期
              </text>
            </view>
          </view>
          <view
            class="buy-btn"
            @tap="onShowOpenMembershipPopup"
          >
            <!-- <text>立即开通</text> -->
            <text>{{ memberInfo?'立即续费':'立即开通' }}</text>
          </view>
        </view>

        <!-- 会员资产 -->
        <view class="user-assets">
          <view
            class="item"
            @tap="onToMyIntegral"
          >
            <view class="item-box">
              <view class="text-arrow1">
                积分
              </view>
            </view>
            <view class="number">
              <view class="text">
                {{ userInfo.score }}
              </view>
            </view>
          </view>
          <view class="item">
            <view class="item-box">
              <view class="text-arrow1">
                成长值
              </view>
            </view>
            <view class="number">
              {{ userInfo.growth }}
            </view>
          </view>
          <view
            class="item"
            @tap="onToSignIn"
          >
            <view class="text-arrow1">
              连续签到数
            </view>
            <view class="number">
              {{ userInfo.signInCount }}
            </view>
          </view>
        </view>
      </view>
      <!-- 会员特权 -->
      <view class="benefits">
        <view class="tit">
          <view class="text">
            会员特权
          </view>
          <view
            v-if="benefitsInfo.length"
            class="text-arrow"
            @tap="ToMemberBenefits"
          >
            查看详情
          </view>
        </view>
        <view class="con-box">
          <view
            v-for="(item,index) in showRights"
            :key="index"
            class="item"
            :class="{default: !item.status}"
          >
            <block v-if="item.rightsName">
              <view class="img">
                <img-show
                  :src="item.icon"
                  :class-list="['img']"
                />
              </view>
              <view class="text">
                {{ item.rightsName }}
              </view>
            </block>
          </view>
        </view>
      </view>
      <!-- 开通会员 -->
      <view
        class="popup"
        :class="{ show: isShowOpenMembershipPopup }"
      >
        <view
          class="popup-mask"
          @tap="onClosePopup"
        />
        <view class="open-membership">
          <swiper
            class="vip-box"
            :style="{height: rightsListLength > 8 ? '840rpx' : ''}"
            :current-item-id="currentItemId"
            previous-margin="45rpx"
            next-margin="45rpx"
          >
            <swiper-item
              v-for="level in levelList"
              :key="level.level"
              :item-id="level.userLevelId+''"
              class="swiper-item"
            >
              <view :class="'vip-item '+'vip'+level.level">
                <view class="item-up">
                  <view class="bg">
                    <image src="../../static/images/vip-level-bg.png" />
                  </view>
                  <view class="text-box">
                    <view class="name">
                      <view class="text">
                        {{ level.levelName }}
                      </view>
                      <view
                        v-if="memberInfo && memberInfo.level === level.level"
                        class="cur-level"
                      >
                        当前等级
                      </view>
                    </view>
                    <view class="des">
                      {{ level.levelName }}尊享{{ level.userRightsList.length }}大特权
                    </view>
                  </view>
                </view>
                <view class="item-box">
                  <view
                    v-for="(item,index) in level.userRightsList"
                    :key="'item'+index"
                    class="item"
                  >
                    <view class="img">
                      <img-show :src="item.icon" />
                    </view>
                    <view class="text">
                      {{ item.rightsName }}
                    </view>
                  </view>
                </view>
                <view class="item-btn ">
                  <view v-if="level.recruitStatus!==0">
                    <view
                      v-if="memberInfo && memberInfo.level === level.level"
                      class="btn"
                      @click="onToPurchaseMembership(level.userLevelId,level.level)"
                    >
                      {{ memberInfo ?'续费会员':'开通会员' }}
                    </view>
                    <view
                      v-else-if="memberInfo && memberInfo.level > level.level"
                      class="des"
                    >
                      您已购买更高级会员
                    </view>
                    <view
                      v-else
                      class="btn"
                      @click="onToPurchaseMembership(level.userLevelId,level.level)"
                    >
                      开通会员
                    </view>
                  </view>
                  <view
                    v-if="level.recruitStatus===0"
                    class="des"
                  >
                    该会员等级已停止招募
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
          <view
            class="close"
            @tap="onClosePopup"
          >
            <image src="/static/images/close.png" />
          </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"
              class="item"
            />
          </block>
        </view>
      </view>
      <!-- 广告弹窗 -->
      <popup-ad
        v-model="popupadShow"
        :popup-info="popupInfo"
        :shop-id="0"
      />
    </view>
  </z-paging>
</template>
<script setup>
import ScoreProdItem from '../../components/score-prod-item/index.vue'
import util from '@/utils/util.js'

onLoad(() => {
  onGetUserInfo()
  onGetLevelList()
  onListRightsByLevelType()
  // 请求会员中心的弹窗广告
  onGetPopupInfo({ pageType: 2, shopId: 0 })
})

onShow(() => {
  if (uni.getStorageInfoSync('cloudLoadMemberCenter')) {
    // 请求购买会员支付成功的弹窗广告
    onGetPopupInfo({ pageType: 3, shopId: 0 })
    uni.removeStorageSync('cloudLoadMemberCenter')
  }
})

// 获取弹窗广告信息
const popupadShow = ref(false)
const popupInfo = ref({})
const onGetPopupInfo = async (params) => {
  const info = await util.getPopupInfo(params)
  if (info) {
    popupInfo.value = info
    popupadShow.value = true
  }
}

/**
 * 用户点击右上角分享(勿删)
 */
onShareAppMessage(() => {})

const memberInfo = ref(null)
const levelList = ref([])
const benefitsInfo = ref([]) // 付费会员所有权益

const showRights = computed(() => {
  if (!memberInfo.value) {
    return benefitsInfo.value
  }
  const rights = JSON.parse(JSON.stringify(benefitsInfo.value))
  let list = []
  levelList.value.forEach(item => {
    if (item.level === memberInfo.value.level) {
      list = item.userRightsList
    }
  })
  rights.forEach(item => {
    item.status = false
    list.forEach(el => {
      if (el.rightsId === item.rightsId) {
        item.status = true
      }
    })
  })

  return rights
})
const currentItemId = computed(() => {
  if (levelList.value && levelList.value.length) return memberInfo.value ? memberInfo.value.userLevelId + '' : ''
  return ''
})

/**
 * 通过等级类型获取所有权益
 */
const rightsListLength = ref(0)
const onListRightsByLevelType = () => {
  http.request({
    url: '/tmerclub_user/user_level/list_rights_by_level_type',
    method: 'GET',
    data: {
      levelType: 1
    }
  }).then(res => {
    benefitsInfo.value = res.filter(item => {
      item.status = true
      return item.rightsName
    })
    rightsListLength.value = benefitsInfo.value.length
  })
}
/**
 * 个人会员信息获取
 */
const loaded = ref(false)
const userInfo = ref({})
const onGetUserInfo = () => {
  http.request({
    url: '/tmerclub_user/user_level/member_info',
    method: 'GET'
  }).then(res => {
    userInfo.value = {
      expireTime: res.expireTime,
      growth: res.growth,
      nickName: res.nickName,
      pic: res.pic,
      score: res.score,
      shopScore: res.shopScore,
      signInCount: res.signInCount
    }
    memberInfo.value = res.userPayedLevel
    loaded.value = true
  })
}
/**
 * 会员等级列表获取
 */
const onGetLevelList = () => {
  http.request({
    url: '/tmerclub_user/user_level/ua/list_level_by_type',
    method: 'GET',
    data: {
      levelType: 1
    }
  }).then(res => {
    levelList.value = res
  })
}
// 开通会员
const isShowOpenMembershipPopup = ref(false) // 开通会员弹窗
const onShowOpenMembershipPopup = () => {
  if (!levelList.value.length) {
    uni.showToast({
      title: '暂无付费会员服务',
      duration: 2000,
      icon: 'none'
    })
    return
  }
  isShowOpenMembershipPopup.value = true
}
// 获取商品列表

const pagingRef = ref(null)
const prodList = ref([]) // 商品列表
const onGetProdList = (pageNum, pageSize) => {
  http.request({
    url: '/tmerclub_search/ua/search/page',
    method: 'GET',
    data: {
      pageNum,
      pageSize,
      spuType: 3
    }
  }).then(res => {
    pagingRef.value.complete(res.list[0].spus)
  })
}

// 前往购买会员页面
const onToPurchaseMembership = (userLevelId, level) => {
  isShowOpenMembershipPopup.value = false
  uni.navigateTo({
    url: `/package-activities/pages/member-recharge/member-recharge?userLevelId=${userLevelId}&level=${level}`
  })
}

// 去我的积分页
const onToMyIntegral = () => {
  uni.navigateTo({
    url: '/package-activities/pages/my-integral/my-integral'
  })
}
// 去签到页
const onToSignIn = () => {
  uni.navigateTo({
    url: '/package-activities/pages/sign-in/sign-in'
  })
}

// 跳转到会员权益
const ToMemberBenefits = () => {
  uni.navigateTo({
    url: '/package-activities/pages/member-benefits/member-benefits'
  })
}

// 关闭弹窗
const onClosePopup = () => {
  isShowOpenMembershipPopup.value = false
}
</script>

<style lang="scss" scoped>
@use "./member-center.scss";
@use "@/popup.scss";
</style>
