<template>

  <Head>
    <Title>{{ tdk?.tdk_title }}</Title>
    <Meta :content=tdk?.tdk_keyword name="keywords" />
    <Meta :content=tdk?.tdk_description name="description" />
    <Meta name="baidu-site-verification" content="" />
  </Head>
  <Header></Header>
  <Carousel></Carousel>

  <div class="Home-main">
    <div class="main">
      <section>
        <div class="acard">
          <div class="container">
            <div class="row acardflex">
              <div class="acard_left col-xs-12 col-sm-12 col-md-6 col-lg-6 right op0"
                data-animation="slide-in-blurred-left">
                <div class="videocard_title">
                  <span> {{ $t('home.who.title') }} </span>
                  <h2>{{ $t('home.who.company') }}</h2>
                  <p>{{ $t('home.who.desc') }}</p>
                </div>
                <div class="acard_list">
                  <ul>
                    <li>
                      <div class="acardli">
                        <i class="iconfont3">&#xe65a;</i>
                        <p>{{ $t('home.who.tech') }}</p>
                        <div class="acardlicover"></div>
                      </div>
                    </li>
                    <li>
                      <div class="acardli">
                        <i class="iconfont">&#xe635;</i>
                        <p>{{ $t('home.who.service') }}</p>
                        <div class="acardlicover"></div>
                      </div>
                    </li>
                    <li>
                      <div class="acardli">
                        <i class="iconfont">&#xe63e;</i>
                        <p>{{ $t('home.who.price') }}</p>
                        <div class="acardlicover"></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="acard_right col-xs-12 col-sm-12 col-md-6 col-lg-6 left op0"
                data-animation="slide-in-blurred-right">
                <!-- <div class="acardimg videoimgbtn videobtns"> -->
                <!-- <div class="acard_video"> -->
                <video ref="videoPlay" class="acardimg" controls width="100%" autoplay muted="muted"
                  :poster="video_url?.home_video_cover ? video_url?.home_video_cover : '/img/home/about-2.jpg'">
                  <source :src="video_url?.home_video_url">
                </video>
                <!-- </div> -->
                <!-- </div> -->
              </div>

            </div>
          </div>
        </div>
      </section>

      <!-- 优质服务 -->
      <section>
        <div class="bcard">
          <div class="bcardcover"></div>
          <div class="container">
            <div class="bcard_title right">
              <span>{{ $t('home.service.our') }}</span>
              <h2>{{ $t('home.service.pro') }}</h2>
            </div>
            <div class="bcard_list op0 " data-animation="slide-in-blurred-left">
              <div class="row">

                <div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4" v-for="item in Professional_data">
                  <div class="bcard_box">
                    <span class="bcardicon"><i class="iconfont2" v-html="item.professional_service_icon"></i></span>
                    <div class="bcard_txt">
                      <a href="javascrpit:;">
                        <h3>{{ item.professional_service_title }}</h3>
                      </a>
                      <p>{{ item.professional_service_describe }}</p>
                      <nuxt-link class="bcard_more" :to="item.professional_service_link">
                        <h4>{{ $t('home.service.more') }}</h4>
                        <i class="iconfont">&#xe60d;</i>
                      </nuxt-link>
                    </div>
                  </div>
                </div>


              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 高光 -->
      <section>
        <div class="number bottom op0" data-animation="slide-in-elliptic-top-fwd">
          <div class="container">
            <div class="number_con">
              <ul>
                <li v-for="item in heightlight_data">
                  <span><i class="iconfont">&#xe69a;</i></span>
                  <p>{{ item.highlights_title }}</p>
                </li>


              </ul>
            </div>
          </div>
        </div>
      </section>


      <section>
        <div class="double_banner">

          <div style="margin-bottom:20px">

            <InfiniteRotation
                :openMargin="true"
                :slidesPerView="slidesPerView" :Infinite="true" :direction='false'
              :bannerList="bannerListUp">
            </InfiniteRotation>
          </div>
