<template>
  <div class="fullPage">
    <div class="bg">
      <!-- 状态栏占位区域（仅在APP中显示） -->
      <div v-if="isInAppEnvironment" style="height: 30px"></div>

      <!-- 帮助按钮 -->
      <img
        src="/src/assets/images/TopList/help.png"
        alt=""
        style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
        @click="helpInfoShow = true"
      />

      <!-- history按钮 -->
      <img
        src="/src/assets/images/TopList/history.png"
        alt=""
        style="width: 20%; margin-top: 20px"
        @click="historyShow = true"
      />

      <div style="display: flex; flex-direction: column; align-items: center">
        <!-- 主标题 -->
        <img src="/src/assets/images/TopList/listTitle.png" alt="" style="width: 90%" />
        <!-- 榜首 -->
        <div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
          <div style="width: 40%">
            <div
              style="
                position: relative;
                width: 100%;
                min-height: max-content;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <!-- 头像框 -->
              <img
                src="/src/assets/images/TopList/kingFrame.png"
                alt=""
                style="width: 100%; z-index: 1"
              />
              <!-- 头像 -->
              <div
                style="
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  z-index: 0;
                "
              >
                <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
              </div>
              <div
                style="
                  color: #fff;
                  font-weight: 860;
                  font-size: 13px;
                  position: absolute;
                  bottom: 8%;
                  z-index: 2;
                "
              >
                Sukabuliete
              </div>
            </div>
            <div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
          </div>
          <div style="width: 40%">
            <div
              style="
                position: relative;
                width: 100%;
                min-height: max-content;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <!-- 头像框 -->
              <img
                src="/src/assets/images/TopList/queenFrame.png"
                alt=""
                style="width: 100%; z-index: 1"
              />
              <!-- 头像 -->
              <div
                style="
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  z-index: 0;
                "
              >
                <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
              </div>
              <div
                style="
                  color: #fff;
                  font-weight: 860;
                  font-size: 13px;
                  position: absolute;
                  bottom: 5%;
                  z-index: 2;
                "
              >
                Sukabuliete
              </div>
            </div>
            <div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
          </div>
        </div>
      </div>

      <!-- rewards -->
      <div style="display: flex; justify-content: flex-end">
        <img
          src="/src/assets/images/TopList/rewards.png"
          alt=""
          style="width: 20%"
          @click="rewardsShow = true"
        />
      </div>

      <!-- 每周礼物 -->
      <div style="display: flex; justify-content: center">
        <div style="width: 100%; position: relative">
          <img src="/src/assets/images/TopList/eventGifts.png" alt="" style="width: 100%" />
          <div
            style="
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
              <div
                v-for="(item, index) in 3"
                :key="index"
                style="width: 30%; display: flex; flex-direction: column"
              >
                <img style="" src="/src/assets/images/TopList/gift.png" alt="" />
                <div style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center">
                  ddd
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 排行榜 -->
      <div style="width: 100vw">
        <!-- 排行榜切换按钮 -->
        <div style="width: 100%">
          <div
            v-if="visibleKingList"
            style="width: 100%; display: flex; justify-content: space-around"
          >
            <img src="/src/assets/images/TopList/kingBtActive.png" alt="" style="width: 40%" />
            <img
              src="/src/assets/images/TopList/queenBt.png"
              alt=""
              style="width: 40%"
              @click="visibleKingList = false"
            />
          </div>

          <div
            v-if="!visibleKingList"
            style="width: 100%; display: flex; justify-content: space-around"
          >
            <img
              src="/src/assets/images/TopList/kingBt.png"
              alt=""
              style="width: 40%"
              @click="visibleKingList = true"
            />
            <img src="/src/assets/images/TopList/queenBtActive.png" alt="" style="width: 40%" />
          </div>
        </div>

        <!-- 排行榜 -->
        <div style="width: 100%">
          <borderImg title="Ranking">
            <div
              style="margin: -2px 0; position: relative"
              v-for="(listItem, index) in topList"
              :key="index"
            >
              <img
                src="/src/assets/images/TopList/border-item-user.png"
                alt=""
                style="width: 100%; display: block"
              />
              <div
                style="
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  right: 0;
                  display: flex;
                  align-items: center;
                  padding: 0 15%;
                "
              >
                <div style="flex: 1; display: flex; align-items: center">
                  <div style="color: #edb247; font-weight: 700; width: 28px">
                    {{ index + 100 }}
                  </div>
                  <div
                    style="
                      width: 30%;
                      aspect-ratio: 1/1;
                      border-radius: 50%;
                      margin: 0 8px;
                      background: linear-gradient(
                        to bottom,
                        rgba(255, 224, 60, 1),
                        rgba(255, 189, 19, 1)
                      );

                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <img
                      src="/src/assets/images/avatarTest.png"
                      alt=""
                      style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
                    />
                  </div>

                  <div style="display: flex; flex-direction: column">
                    <div style="color: #fff; font-weight: 860">
                      {{ listItem.name }}
                    </div>
                    <div style="color: #fff; font-weight: 590">ID:{{ listItem.id }}</div>
                  </div>
                </div>

                <div style="display: flex; width: 30%; display: flex; align-items: center">
                  <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
                  <div style="color: #edb247; font-weight: 700">
                    {{ listItem.recharge }}
                  </div>
                </div>
              </div>
            </div>
          </borderImg>
        </div>

        <!-- 我的排名 -->
        <div
          style="
            position: sticky;
            bottom: 0;
            left: 0;
            widows: 100vw;
            background-color: rgba(77, 30, 22, 1);
            display: flex;
            justify-content: center;
          "
        >
          <img
            src="/src/assets/images/TopList/myRankingBg.png"
            alt=""
            style="width: calc(100% - 1px); display: block"
          />

          <div
            style="
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 8%;
            "
          >
            <div style="flex: 1; display: flex; align-items: center">
              <div style="color: #edb247; font-weight: 700">
                {{ myRanking.ranking }}
              </div>
              <div
                style="
                  width: 30%;
                  aspect-ratio: 1/1;
                  border-radius: 50%;
                  margin: 0 12px;
                  background: linear-gradient(
                    to bottom,
                    rgba(255, 224, 60, 1),
                    rgba(255, 189, 19, 1)
                  );

                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <img
                  src="/src/assets/images/avatarTest.png"
                  alt=""
                  style="width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
                />
              </div>

              <div style="display: flex; flex-direction: column">
                <div style="color: #fff; font-weight: 860">
                  {{ myRanking.name }}
                </div>
                <div style="color: #fff; font-weight: 590">ID:{{ myRanking.id }}</div>
              </div>
            </div>

            <div style="display: flex; width: 30%; display: flex; align-items: center">
              <img src="/src/assets/icon/coin.png" alt="" style="width: 20%; height: 20%" />
              <div style="color: #edb247; font-weight: 700">
                {{ myRanking.recharge }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗遮罩层 -->
    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
      <!-- help弹窗 -->
      <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
        <img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" />
      </div>

      <!-- history弹窗 -->
      <div v-if="historyShow" style="margin: 20% 0" @click.stop>
        <div style="width: 100%">
          <borderImg title="History">
            <div
              style="
                background-image: url(/src/assets/images/TopList/border-item.png);
                background-size: 100% 100%;
                min-height: 20px;
                margin: -10px 0;
                padding: 10px 10%;
              "
            >
              <!-- 内容 -->
              <div
                style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"
              >
                <div style="width: 40%">
                  <div
                    style="
                      position: relative;
                      width: 100%;
                      min-height: max-content;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <!-- 头像框 -->
                    <img
                      src="/src/assets/images/TopList/kingFrame.png"
                      alt=""
                      style="width: 100%; z-index: 1"
                    />
                    <!-- 头像 -->
                    <div
                      style="
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 0;
                      "
                    >
                      <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
                    </div>
                    <div
                      style="
                        color: #fff;
                        font-weight: 860;
                        font-size: 13px;
                        position: absolute;
                        bottom: 8%;
                        z-index: 2;
                      "
                    >
                      Sukabuliete
                    </div>
                  </div>
                  <div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
                </div>
                <div style="width: 40%">
                  <div
                    style="
                      position: relative;
                      width: 100%;
                      min-height: max-content;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <!-- 头像框 -->
                    <img
                      src="/src/assets/images/TopList/queenFrame.png"
                      alt=""
                      style="width: 100%; z-index: 1"
                    />
                    <!-- 头像 -->
                    <div
                      style="
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 0;
                      "
                    >
                      <img src="/src/assets/icon/coin.png" alt="" style="width: 90%" />
                    </div>
                    <div
                      style="
                        color: #fff;
                        font-weight: 860;
                        font-size: 13px;
                        position: absolute;
                        bottom: 5%;
                        z-index: 2;
                      "
                    >
                      Sukabuliete
                    </div>
                  </div>
                  <div style="color: #fff; font-weight: 590; text-align: center">ID:123456</div>
                </div>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 20px;
                "
              >
                <img
                  src="/src/assets/images/TopList/timeBack.png"
                  alt=""
                  width="18px"
                  height="18px"
                />
                <div
                  style="
                    width: 40%;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 590;
                    background-image: -webkit-linear-gradient(
                      top,
                      rgba(243, 183, 0, 1),
                      rgba(255, 238, 198, 1)
                    );
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  "
                >
                  2025-09-05
                </div>
                <img
                  src="/src/assets/images/TopList/timeNext.png"
                  alt=""
                  width="18px"
                  height="18px"
                />
              </div>
            </div>
          </borderImg>
        </div>
      </div>

      <!-- rewards弹窗 -->
      <div v-if="rewardsShow" style="padding: 20% 0" @click.stop>
        <div style="position: relative">
          <!-- 取消按钮 -->
          <img
            src="/src/assets/images/TopList/cancel.png"
            alt=""
            style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
            @click="closedPopup"
          />
          <div style="width: 100%">
            <borderImg title="Rewards">
              <div
                style="
                  background-image: url(/src/assets/images/TopList/border-item.png);
                  background-size: 100% 100%;
                  min-height: 20px;
                  margin: -10px 0;
                  padding: 10px 10%;
                "
              >
                <!-- 奖励榜切换按钮 -->
                <div style="width: 100%">
                  <div
                    v-if="visibleKingRewards"
                    style="width: 100%; display: flex; justify-content: space-around"
                  >
                    <img
                      src="/src/assets/images/TopList/kingBtActive.png"
                      alt=""
                      style="width: 40%"
                    />
                    <img
                      src="/src/assets/images/TopList/queenBt.png"
                      alt=""
                      style="width: 40%"
                      @click="visibleKingRewards = false"
                    />
                  </div>
                  <div
                    v-if="!visibleKingRewards"
                    style="width: 100%; display: flex; justify-content: space-around"
                  >
                    <img
                      src="/src/assets/images/TopList/kingBt.png"
                      alt=""
                      style="width: 40%"
                      @click="visibleKingRewards = true"
                    />
                    <img
                      src="/src/assets/images/TopList/queenBtActive.png"
                      alt=""
                      style="width: 40%"
                    />
                  </div>
                </div>

                <!-- 奖励榜 -->
                <div
                  v-for="(rewardsTop, top) in rewardsList"
                  :key="top"
                  style="display: flex; flex-direction: column; align-items: center"
                >
                  <img :src="topImg[top]" alt="" style="width: 40%; margin: 24px 0" />
                  <div
                    style="
                      width: 100%;
                      display: grid;
                      grid-template-columns: repeat(3, 1fr);
                      gap: 3%;
                    "
                  >
                    <div
                      v-for="(reward, rewardIndex) in rewardsTop"
                      :key="rewardIndex"
                      style="width: 100%"
                    >
                      <img style="" src="/src/assets/images/TopList/gift.png" alt="" width="100%" />
                      <div
                        style="color: rgba(255, 255, 255, 1); font-weight: 590; text-align: center"
                      >
                        {{ reward.goodsId }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </borderImg>
          </div>
        </div>
      </div>
    </maskLayer>
  </div>
</template>

<script setup>
import { isInApp } from '../../utils/appBridge.js'
import { computed, onMounted, ref } from 'vue'
import borderImg from '../../components/TopList/borderImg.vue'
import maskLayer from '../../components/MaskLayer.vue'

const visibleKingList = ref(true)

// 检测是否在APP环境中
const isInAppEnvironment = ref(false)

// 榜首历史记录
const historyList = ref([
  {
    time: '2025-9-5',
    topUser: [{}],
  },
])

// 我的排名
const myRanking = ref({
  id: '666',
  name: 'aaa',
  recharge: '12345',
  ranking: '999',
})

// 国王榜
const kingList = ref(
  Array.from({ length: 12 }, () => {
    return { id: '666', name: 'aaa', recharge: '12345' }
  })
)

// 女王榜
const queenList = ref(
  Array.from({ length: 12 }, () => {
    return { id: '888', name: 'bbb', recharge: '45678' }
  })
)

// 展示用排行榜
const topList = computed(() => {
  return visibleKingList.value ? kingList.value : queenList.value
})

// 展示奖励榜标签
const visibleKingRewards = ref(true)

// top图片
const topImg = ref([
  '/src/assets/images/TopList/top1.png',
  '/src/assets/images/TopList/top2.png',
  '/src/assets/images/TopList/top3.png',
])

const kingRewards = ref([
  Array.from({ length: 6 }, () => {
    return { goodsId: '111', name: 'aaa' }
  }),
  Array.from({ length: 6 }, () => {
    return { goodsId: '222', name: 'aaa' }
  }),
  Array.from({ length: 3 }, () => {
    return { goodsId: '333', name: 'aaa' }
  }),
])

const queenRewards = ref([
  Array.from({ length: 3 }, () => {
    return { goodsId: '444', name: 'aaa' }
  }),
  Array.from({ length: 3 }, () => {
    return { goodsId: '555', name: 'aaa' }
  }),
  Array.from({ length: 3 }, () => {
    return { goodsId: '666', name: 'aaa' }
  }),
])

const rewardsList = computed(() => {
  return visibleKingRewards.value ? kingRewards.value : queenRewards.value
})

const maskLayerShow = computed(() => {
  return helpInfoShow.value || historyShow.value || rewardsShow.value
})
const helpInfoShow = ref(false)
const historyShow = ref(false)
const rewardsShow = ref(false)

// 关闭弹窗
const closedPopup = () => {
  helpInfoShow.value = false
  historyShow.value = false
  rewardsShow.value = false
}

// 组件挂载时检测环境
onMounted(() => {
  isInAppEnvironment.value = isInApp()
})
</script>

<style scoped>
* {
  font-family: 'SF Pro';
}

.fullPage {
  background-color: rgba(77, 30, 22, 1);
  min-height: 100vh;
  position: relative;
}

.bg {
  width: 100vw;
  background-image: url(../../assets/images/TopList/bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
}
</style>
