<route lang="json">
{
  "style": {
    "navigationBarTitleText": "等级规则",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>
<script lang="ts" setup>
import { useMemberLevelsStore, useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import star from '@designer-hub/assets/src/libs/assets/star'
import Card from '@/components/card.vue'
import up from '@designer-hub/assets/src/libs/assets/up'
import down from '@designer-hub/assets/src/libs/assets/down'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const memberLevelsStore = useMemberLevelsStore()
const { memberLevels } = storeToRefs(memberLevelsStore)
const tab = ref(0)
</script>
<template>
  <div class="flex-grow flex flex-col">
    <!-- Header -->

    <!-- Tabs -->
    <wd-tabs v-model="tab">
      <template v-for="item in ['等级介绍', '等级变更规则']" :key="item">
        <wd-tab :title="item"></wd-tab>
      </template>
    </wd-tabs>
    <template v-if="tab === 0">
      <div class="flex-grow bg-white px-4">
        <div class="mt-10 text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
          筑巢荟会员等级由用户当前积分数量决定，共分为以下{{ memberLevels.length }}个等级
        </div>
        <!--    {{ memberLevels }}-->
        <!--    {{ userInfo }}-->
        <div class="mt-5 rounded-[10px] border border-solid border-[#b18957] overflow-hidden">
          <div class="grid grid-cols-2 auto-rows-10 center">
            <div
              class="text-center text-[#bc8547] text-sm font-normal font-['PingFang_SC'] leading-normal"
            >
              会员等级
            </div>
            <div
              class="text-center text-[#bc8547] text-sm font-normal font-['PingFang_SC'] leading-normal"
            >
              积分值区间
            </div>

            <template v-for="(it, i) in memberLevels" :key="i">
              <div
                class="h-full flex center relative"
                :class="['bg-[#fffcf6]', 'bg-[#fff8eb]', 'bg-[#fff6e3]', 'bg-[#fff3d9]'][i]"
              >
                <wd-img
                  v-if="it.id === userInfo.level.level"
                  custom-class="absolute! left-10vw "
                  width="14"
                  height="14"
                  :src="star"
                ></wd-img>
                <div
                  class="text-center text-[#bc8547] text-sm font-normal font-['PingFang_SC'] leading-normal"
                >
                  {{ it.memberLevelName }}
                </div>
              </div>
              <div
                class="h-full flex center"
                :class="['bg-[#fffcf6]', 'bg-[#fff8eb]', 'bg-[#fff6e3]', 'bg-[#fff3d9]'][i]"
              >
                <div
                  class="text-center text-[#bc8547] text-sm font-normal font-['PingFang_SC'] leading-normal"
                >
                  {{
                    memberLevels[i + 1]?.points
                      ? `${it.points}(含)-${memberLevels[i + 1]?.points}`
                      : `${it.points}及以上`
                  }}
                </div>
              </div>
            </template>
          </div>
        </div>
        <div
          class="flex items-center mt-4 text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          注：
          <wd-img width="14" height="14" :src="star"></wd-img>
          表示您当前所在等级
        </div>
      </div>
    </template>
    <template v-if="tab === 1">
      <div class="p-3.5 flex flex-col gap-6">
        <Card>
          <div class="flex items-center gap-1">
            <wd-img width="14" height="15" :src="up"></wd-img>
            <div
              class="text-center text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              升级
            </div>
          </div>
          <div class="my-4 h-.25 bg-[#f1f1f1]"></div>
          <div
            class="w-[309px] h-[47px] text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
          >
            更新积分值后，如最新积分值达到更高等级门槛将立即提升至相应会员等级。
          </div>
        </Card>
        <Card>
          <div class="flex items-center gap-1">
            <wd-img width="14" height="15" :src="down"></wd-img>
            <div
              class="text-center text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              降级
            </div>
          </div>
          <div class="my-4 h-.25 bg-[#f1f1f1]"></div>
          <div
            class="w-[309px] h-[47px] text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
          >
            当前积分不满足当前会员等级，您将面临降级。
          </div>
        </Card>
      </div>
    </template>
  </div>
</template>
