<template>
  <view class="Mall4j member-allPrivileges">
    <!-- 全部权益黑色背景 -->
    <view class="benefits-icons" />
    <view class="benefits-content">
      <!-- 全部权益 -->
      <view class="benefits-all">
        <view class="benefits-top-logo">
          <text>会员权益</text>
        </view>
        <view class="benefits-box">
          <view
            v-for="(item,index) in userRights"
            :key="index"
            class="benefits-box-item"
            :class="{default: memberInfo.level < item.level}"
          >
            <block v-if="item.rightsName">
              <view class="img">
                <img-show :src="item.icon" />
                <view
                  v-if="memberInfo.level < item.level"
                  class="benefits-lock"
                >
                  {{ levelName(item.levelName) }}解锁
                </view>
              </view>
              <view>
                <text
                  class="oi-tittle"
                  :class="{default: memberInfo.level < item.level}"
                >
                  {{ item.rightsName }}
                </text>
                <text
                  class="fu-tittle"
                  :class="{default: memberInfo.level < item.level}"
                >
                  {{ item.description }}
                </text>
              </view>
            </block>
          </view>
        </view>
      </view>

      <!-- 会员商品 -->
      <view class="member-goods">
        <!-- 会员等级说明 -->
        <view
          class="tit"
          style="padding-left: 20rpx"
        >
          会员等级说明
        </view>
        <view
          v-if="memberInfo.levelType !== 1"
          class="tit-fu"
          style="padding-left: 20rpx"
        >
          各等级会员需要达到相对应的成长值才可以升级
        </view>
        <view class="level-benefits">
          <view class="item">
            <view class="level-name tittle">
              用户等级
            </view>
            <view
              v-if="memberInfo.levelType !== 1"
              class="text tittle"
            >
              成长值
            </view>
          </view>
          <view
            v-for="(item,index) in listLevel"
            :key="index"
            class="item"
          >
            <view class="level-name">
              <view class="name">
                {{ item.levelName }}
              </view>
            </view>
            <view
              v-if="memberInfo.levelType !== 1"
              class="text"
            >
              {{ item.needGrowth }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const levelName = (name) => {
  return name.replace('会员', '')
}
const listLevel = ref([])
const userRights = ref([])
const memberInfo = ref('')
onLoad(() => {
  memberInfo.value = uni.getStorageSync('cloudMemberInfo')
  onGetListLevelByType()
  onGetListRightsByLevelType()
})

/**
 * 根据会员类型查权益列表
 */
const onGetListRightsByLevelType = () => {
  http.request({
    url: '/mall4cloud_user/user_level/list_rights_by_level_type',
    method: 'GET',
    data: {
      levelType: memberInfo.value.levelType
    }
  }).then(res => {
    userRights.value = res.filter((item) => {
      return item.rightsName
    })
  })
}
/**
 * 会员等级表
 */
const onGetListLevelByType = () => {
  http.request({
    url: '/mall4cloud_user/user_level/ua/list_level_by_type',
    method: 'GET',
    data: {
      levelType: memberInfo.value.levelType
    }
  }).then(res => {
    res.forEach(item => {
      const data = {
        levelName: item.levelName,
        needGrowth: item.needGrowth
      }
      listLevel.value.push(data)
    })
  })
}

</script>

<style lang="scss" scoped>

@use "./member-allPrivileges.scss";
</style>