<!--         <div>-->

<!--            <InfiniteRotation :slidesPerView="slidesPerView" :direction='true' :bannerList="bannerListDown">-->
<!--            </InfiniteRotation>-->
<!--          </div>-->
        </div>

      </section>



      <!-- 第二横幅 -->
      <section>
        <div class="brand colormove" data-animation="slide-in-elliptic-top-fwd">

          <div class="brand_txt">
            <h2>{{ $t('home.for.title') }}</h2>
            <p>{{ $t('home.for.desc') }}</p>

            <nuxt-link :to="getHerf('/product/product_list/0-1')">
              <div class="brand_more">

                {{ $t('home.for.start') }}
              </div>
            </nuxt-link>

            <!-- <a href="products/index.html" class="brand_more">{{ $t('home.for.start') }}</a> -->
          </div>
          <div class="brandcover"></div>
        </div>
      </section>

      <!-- 产品列表 -->
      <section>
        <div class="allmain">
          <div class="blog_title right op0" data-animation="slide-in-blurred-left">
            <span>{{ $t('home.products.title') }}</span>
            <h2>{{ $t('home.products.desc') }}</h2>
          </div>
          <div class="allmain_list">
            <div class="row allmainflex">

              <div class="allmain_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="item in product_data">
                <nuxt-link :to="getHerf(getProductLink(item))" class="jump">
                  <div class="allmain_box">
                    <div class="allmain_cover"></div>
                    <a href="javascript:;" class="allmain_txt">
                      <h3>{{ item.product_name }}</h3>
                      <p>{{ item.product_description }}</p>
                    </a>
                    <a href="javascript:;" class="allmainimg">
                      <img :src="item.product_img" alt="" />
                    </a>
                  </div>
                </nuxt-link>
              </div>

            </div>
          </div>
        </div>
      </section>

      <section>
        <div>
          <img width=100% src="/img/home/38a0b923.png" alt="图片1">
        </div>
      </section>
      <!-- 新闻 -->
      <section>
        <div class="blog">
          <div class="container">
            <div class="blog_title right" data-animation="slide-in-blurred-left">
              <span>{{ $t('home.news.title') }}</span>
              <h2>{{ $t('home.news.desc') }}</h2>
            </div>
            <div class="blog_main">
              <div class="row blogflex">

                <div class="blog_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="(item, i) in newsList">
                  <nuxt-link :to="getHerf(getNewsLink(item))" class="jump">
                    <div class="blog_box">
                      <div class="blogtime">
                        <span>{{ item.news_issue_date_month }}-{{ item.news_issue_date_day }}</span>
                        <p>{{ item.news_issue_year }}</p>
                      </div>
                      <span class="blog_img">
                        <img :src="item.news_cover" alt="" />
                      </span>
                      <div class="blog_txt">

                        <h3> {{ item.news_title }}</h3>

                        <p>{{ item.news_intro }}
                        </p>
                        <span class="blog_more">
                          <span>{{ $t('news.more') }}</span>
                          <i class="iconfont">&#xe60d; </i>
                        </span>
                      </div>
                    </div>
                  </nuxt-link>
                </div>


              </div>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="blog">
          <div class="container">
            <div class="blog_title right" data-animation="slide-in-blurred-left">
              <span>{{ $t('home.partners.title') }}</span>
              <h2>{{ $t('home.partners.desc') }}</h2>
            </div>
            <div class="partners_main">
              <div class="partners_flex">
                <div class=" partners_li" v-for="item in partners_data">
                  <!-- <div class="partners_div"> -->
                  <img :src="item.partners_img" alt="">
                  <!-- </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

  </div>
  <PopupSidebar></PopupSidebar>
  <PopupMessageUs></PopupMessageUs>
  <Final></Final>
</template>

<script setup>
import { computed } from "vue";
import { fontSizeReactive } from "~/utils/Tool";
let newsList = ref([
])
let product_data = ref([])
/**  基础变量  **/
const { t, locale } = useI18n()

