<template>
  <div class="footer-box">
    <div class="footer w-1200">
      <div class="flex justify-between  items-center footer-item1">
        <div class="flex items-center">
          <img class="w-[45px]" src="~/assets/image/logo.png"/>
          <p class="logo-name">{{ locale == 'zh' ? siteInfo.siteName : siteInfo.siteNameEn }}</p>
        </div>

        <div class="tr">
          <!--        邮箱  -->

          <NPopover :z-index="100"
                    arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
                    :raw="true" trigger="hover" placement="bottom">
            <template #trigger>
              <div class="ml-6">

                <div class="flex items-center cursor-pointer">
                  <img class="w-[24px]" src="~/assets/image/mail.png"/>
                  <p class="ml-[10px]">{{ $t('email') }}</p>
                </div>
              </div>
            </template>
            <template #default>
              <div class="lxfs flex flex-col justify-center items-center">
                <p>{{ siteInfo.email }}</p>
                <template v-if="siteInfo.emailImage">
                  <img :src="siteInfo.emailImage" class="cover-fill w-[100px] h-[100px] code mt-2"/>
                  <p class="py-1"></p>
                </template>
              </div>
            </template>

          </NPopover>
          <!--        WhatsApp  -->

          <NPopover :z-index="100"
                    arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
                    :raw="true" trigger="hover" placement="bottom">
            <template #trigger>
              <div class="ml-6">

                <div class="flex items-center cursor-pointer">
                  <img class="w-[24px]" src="~/assets/image/phone2.png"/>
                  <p class="ml-[10px]">{{ $t('WhatsApp') }}</p>
                </div>
              </div>

            </template>
            <template #default>
              <div class="lxfs flex flex-col justify-center items-center">
                <p>{{ siteInfo.whatsapp }}</p>
                <img v-if="siteInfo.whatsappImage" :src="siteInfo.whatsappImage"
                     class="cover-fill w-[100px] h-[100px] code mt-2 /">
                <p v-if="siteInfo.whatsappImage" class="py-1"></p>
              </div>
            </template>
          </NPopover>
          <!--          LinkedIn-->
          <NPopover :z-index="100"
                    arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
                    :raw="true" trigger="hover" placement="bottom">
            <template #trigger>
              <div class="ml-6">
                <div class="flex items-center cursor-pointer">
                  <img class="w-[24px]" src="~/assets/image/in.png"/>
                  <p class="ml-[10px]">{{ $t('LinkedIn') }}</p>
                </div>
              </div>

            </template>
            <template #default>
              <div class="lxfs flex flex-col justify-center items-center">
                <p>{{ siteInfo.linkedin }}</p>
                <img v-if="siteInfo.linkedinImage" :src="siteInfo.linkedinImage"
                     class="cover-fill w-[100px] h-[100px] code mt-2 /">
                <p v-if="siteInfo.linkedinImage" class="py-1"></p>
              </div>
            </template>
          </NPopover>
          <!--        微信  -->

          <NPopover :z-index="100"
                    arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
                    :raw="true" trigger="hover" placement="bottom">
            <template #trigger>
              <div class="ml-6">

                <div class="flex items-center cursor-pointer">
                  <img class="w-[24px]" src="~/assets/image/weixin.png"/>
                  <p class="ml-[10px]">{{ $t('wechat') }}</p>
                </div>
              </div>

            </template>
            <template #default>
              <div class="lxfs flex flex-col justify-center items-center">
                <p>{{ siteInfo.wechat }}</p>
                <img v-if="siteInfo.wechatImage" :src="siteInfo.wechatImage"
                     class="cover-fill w-[100px] h-[100px] code mt-2 /">
                <p v-if="siteInfo.wechatImage" class="py-1"></p>
              </div>
            </template>
          </NPopover>


        </div>
      </div>
      <div class="footer-item2 flex justify-between items-center">
        <div class="flex">
          <div class=" wow animate__fadeInUp mr-[50px]">
            <p style="color: #FFFFFF;font-size: 17px">{{ $t('link') }}</p>
            <NuxtLink class="mt-[13px]" :to="localePath('/about')"
                      style="color: rgba(255,255,255,.6);font-size: 14px ;display: block">{{ $t('aboutUs') }}
            </NuxtLink>
            <NuxtLink class="mt-[7px]" :to="localePath('/service')"
                      style="color: rgba(255,255,255,.6);font-size: 14px; display: block">{{ $t('service') }}
            </NuxtLink>
            <NuxtLink class="mt-[7px]" :to="localePath('/product')"
                      style="color: rgba(255,255,255,.6);font-size: 14px; display: block">{{ $t('product') }}
            </NuxtLink>
            <NuxtLink class="mt-[7px]" :to="localePath('/african-video')"
                      style="color: rgba(255,255,255,.6);font-size: 14px ;display: block">{{ $t('africanVideo') }}
            </NuxtLink>
            <NuxtLink class="mt-[7px]" :to="localePath('/news')"
                      style="color: rgba(255,255,255,.6);font-size: 14px; display: block">{{ $t('news') }}
            </NuxtLink>
          </div>
          <div class="wow animate__fadeInUp  mr-[50px]">
            <div>
              <p style="color: #FFFFFF ;font-size: 17px;margin-bottom: 12px;text-align: center;">
                {{ $t('wxOfficialAccounts') }}</p>
              <img :src="siteInfo.wxgzhImage" class="cover-fill w-[100px] h-[100px] code">
            </div>
          </div>
          <div class="wow animate__fadeInUp mr-[50px]">
            <div>
              <p style="color: #FFFFFF ;font-size: 17px;margin-bottom: 12px;text-align: center;">{{ $t('wxMP') }}</p>
              <img :src="siteInfo.wxmpImage" class="cover-fill w-[100px] h-[100px] code">
            </div>
          </div>
          <div class="wow animate__fadeInUp mr-[50px]">
            <div>
              <p style="color: #FFFFFF ;font-size: 17px;margin-bottom: 12px;text-align: center;">{{ $t('weCom') }}</p>
              <img :src="siteInfo.wecomImage" class="cover-fill w-[100px] h-[100px] code">
            </div>
          </div>
        </div>

        <div>
          <p class="flex items-center wow animate__backInRight" style="flex-direction: row-reverse;">
            <span style="color: #896B34;font-size: 35px;font-weight: bold;">{{ siteInfo.phone }}</span>
            <img class="w-[30px] mr-[8px] h-[30px]" src="~/assets/image/phone.png"/>
          </p>
          <!--          <p style="font-size: 14px;color: rgba(255,255,255,.4);margin-top: 20px" class="text-right">{{siteInfo.siteDesc}}</p>-->
          <p style="font-size: 14px;color: rgba(255,255,255,.6)" class="text-right">
            {{ $t('address') }}：{{ locale == 'zh' ? siteInfo.address : siteInfo.addressEn }}</p>
        </div>

      </div>
      <div class="flex justify-between">
        <p class="" style="font-size: 14px;color: rgba(255,255,255,.4);margin-top: 20px;">
          {{ locale == 'zh' ? siteInfo.companyName : siteInfo.companyNameEn }} {{ $t('icp') }}:
          {{ locale == 'zh' ? siteInfo.pov : siteInfo.pov }}</p>
        <p class="" style="font-size: 14px;color: rgba(255,255,255,.4);margin-top: 20px;">{{ $t('contactUs') }}</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {NPopover} from 'naive-ui'

const {locale} = useI18n()
const siteInfo = useSiteInfo()
const localePath = useLocalePath()
</script>
<style scoped>
.footer-box {
//background: #363636; background-image: url("~/assets/image/footer-bg.png"); background-size: contain;
}

.footer {
  height: 480px;
}

.footer-place {
  height: 400px;
}

.logo-name {
  font-size: 20px;
  color: rgba(255, 255, 255, .87);
  margin-left: 15px;
}


.tr {
  display: flex;
  flex-direction: row-reverse;
  color: rgba(255, 255, 255, .87);
  font-size: 18px;
}


.footer-item1 {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  height: 120px;
}

.footer-item2 {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  height: 210px;
}

.footer-item2 img {
  object-fit: cover;
}

.code {
  border-radius: 8px;
}

.lxfs {
  background: linear-gradient(180deg, rgba(137, 107, 52, 1) 1%, rgba(250, 235, 201, 1) 100%);
  padding: 5px 10px;
  border-radius: 4px;
  color: #303030;
  font-size: 16px;
}
</style>
