<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-member '+'vip1'"
    >
      <!-- 会员资料 -->
      <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>
            <view class="due">
              <text class="type">
                {{ memberInfo.levelType===1?'VIP':'普通' }}
              </text>
              <text class="type-name">
                {{ memberInfo.levelName }}
              </text>
            </view>
          </view>
        </view>

        <!-- 会员成长值 -->
        <view class="user-growth-value">
          <view class="progress-bar">
            <view
              class="progress-baring"
              :style="'width: '+( progressBar * 480)+'rpx;'"
            />
            <view class="bottom-v">
              <view class="text">
                {{ memberInfo.levelName }}
              </view>
              <view
                v-if="memberInfo.nextLevelName && memberInfo.levelName !== memberInfo.nextLevelName"
                class="text"
              >
                {{ memberInfo.nextLevelName }}
              </view>
            </view>
          </view>
          <view class="growth-name">
            <view class="text-arrow">
              成长值
            </view>
            <view class="number">
              {{ userInfo.growth }}
            </view>
          </view>
        </view>
      </view>

      <!-- 开通付费 -->
      <view
        class="open-paid"
      >
        <view class="paid-membership">
          <view class="paid-title">
            <text>付费会员</text>
            <text class="point" />
            <text>尊享版</text>
          </view>

          <view class="lower-bar" />

          <view class="paid-pay-money">
            每月立省<text style="color:#E13E2D">
              300
            </text>元
          </view>
        </view>
        <view
          class="open-paid-btn"
          @tap="onToPaidMembershipPage"
        >
          {{ payMenber?'付费会员':'开通付费' }}
        </view>
      </view>

      <!-- 会员特权 -->
      <view class="benefits">
        <view class="tit">
          <view class="text">
            会员权益
          </view>
          <view
            v-if="isShowAllPrivilegesBtn"
            class="text-arrow"
            @tap="onToAllBenefits"
          >
            全部特权
          </view>
        </view>
        <view class="con-box">
          <view
            v-for="(item,index) in showRights"
            :key="index"
            class="item"
            :class="{default: !item.status}"
            @tap="onToBenefits(item.rightsName)"
          >
            <view class="img">
              <img-show :src="item.icon" />
            </view>
            <view class="text">
              {{ item.rightsName }}
            </view>
          </view>
          <view
            v-if="showRights.length === 0"
            class="no-data"
          >
            暂无权益
          </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">
          <view
            v-for="prodItem in prodList"
            :key="prodItem.spuId"
            class="prod-item"
          >
            <ScoreProdItem :prod-item="prodItem" />
          </view>
        </view>
      </view>
    </view>
    <popup-ad
      v-model="popupadShow"
      :popup-info="popupInfo"
      :shop-id="0"
    />
  </z-paging>
</template>
<script setup>
import ScoreProdItem from '../../components/score-prod-item/index.vue'
import util from '@/utils/util.js'

onShow(() => {
  onGetUserInfo()
})

onLoad(() => {
  onGetPopupInfo()
})
// 获取弹窗广告信息
const popupadShow = ref(false)
const popupInfo = ref({})
const onGetPopupInfo = async () => {
  const info = await util.getPopupInfo({ pageType: 2, shopId: 0 })
  if (info) {
    popupInfo.value = info
    popupadShow.value = true
  }
}

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

let levelList = []
const memberInfo = ref({})
const showRights = computed(() => {
  if (!memberInfo.value.userRightsList) {
    return []
  }
  const rights = JSON.parse(JSON.stringify(memberInfo.value.userRightsList))
  let list = []
  levelList.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 payMenber = ref({})

const userInfo = ref({})
const onGetUserInfo = () => {
  http.request({
    url: '/tmerclub_user/user_level/member_info',
    method: 'GET'
  }).then(res => {
    userInfo.value = {
      pic: res.pic,
      nickName: res.nickName,
      growth: res.growth
    }
    memberInfo.value = res.userPayedLevel ? res.userPayedLevel : res.userOrdinaryLevel
    payMenber.value = res.userPayedLevel
    onGetLevelList()
    onListRightsByLevelType()
    uni.setStorageSync('cloudMemberInfo', memberInfo.value)
  })
}
/**
 * 普通会员等级列表获取
 */
const progressBar = ref(0)
const onGetLevelList = () => {
  http.request({
    url: '/tmerclub_user/user_level/ua/list_level_by_type',
    method: 'GET',
    data: {
      levelType: memberInfo.value.levelType
    }
  }).then(res => {
    levelList = res
    progressBar.value = (userInfo.value.growth / memberInfo.value.nextGrowth) > 1 ? 1 : (userInfo.value.growth / memberInfo.value.nextGrowth)
  })
}

/**
 * 通过等级类型获取所有权益
 */
const isShowAllPrivilegesBtn = ref(false)
const onListRightsByLevelType = () => {
  http.request({
    url: '/tmerclub_user/user_level/list_rights_by_level_type',
    method: 'GET',
    data: {
      levelType: memberInfo.value.levelType
    }
  }).then(res => {
    memberInfo.value.userRightsList = res.filter(item => {
      return item.rightsName
    })
    if (memberInfo.value.userRightsList.length) {
      isShowAllPrivilegesBtn.value = true
    }
  })
}
const prodList = ref([]) // 商品列表
const pagingRef = ref(null)
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 onToPaidMembershipPage = () => {
  uni.navigateTo({
    url: '/package-activities/pages/member-center/member-center'
  })
}

// 去全部权益页
const onToAllBenefits = () => {
  uni.navigateTo({
    url: '/package-activities/pages/member-allPrivileges/member-allPrivileges'
  })
}

/**
 * 统一跳转方法
 */
const onToBenefits = (rightsName) => {
  uni.navigateTo({
    url: `/package-activities/pages/member-benefits-general/member-benefits-general?rightsName=${rightsName}`
  })
}

</script>

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