<template>
  <div>
    <!--    轮播图-->
    <NCarousel draggable autoplay class="carousel">
      <img v-for="item in bannerList"
           class="carousel-img w-full"
           :src="item.picUrl"
      />
    </NCarousel>
    <!--    关于我们-->
    <div class="about-box ">
      <ClientOnly>
        <vue-particles id="particles" :particlesInit="particlesInit" :options="particlesJson"
                       :particlesLoaded="particlesLoaded"></vue-particles>
      </ClientOnly>

      <div class="about">
        <div class="about-header flex justify-between items-center">
          <p class="about-title">
            <img class="about-title-left" src="~/assets/aboutindex.png"/>
            {{ locale == 'zh' ? aboutArticle.title : aboutArticle.titleEn }}
          </p>
          <NuxtLink :to="localePath('/about')" class="about-more hover:opacity-75">{{ $t('readMord') }} &gt;&gt;
          </NuxtLink>
        </div>
        <div class="about-body flex justify-between">
          <div class="about-body-left wow animate__slideInLeft"
               v-html="locale =='zh'?aboutArticle.content:aboutArticle.contentEn">
          </div>
          <div class="wow animate__slideInRight">
            <div class="about-body-right">
              <img :src="aboutArticle.picUrl"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    最新资讯 start  -->
    <div class="news ">
      <div style="height: 38px"></div>
      <div class="news-header w-1440">
        <p class="news-header-title wow animate__bounceIn">-{{ $t('news') }}-</p>
        <NuxtLink :to="localePath('/news')" class="news-more hover:opacity-75">{{ $t('readMord') }} &gt;&gt;</NuxtLink>
      </div>
      <div class="news-carousel-box wow animate__fadeInUp">
        <NCarousel style="height: 350px" :default-index="1" centered-slides draggable :slides-per-view="3"
                   prev-slide-style="transform: translateX(-170%) translateZ(-200px);opacity: 1;"
                   next-slide-style="transform: translateX(70%) translateZ(-200px);opacity: 1;"
                   effect="card">
          <NCarouselItem v-for="(item, index) in articleDataList" :key="item.id" class="news-carousel-item">
            <NuxtLink :to="localePath('/news-detail/' + item.id)" class="news-item">
              <img class="news-item-img" :src="item.picUrl"/>
              <p class="news-item-title truncate">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
            </NuxtLink>
          </NCarouselItem>
        </NCarousel>

      </div>

    </div>
    <!--    最新资讯 end  -->

    <!--    走近非洲 start  -->
    <div class="african">
      <div style="height: 52px"></div>
      <div class="news-header ">
        <p style="color: #896B34" class="news-header-title  wow animate__flip">-{{ $t('africanVideo') }}-</p>
      </div>
      <!--   视频列表-->
      <div class="w-1440  pt-6  wow animate__fadeInUp">
        <NuxtLink v-for="(item, index) in videoDataList" :to="localePath('/video-detail/' + item.id)"
                  class="africen inline-block cursor-pointer">
          <div class="africen-img-box" @mouseleave="item.play = false" @mouseover="item.play = true">
            <video v-if="item.play" autoplay muted class="africen-img-cover" :src="item.videoUrl"/>
            <video v-if="!item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.videoUrl"/>
            <img v-if="item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.picUrl"/>
            <div class="africen-video-desc">
              <div class="view-num pl-2">
                <p class="flex items-center">
                  <NIcon :component="VideocamOutline" size="25"></NIcon>
                  <span class="ml-1">{{ item.viewsCount }}</span>
                </p>
              </div>
            </div>
          </div>
          <p class="africen-title py-2 truncate">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
          <div class="africen-desc">
            <div class="africen-time">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
          </div>
        </NuxtLink>

      </div>

      <div class="flex justify-center">
        <NuxtLink :to="localePath('/african-video')"
                  class="africen-more hover:opacity-75 flex items-center justify-center">
          <img style="width: 28px;margin-right: 10px" src="~/assets/image/md-remove.png"/>
          {{ $t('readMord') }}
        </NuxtLink>
      </div>
    </div>

    <!--    走近非洲 end  -->


    <!--    服务与产品 start  -->
    <div class="service-product">
      <div class="w-1200 wow animate__fadeInLeftBig">
        <div class="flex justify-between border-b">
          <div class="tabs flex">
            <div @click="activeKey = 'service'" :class="{active: activeKey === 'service'}" class="tab">{{
                $t('service')
              }}
            </div>
            <div @click="activeKey = 'product'" :class="{active: activeKey === 'product'}" class="tab">{{
                $t('product')
              }}
            </div>
          </div>
          <div>
            <NuxtLink :to="localePath('/product')" class="product-more">{{ $t('readMord') }}&gt;&gt;</NuxtLink>
          </div>
        </div>
        <div class="tab-pane-box">
          <div v-show="activeKey == 'service'" class="tab-pane">
            <!--        :to="localePath({name: 'news-detail',params: {id: item.id}})"-->
            <NuxtLink :class="{animate__headShake:item.hover,animate__animated: item.hover}"
                      @mouseleave="item.hover = false" @mouseover="item.hover = true"
                      v-for="(item, index) in serviceDataList"
                      :to="localePath('/news-detail/' + item.id)"
                      class="product flex justify-between py-8">
              <div class="flex">
                <img class="product-img" :src="item.picUrl"/>
                <div class="ml-8">
                  <p class="product-title">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
                  <p class="product-content">{{ locale == 'zh' ? item.content : item.contentEn }}</p>
                  <p class="product-desc"><span style="color: #906D2C;">{{ item.viewsCount }}</span>
                    {{ $t('viewsCount') }} <span class="pl-4">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
                  </p>
                </div>
              </div>
              <p class="btn-detail">{{ $t('detail') }}</p>
            </NuxtLink>
          </div>

          <div v-show="activeKey == 'product'" class="tab-pane">
            <!--        :to="localePath({name: 'news-detail',params: {id: item.id}})"-->
            <NuxtLink :class="{animate__headShake:item.hover,animate__animated: item.hover}"
                      @mouseleave="item.hover = false" @mouseover="item.hover = true"
                      v-for="(item, index) in productDataList"
                      :to="localePath('/news-detail/' + item.id)"
                      class="product flex justify-between py-8">
              <div class="flex">
                <img class="product-img" :src="item.picUrl"/>
                <div class="ml-8">
                  <p class="product-title">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
                  <p class="product-content">{{ locale == 'zh' ? item.content : item.contentEn }}</p>
                  <p class="product-desc"><span style="color: #906D2C;">{{ item.viewsCount }}</span>
                    {{ $t('viewsCount') }} <span class="pl-4">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
                  </p>
                </div>
              </div>
              <p class="btn-detail">{{ $t('detail') }}</p>
            </NuxtLink>
          </div>
        </div>
        <!--      分页-->
        <!--      <div class="flex justify-center py-8">-->
        <!--        <NPagination :item-count="productItemCount"  simple/>-->
        <!--      </div>-->
      </div>
    </div>
    <!--    服务与产品 end  -->
    <!--  加载动画  -->
    <div v-if="loadIng"
         class="w-screen h-screen fixed bg-white top-0 left-0 right-0 bottom-0 flex items-center justify-center z-[999]">

