<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="container poster-box animate__animated animate__fadeIn">
          <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="poster-img-box">
                <img src="/img/home/card1.jpg" alt="" srcset="">
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="poster-img-box">
                <img src="/img/home/card2.jpg" alt="" srcset="">
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="poster-img-box">
                <img src="/img/home/card3.jpg" alt="" srcset="">
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="poster-img-box">
                <img src="/img/home/card4.jpg" alt="" srcset="">
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- 精选推荐 -->
      <section>
        <div class="container update-big-box animate__animated animate__fadeIn">

          <div class="update-title-box">
            <h2><span>精选推荐<i>NEW</i></span></h2>
          </div>

          <div class="row content-list-box">
            <div v-for="item in homeDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="content-box">
                <div class="content-img-box">
                  <img :src=item.img alt="">
                </div>

                <div class="content-box-content">
                  <div class="content-box-title f1">{{ item.title }}</div>
                  <div class="content-rate-box">
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <View />
                      </el-icon>
                      <div class="content-rate-num">{{ item.view }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <ChatLineRound />
                      </el-icon>
                      <div class="content-rate-num">{{ item.comment }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <Download />
                      </el-icon>
                      <div class="content-rate-num">{{ item.download }}</div>
                    </div>
                  </div>

                  <div class="content-line"></div>

                  <div class="content-user-box">
                    <div class="content-user-img-box">
                      <el-avatar class="content-user-img" :size="30" :src=item.user_img />
                      <div class="content-user-name f1">{{ item.user_name }}</div>
                    </div>
                    <div class="content-user-send-time">{{ item.send_time }}</div>
                  </div>

                </div>

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

        </div>
      </section>


      <!-- Unity工程 -->
      <section class="index-bg ">
        <div class="container update-big-box">

          <div class="update-title-box">
            <h2><span>Unity工程</span></h2>
          </div>

          <div class="row content-list-box">
            <div v-for="item in unityDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="content-box">
                <div class="content-img-box">
                  <img :src=item.img alt="">
                </div>

                <div class="content-box-content">
                  <div class="content-box-title f1">{{ item.title }}</div>
                  <div class="content-rate-box">
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <View />
                      </el-icon>
                      <div class="content-rate-num">{{ item.view }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <ChatLineRound />
                      </el-icon>
                      <div class="content-rate-num">{{ item.comment }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <Download />
                      </el-icon>
                      <div class="content-rate-num">{{ item.download }}</div>
                    </div>
                  </div>

                  <div class="content-line"></div>

                  <div class="content-user-box">
                    <div class="content-user-img-box">
                      <el-avatar class="content-user-img" :size="30" :src=item.user_img />
                      <div class="content-user-name f1">{{ item.user_name }}</div>
                    </div>
                    <div class="content-user-send-time">{{ item.send_time }}</div>
                  </div>

                </div>

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

          <div class="btn-box">
            <el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/project/0-1')">查看更多</el-button>
          </div>
        </div>
      </section>


      <!-- 模型推荐 -->
      <section>
        <div class="container update-big-box">

          <div class="update-title-box">
            <h2><span>模型推荐</span></h2>
          </div>

          <div class="row content-list-box">
            <div v-for="item in modelDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="content-box">
                <div class="content-img-box">
                  <img :src=item.img alt="">
                </div>

                <div class="content-box-content">
                  <div class="content-box-title f1">{{ item.title }}</div>
                  <div class="content-rate-box">
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <View />
                      </el-icon>
                      <div class="content-rate-num">{{ item.view }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <ChatLineRound />
                      </el-icon>
                      <div class="content-rate-num">{{ item.comment }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <Download />
                      </el-icon>
                      <div class="content-rate-num">{{ item.download }}</div>
                    </div>
                  </div>

                  <div class="content-line"></div>

                  <div class="content-user-box">
                    <div class="content-user-img-box">
                      <el-avatar class="content-user-img" :size="30" :src=item.user_img />
                      <div class="content-user-name f1">{{ item.user_name }}</div>
                    </div>
                    <div class="content-user-send-time">{{ item.send_time }}</div>
                  </div>

                </div>

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

          <div class="btn-box">
            <el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/model/0-1')">查看更多</el-button>
          </div>
        </div>
      </section>


      <!-- 动画资源 -->
      <section class="index-bg">
        <div class="container update-big-box">

          <div class="update-title-box">
            <h2><span>动画资源</span></h2>
          </div>

          <div class="row content-list-box">
            <div v-for="item in animationDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="content-box">
                <div class="content-img-box">
                  <img :src=item.img alt="">
                </div>

                <div class="content-box-content">
                  <div class="content-box-title f1">{{ item.title }}</div>
                  <div class="content-rate-box">
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <View />
                      </el-icon>
                      <div class="content-rate-num">{{ item.view }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <ChatLineRound />
                      </el-icon>
                      <div class="content-rate-num">{{ item.comment }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <Download />
                      </el-icon>
                      <div class="content-rate-num">{{ item.download }}</div>
                    </div>
                  </div>

                  <div class="content-line"></div>

                  <div class="content-user-box">
                    <div class="content-user-img-box">
                      <el-avatar class="content-user-img" :size="30" :src=item.user_img />
                      <div class="content-user-name f1">{{ item.user_name }}</div>
                    </div>
                    <div class="content-user-send-time">{{ item.send_time }}</div>
                  </div>

                </div>

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

          <div class="btn-box">
            <el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/animation/0-1')">查看更多</el-button>
          </div>
        </div>
      </section>


      <!-- 软件下载 -->
      <section>
        <div class="container update-big-box">

          <div class="update-title-box">
            <h2><span>软件下载</span></h2>
          </div>

          <div class="row content-list-box">
            <div v-for="item in softwareDataList" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
              <div class="content-box">
                <div class="content-img-box">
                  <img :src=item.img alt="">
                </div>

                <div class="content-box-content">
                  <div class="content-box-title f1">{{ item.title }}</div>
                  <div class="content-rate-box">
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <View />
                      </el-icon>
                      <div class="content-rate-num">{{ item.view }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <ChatLineRound />
                      </el-icon>
                      <div class="content-rate-num">{{ item.comment }}</div>
                    </div>
                    <div class="content-rate-icon-box">
                      <el-icon class="content-rate-icon">
                        <Download />
                      </el-icon>
                      <div class="content-rate-num">{{ item.download }}</div>
                    </div>
                  </div>

                  <div class="content-line"></div>

                  <div class="content-user-box">
                    <div class="content-user-img-box">
                      <el-avatar class="content-user-img" :size="30" :src=item.user_img />
                      <div class="content-user-name f1">{{ item.user_name }}</div>
                    </div>
                    <div class="content-user-send-time">{{ item.send_time }}</div>
                  </div>

                </div>

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

          <div class="btn-box">
            <el-button class="btn" type="primary" size="large" @click="handleJumpRoute('/software/0-1')">查看更多</el-button>
          </div>
        </div>
      </section>

    </div>

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

<script setup>
import { computed } from "vue";
import { fontSizeReactive } from "~/utils/Tool";
// 精选推荐
let homeDataList = ref(
  [
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
  ]
)
// unity工程
let unityDataList = ref(
  [
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
  ]
)
// 模型
let modelDataList = ref(
  [
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
  ]
)
// 动画
let animationDataList = ref(
  [
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
  ]
)
// 软件
let softwareDataList = ref(
  [
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
    {
      id: 1,
      category_id: "",
      link: "",
      img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
      title: "BIneder 微动态场景旅途中",
      view: 333,
      comment: 11,
      download: 2,
      user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
      user_name: "西瓜西了西",
      send_time: "2024-03-01",
    },
  ]
)

/**  基础变量  **/
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 router = useRouter()
const handleJumpRoute = function (item) {
  let url = "/zh" + item
  router.push(url)
}


/**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/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>
