<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import { levels } from '../../../core/libs/levels'
import { useRouter } from '../../../core/utils/router'
import { notify } from '@designer-hub/assets/src/assets/svgs'
import LevelCard from './components/level-card.vue'
import { getAppMemberLevelConfigs } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import { sort } from 'radash'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const current = ref(0)
const swiperList = ref(levels.map(({ bgImg }) => bgImg))
const { data: levelConfigs, run: setLevelConfigs } = useRequest(() => getAppMemberLevelConfigs(), {
  initialData: [],
})
const handleSwiperChange = ({ detail }) => {
  current.value = detail.current
}
onMounted(async () => {
  await setLevelConfigs()
  current.value = sort(levelConfigs.value, (it) => it.memberLevel)?.findIndex(
    (it) => it.memberLevel === userInfo.value?.level?.level,
  )
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-4 bg-gradient-to-b from-[#312c38] to-[#171322] p-3.5">
    <NavbarEvo transparent title="会员等级" dark placeholder></NavbarEvo>
    <div class="flex gap-2 bg-gradient-to-r from-[#292331] to-[#35303b] rounded-md px-5 py-1">
      <wd-img width="22" height="22" :src="notify"></wd-img>
      <div
        @click="router.push('/pages/mine/levels/rules/index')"
        class="text-[#f1d2c5] text-sm font-normal font-['PingFang_SC'] leading-normal"
      >
        会员等级成长规则
      </div>
    </div>
    <!-- <view class="card-swiper mx--3.5">
      <wd-swiper
        :autoplay="false"
        v-model:current="current"
        custom-indicator-class="custom-indicator-class"
        custom-image-class="custom-image"
        custom-next-image-class="custom-image-prev"
        custom-prev-image-class="custom-image-prev"
        :list="swiperList"
        previousMargin="24px"
        nextMargin="24px"
      ></wd-swiper>
    </view> -->
    <div class="mx--3.5">
      <div class="my-swiper w-full aspect-[2.22/1] relative">
        <swiper
          :current="current"
          @change="handleSwiperChange"
          circular
          previous-margin="24"
          next-margin="24"
        >
          <template v-for="(it, i) in sort(levelConfigs, (it) => it.memberLevel)" :key="i">
            <swiper-item class="">
              <div
                class="px-1.25 h-full box-border"
                :style="{ padding: current !== i ? '10rpx' : '0 10rpx' }"
              >
                <div
                  class="w-full h-full bg-[length:100%_100%]"
                  :style="{ backgroundImage: `url(${it.memberBgImage})` }"
                >
                  <LevelCard :is-current="userInfo.level?.level === it.memberLevel"></LevelCard>
                </div>
              </div>
            </swiper-item>
          </template>
        </swiper>
      </div>
    </div>
    <template
      v-for="(it, index) in sort(levelConfigs, (it) => it.memberLevel)[current].setMemberRights"
      :key="index"
    >
      <div
        class="bg-[#201d28] rounded-2xl shadow border border-[#504951] border-solid flex gap-4 px-2.5 py-5.5"
      >
        <wd-img width="50" height="50" :src="it.rightsImage"></wd-img>
        <div class="flex flex-col justify-between flex-1">
          <div class="text-[#f1d2c5] text-base font-normal font-['PingFang_SC']">
            {{ it.rightsName }}
          </div>
          <div class="text-white/40 text-xs font-normal font-['PingFang_SC']">
            {{ it.rightsDescription }}
          </div>
        </div>
        <div></div>
      </div>
    </template>
  </div>
</template>
<style lang="scss">
.card-swiper {
  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 24rpx;
  --wot-swiper-nav-dot-color: #e7e7e7;
  --wot-swiper-nav-dot-active-color: #4d80f0;
  padding-bottom: 24rpx;
  :deep(.custom-indicator-class) {
    bottom: -16px;
  }
  :deep(.custom-image) {
    border-radius: 12rpx;
  }
  :deep(.custom-image-prev) {
    height: 168px !important;
  }
}
.my-swiper {
  :deep(.uni-swiper-slides) {
    inset: 0 48rpx;
  }
}
</style>