<!--      <div class="">-->

<!--      </div>-->
            <span class="loading">
              <span class="loading-inner">
                <img class="" src="~/assets/image/logo.png" />
              </span>
            </span>
    </div>
  </div>

</template>
<script setup lang="ts">
import {NCarousel, NPagination, NCarouselItem, NIcon, NSpin} from 'naive-ui'
import {getArticle, getArticleList} from '~/api/article'

const siteInfo = useSiteInfo()
const {locale} = useI18n()
const localePath = useLocalePath()
const dayjs = useDayjs()
import {VideocamOutline} from '@vicons/ionicons5'
// 设置标题
useHead({
  title: `金梦网`
})
const activeKey = ref<String>('service')

const loadIng = ref<Boolean>(true)


// 关于我们  背景动画
import {particlesJson} from '~/assets/particles'
import {loadSlim} from "tsparticles-slim"
import {Engine} from "tsparticles-engine";
import {getVideoList} from "~/api/video";
import {getBanner} from "~/api/site";

const particlesInit = async (engine: Engine) => {
  //await loadFull(engine);
  await loadSlim(engine);
};

const particlesLoaded = async (container: any) => {
  console.log("Particles container loaded", container);
};

// 其他动画
onMounted(() => {
  loadIng.value = false
})
setTimeout(() => {
  loadIng.value = false
}, 10000)
// 轮播图
const bannerList = ref<any[]>([])
getBanner({
  position: 1
}).then((res: any) => {
  bannerList.value = res
})

//获取视频
const videoPageParams = {
  pageNo: 1,
  pageSize: 8
}

const videoItemCount = ref(0)
const videoDataList = ref<any[]>([])
const videoPageChange = (pageNo: number) => {
  getVideoList(videoPageParams).then((res: any) => {
    videoDataList.value = res.list
    videoItemCount.value = res.total
  })

}
videoPageChange(1)