/**预对接的数据**/
let openImg1 = ref("/img/home/open/open1.png")


/**
 * 接口对接
 */

// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
  tdk.value = JSON.parse(res.data.value).data
})
let timer_data = reactive(['125', '1250', '850', '135'])
let _timer_data = reactive(['0', '0', '0', '0'])
let i = ref('1')
let key = ref(0)

const slidesPerView = ref(7)
/**onMounted**/
onMounted(() => {
  // console.log(locale,'locale');
  /**
   * 字体自适应，当小于880的时候字体-=1，480的时候-=1
   * */
  fontSizeReactive({
    880: 1,
    480: 1,
  })
  htmlAddAnimations({
    tagDom: 'Home-main', preload: 1, isRe: true
  })
  const totalHeight = document.body.scrollHeight;
})

const bannerListUp = ref([])

await useFetch('/api/home/crossBanner/getCrossBanner').then(res => {
  let data = JSON.parse(res.data.value).data
  const val = data['up']?.map(v => { return { banner_img: v.cross_banner_img, src: '' } })
  if (val.length < 7) val.push(...val)
  bannerListUp.value = val

})

const videoPlay = ref()
let video_url = ref('')
useFetch('/api/home/video/getHomeVideo', { params: { locale: locale.value } }).then(res => {
  video_url.value = JSON.parse(res.data.value).data[0]
  videoPlay.value.src = video_url.value.home_video_url
})
const Professional_data = ref([])
useFetch('/api/home/ProfessionalService/getProfessionalServiceList', { params: { locale: locale.value } }).then(res => {
  Professional_data.value = JSON.parse(res.data.value).data
  // console.log(JSON.parse(res.data.value).data, 'getProfessionalServiceList@@');
})
const partners_data = ref([])
useFetch('/api/home/partners/getPartnersList').then(res => {
  partners_data.value = JSON.parse(res.data.value).data
  // console.log(partners_data.value, '1partners@@');
})
const heightlight_data = ref([])
useFetch('/api/home/Highlights/getHighlightsList', { params: { locale: locale.value } }).then(res => {
  heightlight_data.value = JSON.parse(res.data.value).data
  // console.log(heightlight_data.value, '1heightlight_data@@');
})


useFetch('/api/product/getHotProductList', { params: { locale: locale.value } }).then(res => {
  let data = []
  JSON.parse(res.data.value).data.forEach(element => {
    element.product_img = element.product_img.split(",")[0];
    product_data.value.push(element)
  });
})

useFetch('/api/news/getNewsList', { params: { idx: 1, locale: locale.value } }).then(res => {
  let data = JSON.parse(res.data.value).data
  for (let i = 0; i < 3; i++) {
    let element = data[i]
    if (!element) break;
    element.news_issue_year = element.news_issue_date?.split("-")[0];
    element.news_issue_date_month = element.news_issue_date?.split("-")[1];
    element.news_issue_date_day = element.news_issue_date?.split("-")[2];
    newsList.value.push(element)
  }
  // console.log(newsList.value, 'news@@');
})

const getNewsLink = function (item) {
  if (item.news_link) {
    return item.news_link;
  } else {
    return "/news/details/" + item.news_id;
  }
}

function getProductLink(item) {
  if (item.product_link) {
    return item.product_link;
  } else {
    return "/product/details/" + item.product_id;
  }
}

/**export**/
defineExpose({
  middleware: 'auth'
})

</script>

<style scoped src="~/assets/css/index/index.scss"></style>
<style scoped src="~/assets/css/index/media.scss"></style>
<style scoped src="~/assets/css/IndexDetail/index.scss"></style>
<style scoped src="~/assets/css/IndexDetail/media.scss"></style>
<style scoped src="~/assets/css/index/font/iconfont.css"></style>
<style scoped src="~/assets/css/index/iconfont/iconfont.css"></style>
<style scoped src="~/assets/css/index/font2/iconfont.css"></style>
