<template>
  <div class="policy-container">
    <img src="/src/assets/icon/arrowBlackGold.png" alt="" class="back-bt" @click="goBack" />
    <img
      :src="imageUrl(getImgName('rechargeGuide'))"
      alt=""
      style="display: block; width: 100vw; object-fit: cover"
    />
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { getPngUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/imagePreloader.js'

const router = useRouter()
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Recharge/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}

const goBack = () => {
  router.go(-1)
}

const langStore = useLangStore()
const { t, locale } = useI18n()

// 当前语言类型
const currentLangType = computed(() => {
  return langStore.selectedLang?.type || 'en'
})

const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href

// 预加载关键图片
const preloadCriticalImages = () => {
  const criticalImages = [imageUrl('rechargeGuide')]
  const criticalImages_ar = [imageUrl('rechargeGuide_ar')]

  if (currentLangType.value == 'en') {
    preloadImages(criticalImages)
  } else if (currentLangType.value == 'ar') {
    preloadImages(criticalImages_ar)
  }
}

onMounted(() => {
  preloadCriticalImages() // 预加载关键图片
})
</script>

<style lang="scss" scoped>
.policy-container {
  position: relative;

  height: 100vh;
  overflow-y: auto;
}

.policy-container::-webkit-scrollbar {
  display: none;
}

.back-bt {
  display: block;
  width: 9vw;

  position: absolute;
  top: 15vw;
  left: 5vw;
}

[dir='rtl'] .back-bt {
  transform: scaleX(-1);
  left: auto;
  right: 5vw;
}
</style>
