<template>
  <view class="Mall4j page-member-benefits">
    <!-- 权益 -->
    <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"
        />
        <!-- active -->
        <view
          v-for="(item,index) in benefitsInfo"
          :key="index"
          class="item"
          :class="{ active:index===x }"
          @click="itemBtn(index)"
        >
          <view class="img">
            <image
              v-if="!item.isPicError"
              :src="util.addDomain(item.icon)"
              @error="onImgError(item)"
            />
            <image
              v-else
              src="@/static/images/def.png"
            />
          </view>
          <view class="text">
            {{ item.rightsName }}
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="benefits-content">
      <rich-text :nodes="details" />
    </view>
  </view>
</template>

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

const x = ref(2)
const ScrollLeft = ref(200)
const ScrollLeft1 = ref(200) // 多创建一个ScrollLeft1是因为小程序端在scroll中直接赋值给ScrollLeft会卡顿，目前只能想到这种办法，后续有更好的解决方案会进行优化

let width = 53.5
let timer = ''
const old = {
  scrollTop: 0
}
const widthArr = []
const iconsWidth = ref(750)
const benefitsInfo = ref([])
const details = ref('')
onLoad(() => {
  onGetListRightsByLevelType()
})

watch(() => ScrollLeft1.value, (e) => {
  if (e < width / 2) {
    x.value = 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.value = i + 1
    }
  }
})

/**
 *  设置权益图标所占的宽度
 */
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: '/tmerclub_user/user_level/list_rights_by_level_type',
    method: 'GET',
    data: {
      levelType: 1
    }
  }).then(res => {
    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 () {
      let query
      // #ifdef H5 || APP-PLUS
      query = uni.createSelectorQuery().in()
      query.select('.item').boundingClientRect(data => {
        width = (data.width + (data.width / 80) * 11 * 2) / 2
      }).exec()
      // #endif
      // #ifdef MP-WEIXIN
      query = wx.createSelectorQuery()
      query.select('.item').boundingClientRect(data => {
        width = (data.width + (data.width / 80) * 11 * 2) / 2
      }).exec()
      // #endif
      benefitsWidth()
      itemBtn(0)
    })
  })
}
/**
 * 监听滚动
 */
const onWatchScroll = (e) => {
  old.scrollTop = e.detail.scrollLeft
  ScrollLeft1.value = e.detail.scrollLeft

  clearTimeout(timer) // 每次滚动前 清除一次
  timer = setTimeout(() => {
    onGetScroll(old.scrollTop)
  }, 50)
}
/**
 * 滚动结束
 */
const onGetScroll = (scrollTop) => {
  const isX = scrollTop
  ScrollLeft.value = scrollTop
  if (isX >= 0 && isX <= width) {
    ScrollLeft.value = 0
    ScrollLeft1.value = 0
    itemBtn(0)
  }
  const min = [0, 1, 3, 5, 7, 9, 11, 13, 15]
  const max = [1, 3, 5, 7, 9, 11, 13, 15, 17]
  if (isX > width * min[x.value] && isX <= width * max[x.value]) {
    ScrollLeft.value = width * 2 * (x.value)
    ScrollLeft1.value = width * 2 * (x.value)
    itemBtn(x.value)
  }
}
/**
 * 点击权益图标
 */
const itemBtn = (index) => {
  x.value = index
  ScrollLeft.value = width * 2 * (index)
  ScrollLeft1.value = width * 2 * (index)
  details.value = util.formatHtml(benefitsInfo.value[index].details)
}

const onImgError = (item) => {
  item.isPicError = true
}

</script>

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