<script setup lang="ts">
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'

const props = withDefaults(
  defineProps<{
    isCurrent: boolean
    option?: any[]
    index?: number
  }>(),
  { isCurrent: false },
)
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const percentage = computed(() => {
  const currentLevel = userInfo.value?.level?.level
  const targetLevel = props.option[props.index + 1]
  if (targetLevel) {
    return (userInfo.value?.level?.point / targetLevel.points) * 100
  }
  return 0
})
// 是否最高的等级
const isMaxLevel = computed(() => {
  return userInfo.value?.level?.level === props.option?.[props.option.length - 1]?.memberLevel
})
// 是否高于当前等级
const isHigherThanCurrent = computed(() => {
  return userInfo.value?.level?.level > props.option[props.index]?.memberLevel
})
// 是否低于当前等级
const isLowerThanCurrent = computed(() => {
  return userInfo.value?.level?.level < props.option[props.index]?.memberLevel
})
</script>
<template>
  <div class="w-full h-full box-border p-4 flex flex-col">
    <div class="flex justify-end pt-2">
      <div class="w-[66px] h-[26px] relative" v-if="isCurrent">
        <div class="w-[66px] h-[22px] left-0 absolute bg-[#3c556b] rounded-md"></div>
        <div
          class="left-[10px] top-0.25 absolute text-center text-[#dfdfdf] text-xs font-normal font-['PingFang_SC'] leading-relaxed"
        >
          当前等级
        </div>
      </div>
    </div>
    <div class="flex-1"></div>
    <!--    {{ userInfo.level.point }}-->
    <!--    {{ userInfo.level.point }}-->
    <!--    {{ percentage }}-->
    <template v-if="isHigherThanCurrent">
      <div class="text-[#61311b] text-xs font-normal font-['PingFang_SC'] leading-relaxed">
        <!--        还差{{ props.option[props.index]?.points - userInfo.level.point }}积分升级-->
        当前高于该等级
      </div>
    </template>
    <template v-else-if="isLowerThanCurrent">
      <div class="text-[#61311b] text-xs font-normal font-['PingFang_SC'] leading-relaxed">
        <!--        还差{{ props.option[props.index]?.points - userInfo.level.point }}积分升级-->
        距{{ option[index].memberLevelName }}还需{{
          option[index].points - userInfo.level.point
        }}积分
      </div>
      <wd-progress :percentage="(userInfo.level.point / option[index].points) * 100" hide-text />
    </template>
    <template v-else-if="isMaxLevel">
      <div class="text-[#61311b] text-xs font-normal font-['PingFang_SC'] leading-relaxed">
        当前积分{{ userInfo.level.point }}
      </div>
    </template>
    <template v-else>
      <div class="text-[#61311b] text-xs font-normal font-['PingFang_SC'] leading-relaxed">
        距{{ option[index + 1].memberLevelName }}还需{{
          option[index + 1].points - userInfo.level.point
        }}积分
      </div>
      <wd-progress :percentage="percentage" hide-text />
    </template>
  </div>
</template>
