<template>
  <view class="Mall4j page-member-benefits">
    <!-- 权益 -->
    <!-- 备注：前端写这里的时候问一下我（孝成） -->
    <view class="all-benefits">
      <view class="all-benefits-icon" /><text>会员权益{{ benefitsInfo.length }}项</text>
    </view>
    <scroll-view
      scroll-x="true"
      scroll-with-animation
      :scroll-left="ScrollLeft"
      @scroll="onWatchScroll"
    >
      <view
        class="benefits-icons"
        :style="'width: '+iconsWidth +'rpx;'"
      >
        <view
          v-for="(item) in 2"
          :key="item+'item'"
          style="display:inline-block;width: 150rpx;margin-left:-10rpx"
        />
        <view
          v-for="(item,index) in benefitsInfo"
          :id="'item'+index"
          :key="index"
          :class="['item',active(index)]"
          @tap="onGetRightInfo(index)"
        >
          <view class="img">
            <image :src="util.addDomain(item.icon)" />
          </view>
          <view class="text">
            {{ item.rightsName }}
          </view>
          <view class="active1" />
        </view>
      </view>
    </scroll-view>

    <view class="benefits-content">
      <!-- 权益详情 -->
      <rich-text :nodes="details" />
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

const ScrollLeft = ref(300)
const ScrollLeft1 = ref(300) // 多创建一个ScrollLeft1是因为小程序端在scroll中直接赋值给ScrollLeft会卡顿，目前只能想到这种办法，后续有更好的解决方案会进行优化
let width = 53.5
const details = ref('')
let timer = ''
const widthArr = []
let memberInfo = ''
const old = {
  scrollTop: 0
}
const benefitsInfo = ref([])
const iconsWidth = ref(750)
const rightsName = ref('')
let iconsIndex = 0
let x
watch(ScrollLeft1, (e) => {
  if (e < width / 2) {
    x = 0
  }
  if (!widthArr.length) {
    for (let i = 0; i < 10; i++) {
      widthArr[i] = width * 2 + width * i * 4
    }
  }
  for (let i = 0; i < widthArr.length - 1; i++) {
    if (e > widthArr[i] && e <= widthArr[i + 1]) {
      x = i + 1
    }
  }
})

onLoad((option) => {
  rightsName.value = option.rightsName
  memberInfo = uni.getStorageSync('cloudMemberInfo')
  onGetListRightsByLevelType()
})

const active = (index) => {
  if (index === x) {
    return 'active'
  } else {
    return ''
  }
}
/**
 * 顶部滚动区域的宽度
 */
const benefitsWidth = () => {
  for (let i = 0; i < 10; i++) {
    widthArr[i] = width + width * (i * 2)
  }
  if (benefitsInfo.value.length === 1) {
    iconsWidth.value = 750
    return
  }
  let newWidth = ((benefitsInfo.value.length) * 204) + 600
  if (newWidth < 750) {
    newWidth = 750 + 300
  }
  iconsWidth.value = newWidth
}
/**
 * 根据会员类型查权益列表
 */
const onGetListRightsByLevelType = () => {
  http.request({
    url: '/mall4cloud_user/user_level/list_rights_by_level_type',
    method: 'GET',
    data: {
      levelType: memberInfo.levelType
    }
  }).then(res => {
    const that = this
    benefitsInfo.value = res.filter(item => {
      return item.rightsName !== null
    })
    if (benefitsInfo.value.length === 0) {
      uni.showModal({
        title: '提示',
        content: '权益状态错误',
        showCancel: false,
        success (res) {
          if (res.confirm) {
            uni.navigateBack(1)
          }
        }
      })
    }
    nextTick(function () {
      const query = uni.createSelectorQuery().in(that)
      query.select('.item').boundingClientRect(data => {
        width = (data.width + (data.width / 80) * 11 * 2) / 2
      }).exec()
      benefitsWidth()
      res.forEach((item, i) => {
        if (rightsName.value === item.rightsName) {
          iconsIndex = i
        }
      })
      setTimeout(() => {
        onGetRightInfo(iconsIndex)
      })
    })
  })
}

/**
 * 获取特权详情 滚动到指定的图标
 */
const onGetRightInfo = (index) => {
  x = index
  ScrollLeft.value = width * 2 * (index)
  ScrollLeft1.value = width * 2 * (index)
  details.value = util.formatHtml(benefitsInfo.value[index].details)
}
/**
 * 监听滚动
 */
const onWatchScroll = (e) => {
  old.scrollTop = e.detail.scrollLeft
  ScrollLeft1.value = old.scrollTop
  clearTimeout(timer)
  timer = setTimeout(function () {
    onGetScroll(old.scrollTop)
  }, 50)
}
/**
 * 当滚动的幅度超过一个图标时，x+1
 */
const onGetScroll = (scrollTop) => {
  ScrollLeft.value = scrollTop
  const min = [0, 1, 3, 5, 7, 9, 11, 13, 15]
  const max = [1, 3, 5, 7, 9, 11, 13, 15, 17]
  const x = scrollTop
  if (x >= 0 && x <= width) {
    ScrollLeft.value = 0
    ScrollLeft1.value = 0
    onGetRightInfo(x)
  }
  if (x > width * min[x] && x <= width * max[x]) {
    ScrollLeft.value = width * 2 * x
    ScrollLeft1.value = width * 2 * x
    onGetRightInfo(x)
  }
}

</script>

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