<template>
  <div class="policy-container gradient-background-circles">
    <!-- 顶部导航 -->
    <GeneralHeader
      :title="title"
      color="black"
      style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
    />
    <img
      v-if="from === 'BDLead'"
      :src="bdLeaderImgUrl"
      alt="bdleader Policy Image"
      class="policy-image"
    />
    <img :src="bdImgUrl" alt="bd Policy Image" class="policy-image" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

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

const route = useRoute()
const { t, locale } = useI18n()

const from = ref('')

const title = ref('')
const bdImgUrl = ref('') //bd政策图
const bdLeaderImgUrl = ref('') //bdleader政策图

const updateImages = () => {
  from.value = route.query.from || 'BDLead'

  if (from.value === 'BD') {
    title.value = t('bd_policy')
    bdImgUrl.value = new URL(
      '/src/assets/images/BDCenter/Policy/BDPolicy.png',
      import.meta.url
    ).href
  } else if (from.value === 'BDLead') {
    title.value = t('bd_leader_policy')
    bdImgUrl.value = new URL(
      '/src/assets/images/BDCenter/Policy/BDPolicy.png',
      import.meta.url
    ).href
    bdLeaderImgUrl.value = new URL(
      '/src/assets/images/BDCenter/Policy/BDLeaderPolicy.png',
      import.meta.url
    ).href
  }
}

onMounted(() => {
  updateImages()
})
</script>

<style lang="scss" scoped>
.policy-container {
  height: 100vh;
  overflow-y: auto;
}

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

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