<template>
  <div class="policy-container">
    <!-- 顶部导航 -->
    <GeneralHeader
      :title="t('admin_policy')"
      color="black"
      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
    />
    <div v-if="userRegion">
      <div v-if="userRegion.regionCode != 'AR'">
        <img v-smart-img :src="imageUrl('NOT_AR_Policy')" alt="Policy Image" class="policy-image" />
      </div>
      <div v-else>
        <img v-smart-img :src="imageUrl(getImgName('policy0'))" alt="" class="policy-image" />
        <img v-smart-img :src="imageUrl(getImgName('policy1'))" alt="" class="policy-image" />
        <img v-smart-img :src="imageUrl(getImgName('policy2'))" alt="" class="policy-image" />
        <img v-smart-img :src="imageUrl(getImgName('policy3'))" alt="" class="policy-image" />
      </div>
    </div>
  </div>
</template>

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

import { getRegionByUserId } from '@/api/wallet.js'

import GeneralHeader from '@/components/GeneralHeader.vue'

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

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

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

const userRegion = ref(null) // 区域代码

// 预加载关键图片
const preloadCriticalImages = () => {
  const criticalImages = [
    imageUrl(getImgName('policy0')),
    imageUrl(getImgName('policy1')),
    imageUrl(getImgName('policy2')),
    imageUrl(getImgName('policy3')),
  ]

  preloadImages(criticalImages)
}

// 获取用户所在的区域信息
const apiGetRegionByUserId = async () => {
  const response = await getRegionByUserId(getUserId())
  if (response.status) {
    userRegion.value = response.body
  }
}

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

<style lang="scss" scoped>
.policy-container {
  height: 100vh;
  background-image: url(../../assets/images/Azizi/secondBg.png);
  overflow-y: auto;
}

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

.policy-image {
  display: block;
  width: 100vw;
  object-fit: cover;
}
</style>