// 获取资讯
const articleDataList = ref<any[]>([])
getArticleList({
  pageNo: 1,
  pageSize: 10,
  categoryId: 28
}).then((res: any) => {
  articleDataList.value = res.list
})
// 获取产品
const productItemCount = ref(0)
const productDataList = ref<any[]>([{}])
const serviceDataList = ref<any[]>([{}])
getArticleList({
  pageNo: 1,
  pageSize: 3,
  categoryId: 30
}).then((res: any) => {
  if (process.client) {
    res.list.forEach(item => {
      // 创建一个临时的div元素
      var tempDiv = document.createElement('div');

      tempDiv.innerHTML = item.content;
      var plainText = tempDiv.textContent;
      item.content = plainText

      tempDiv.innerHTML = item.contentEn;
      plainText = tempDiv.textContent;
      item.contentEn = plainText

    })
  }
  productDataList.value = res.list
})
getArticleList({
  pageNo: 1,
  pageSize: 3,
  categoryId: 31
}).then((res: any) => {
  if (process.client) {
    res.list.forEach(item => {
      // 创建一个临时的div元素
      var tempDiv = document.createElement('div');

      tempDiv.innerHTML = item.content;
      var plainText = tempDiv.textContent;
      item.content = plainText

      tempDiv.innerHTML = item.contentEn;
      plainText = tempDiv.textContent;
      item.contentEn = plainText

    })
  }

  serviceDataList.value = res.list
})
// 获取关于我们
const aboutArticle = ref<any>({})
getArticle({
  id: 36
}).then((res: any) => {
  if (res) {
    aboutArticle.value = res
  }
})
</script>
<style scoped>
.btn-detail {
  width: 60px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(229, 203, 152, 1) 0%, rgba(250, 235, 201, 1) 100%);
  color: rgba(137, 107, 52, 1);
  font-size: 12px;
  text-align: center;
}

.product {
  border-bottom: 1px solid rgba(137, 107, 52, 0.08);
}

.product-title {
  font-size: 20px;
  color: #333333;
  width: 420px;
}

.product-content {
  font-size: 16px;
  color: #6C6C6C;
  height: 40px;
  line-height: 20px;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 420px;

}

.product-desc {
  font-size: 12px;
  color: #999999;
  width: 420px;

}

.product-img {
  width: 200px;
  height: 120px;
  object-fit: cover;
}

.product-more {
  color: rgba(229, 203, 152, 1);
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}

.tabs {

}

.tab {
  width: 130px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;

}

.tab.active {
  background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.56) 100%);
  color: rgba(229, 203, 152, 1);
}


.carousel {
  height: 800px;
}

.about {
  width: 1340px;
  margin: 0 auto;
  padding: 70px 0;
  z-index: 20;
  position: sticky;

}

.about-box {
  position: relative;
  background-image: url("~/assets/image/zixun-bg.jpg");
  background-size: contain;
  background-position: center;
//background-repeat: no-repeat; background-color: #FFFFFF;
}

#particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.about-header {
}

.about-title {
  font-size: 40px;
  position: relative;
  padding-left: 18px;
  color: #101010;
}

.about-title-left {
  width: 6px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.about-more {
  width: 130px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #E5CB98;
  background: linear-gradient(180deg, rgba(54, 54, 54, 1) 0%, rgba(132, 132, 132, 1) 99%);
  cursor: pointer;
}

.about-body {
  margin-top: 35px;
}

.about-body-left {
  width: 730px;
  font-size: 18px;
  line-height: 40px;
}

.about-body-right {
  height: auto;
  position: relative;
  width: 497px;
  margin-right: 16px;
  transition: all 0.6s;
}

.about-body-right:hover {
  transform: scale(1.2);
}

.about-body-right::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(51, 51, 51, 0.28);
  top: 16px;
  right: -16px;
  z-index: -1;
}


.news {
  width: 100%;
  height: 610px;
  background-image: url("~/assets/bg-zuixinzixun.png");
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.news-header {
  height: 58px;
  position: relative;
}

.news-header-title {
  color: #E5CB98;
  font-size: 40px;
  text-align: center;
  line-height: 58px;
}

.news-more {
  width: 130px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #E5CB98;
  background: linear-gradient(180deg, rgba(229, 203, 152, 1) 0%, rgba(250, 235, 201, 1) 99%);
  color: rgba(137, 107, 52, 1);
  border-radius: 4px;
  cursor: pointer;
  position: absolute;
  right: 50px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.news-carousel-box {
  width: 1400px;

  margin: 140px auto 0;
  height: 300px;
}

.news-carousel-item {
  display: block;
}

.news-item {
  width: 430px;
  height: 243px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: block;

}

.news-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-item-title {
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  padding: 0 16px;
  display: block;
}


.africen {
  width: 320px;
  margin: 0 20px 30px;
}

.africen-img-box {
  width: 320px;
  height: 175px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.africen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.africen-img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.africen-video-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  line-height: 20px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
  color: #FFFFFF;
  z-index: 10;

}


.africen-time {
  color: #9A9A9A;
}

.africen-more {
  width: 250px;
  height: 50px;
  line-height: 50px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.56) 99%);
  color: rgba(229, 203, 152, 1);
  font-size: 16px;
  text-align: center;
  margin: 30px auto;
}

.tab-pane {
  min-height: 100px;
}

.service-product {
  background-image: url("~/assets/image/service-bg.png");
  background-size: contain;
}

/* loading.css */
.loading {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: relative;
  border: 4px solid #896B34;
  animation: loader 4s infinite ease;
}

.loading-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #896B34;
  animation: loader-inner 4s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  25% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}

</style>
