<template>
  <div class="fullPage">
    <!-- 状态栏占位区域（仅在APP中显示） -->
    <!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
    <img :src="images.pageTop" alt="" width="100%" style="display: block" />
    <div
      style="
        background: linear-gradient(
          180deg,
          #ffcc97 0%,
          #ffa95e 14.99%,
          #ff8e2e 29.99%,
          #fd6500 44.98%,
          #d53f00 59.98%
        );
        min-height: calc(100vh - 93.3vw + 24px);
        border-radius: 24px 24px 0 0;
        margin-top: -24px;
        position: relative;
        z-index: 2;
        padding: 12px;
      "
    >
      <!-- 头部 -->
      <div style="display: flex; gap: 4px; align-items: flex-end; margin: 0 12px 12px">
        <div style="font-size: 0.7em; font-weight: 700">Want To Become A Recharge Agency?</div>
        <div
          style="
            font-size: 0.9em;
            color: #ff3e13;
            font-weight: 700;
            border-bottom: 1px solid #ff3e13;
            padding: 0 4px;
          "
          @click="maskLayerShow = true"
        >
          Contact Us Now!
        </div>
      </div>

      <!-- 代理列表 -->
      <div
        style="
          padding: 12px;

          display: flex;
          flex-direction: column;
          gap: 4px;

          border-radius: 12px;
          background: rgba(255, 255, 255, 0.4);
          backdrop-filter: blur(32px);
        "
      >
        <!-- 基本信息 -->
        <div style="display: flex; gap: 4px">
          <div style="width: 15%; display: flex; align-items: center">
            <img
              src=""
              alt=""
              @error="defaultAvatarUrl"
              style="display: block; width: 100%; aspect-ratio: 1/1"
            />
          </div>
          <div
            style="
              width: 80%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              gap: 4px;
            "
          >
            <div style="display: flex; align-items: center; gap: 4px">
              <img :src="images.testFlag" alt="" width="10%" style="display: block" />
              <div style="font-weight: 700">Nanfangjian</div>
            </div>
            <div style="display: flex; align-items: center; gap: 4px">
              <div style="position: relative; width: 30%">
                <img :src="images.idBg" alt="" width="100%" style="display: block" />
                <div
                  style="
                    position: absolute;
                    inset: 0;
                    padding: 5% 10% 5% 30%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <div
                    style="
                      font-size: 0.7em;
                      width: 80%;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                  >
                    8826602
                  </div>
                  <img :src="images.copyWhite" alt="" width="20%" />
                </div>
              </div>
              <img src="../../assets/icon/RA.png" alt="" width="25%" style="display: block" />
            </div>
          </div>
        </div>
        <!-- 代理信息 -->
        <div>
          <!-- 财力展示 -->
          <div style="display: flex; gap: 4px; align-items: center">
            <div style="font-weight: 700">Current balance:</div>
            <div style="width: 5%">
              <img
                src="/src/assets/icon/coin.png"
                alt=""
                width="100%"
                style="aspect-ratio: 1/1; display: block"
              />
            </div>
            <div style="color: #f00; font-weight: 590">7********</div>
          </div>
          <!-- 老资历 -->
          <div style="font-weight: 600; font-size: 0.8em">Has been a coin agency for 160 days</div>
          <!-- 社交的手腕 -->
          <div>
            <div style="font-weight: 600; font-size: 0.8em; margin-bottom: 4px">
              Available countries:
            </div>
            <div style="display: flex; gap: 4px; align-items: center; flex-wrap: wrap">
              <img :src="images.testFlag" alt="" width="8%" style="display: block" />
              <img :src="images.testFlag" alt="" width="8%" style="display: block" />
              <img :src="images.testFlag" alt="" width="8%" style="display: block" />
            </div>
          </div>
          <!-- 实力展示 -->
          <div>10972 successful transaction</div>
          <!-- 食人树 -->
          <div
            style="display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.9em"
          >
            <img :src="images.phone" alt="" width="8%" />
            +86 1008610086
          </div>
        </div>
        <!-- 按钮 -->
        <div style="display: flex; justify-content: space-between">
          <!-- 关注按钮 -->
          <div
            style="
              width: 45%;
              padding: 8px 12px;
              border-radius: 89px;
              background-blend-mode: normal, soft-light, normal;

              display: flex;
              justify-content: center;
              align-items: center;
            "
            :style="{
              background: followingStatus
                ? `radial-gradient(107.94% 107.94% at 15.9% 13.54%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FFF 0%, #000 100%), #D1D1D1`
                : `radial-gradient(
                  107.94% 107.94% at 15.9% 13.54%,
                  rgba(255, 255, 255, 0.2) 0%,
                  rgba(255, 255, 255, 0) 100%
                ),
                linear-gradient(180deg, #fff 0%, #000 100%), #b464ff`,
            }"
            @click="followingStatus = !followingStatus"
          >
            <div style="font-weight: 500">Following</div>
          </div>
          <!-- 私聊按钮 -->
          <div
            style="
              width: 45%;
              padding: 8px 12px;
              text-align: center;
              border-radius: 60px;
              background: radial-gradient(
                  107.94% 107.94% at 15.9% 13.54%,
                  rgba(255, 255, 255, 0.2) 0%,
                  rgba(255, 255, 255, 0) 100%
                ),
                linear-gradient(180deg, #fff 0%, #000 100%), #4ecf5d;
              background-blend-mode: normal, soft-light, normal;

              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="font-weight: 500">Send Message</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗遮罩层 -->
    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
      <div style="height: 100%; display: flex; justify-content: center; align-items: center">
        <div
          style="
            width: 90%;
            padding: 10px;
            border-radius: 12px;
            background: #fff;

            display: flex;
            gap: 10px;
            flex-direction: column;
          "
          @click.stop
        >
          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800; font-size: 0.9em">
            Contact Likei company's Whatsapp account:
          </div>
          <div style="display: flex; gap: 10px; align-items: center">
            <img :src="images.phone" alt="" width="24px" />
            <div style="color: #000; font-weight: 600">+86 18709616238</div>
            <img :src="images.copy" alt="" width="24px" />
          </div>
        </div>
      </div>
    </maskLayer>
  </div>
</template>

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

//vite动态批量导入图片
const imageModules = import.meta.glob('@/assets/images/RechargeAgency/*.{png,jpg,svg}', {
  eager: true,
})
// 生成文件名映射对象（自动移除路径和扩展名）
const images = Object.fromEntries(
  Object.entries(imageModules).map(([path, module]) => {
    const fileName = path.split('/').pop().split('.')[0]
    return [fileName, module.default]
  })
)

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

const maskLayerShow = ref(false) // 控制遮罩层显示隐藏
const followingStatus = ref(false) // 控制关注按钮状态

const defaultAvatarUrl = (e) => {
  console.log('头像资源出错')
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}

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

onMounted(() => {
  isInAppEnvironment.value = isInApp()
  console.log('images:', images)
})
</script>

<style lang="scss" scoped>
* {
  color: #fff;
  font-family: 'SF Pro Text';
}

.fullPage {
  width: 100vw;
  min-height: 100vh;
  background-color: #220447;
  position: relative;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
