<script setup lang="ts">
definePageMeta({
  name: "homePage",
});
let pageTitle: any = ref("Home");
useHead(() => ({
  title: pageTitle.value,
}));
import { Search } from "@element-plus/icons-vue";
import { DefaultQuery, pageSizes } from "~/domain/query";
import type spuQuery from "~/api/spu/spuQuery";
import { useAll } from "~/api/pubAll/service";
const { getNewsList, getContent, getCategory, guestbook, getApplicationList, menuContent } =
  useAll();

const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;
const CategoryStore = useCategoryStore();
const route = useRoute();
const user = useUserStore();
const HomeStore = useHomeStore();
let videoFalg: any = ref(false);
let searchVal: Ref<string> = ref((route.query.key as string) || "");
const defaultQuery = () => {
  const q = new DefaultQuery({}) as spuQuery;
  q.pageSize = 20;
  return q;
};
let wl: any = ref("");
let open = ref({
  category: false,
  video: false,
});
const query: Ref<spuQuery> = ref(defaultQuery());
function openFun() {
  open.value.category = !open.value.category;
  // document.body.style.overflow = "hidden";
}

let timer: any = null;

const { data: ssrGetContent } = await useAsyncData<any>("getContent", () =>
  getContent({
    language: 2,
    code: 1,
  })
);
let datas = ref(ssrGetContent.value.data || []);
const { data: zzzlData } = await useAsyncData("patentPage", () =>
  menuContent()
);
const rawData = computed<any[][]>(() =>
  Array.isArray(zzzlData.value?.data) ? zzzlData.value?.data : []
);
const sections = computed<any[]>(() =>
  rawData.value
);
onMounted(() => {
  isLoad.value = true;
  if (CategoryStore.value.Category.length == 0) {
    getCategoryFun();
  }
  getNewsListFun();
});

// Use multiple languages ​​in ts
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance()!;
function SearchFun() {
  if(!user.value.publicSearch){
    return 
  }
  navigateTo({
    path: "/search",
    query: {
      key: user.value.publicSearch,
      current: 1,
      size: 10,
    },
  });
}

import banner1 from "@/assets/img/banner/banner_1.png";
const comments = ref([
  {
    img: banner1,
    code: "javascript:;",
    name: "0",
  },
]);
let controlledSwiper: any = ref(null);
let swiperIdx = ref(0);
const isLoad = ref(false);
// 获取实例 swiper
function setControlledSwiper(swiper: any) {
  controlledSwiper.value = swiper;
}
function slideChangeFun(e: any) {
  swiperIdx.value = e.realIndex;
}

let controlledSwiper2: any = ref(null);
let swiperIdx2 = ref(0);
// 获取实例 swiper
function setControlledSwiper2(swiper: any) {
  controlledSwiper2.value = swiper;
}
function slideChangeFun2(e: any) {
  swiperIdx2.value = e.realIndex;
}

onBeforeUnmount(() => {
  HomeStore.value.homeScrollPosition = document.documentElement.scrollTop;
});

onUnmounted(() => {
  clearInterval(timer);
});

const { data: ssrGetApplicationList, refresh } = await useAsyncData<any>(
  "getApplicationList",
  () =>
    getApplicationList({
      current: 1,
      records: [{ cid: 205, language: 2 }],
      size: 5,
    })
);
let solution = ref(ssrGetApplicationList.value?.data?.records ?? []);
const news: any = ref([]);
async function getNewsListFun() {
  const res: any = await getNewsList({
    current: 1,
    records: [{ cid: 40, language: 2 }],
    size: 3,
  });

  if (res.httpCode == 200) {
    news.value = res.data.records;
  }
}
async function getCategoryFun() {
  const res: any = await getCategory();
  if (res.httpCode == 200) {
    CategoryStore.value.Category = res.data;
  }
}

const queryC: any = ref({
  phone: "",
  username: "",
  messageContents: "",
  companyName: "",
  companyType: "",
  country: "",
  jobTitle: "",
  languageType: 0,
  mailbox: "",
  queryType: "",
  state: 0,
  trade: "",
});
let loading = ref(false);
async function guestbookFun() {
  loading.value = true;
  let res: any = await guestbook(queryC.value);
  if (res.httpCode == 200) {
    ElMessage.success(`Submitted successfully`);
    loading.value = false;
    queryC.value = {
      phone: "",
      username: "",
      messageContents: "",
      companyName: "",
      companyType: "",
      country: "",
      jobTitle: "",
      languageType: 0,
      mailbox: "",
      queryType: "",
      state: 0,
      trade: "",
    };
  }
}

let dataZn: Ref<any> = ref([
  {
    name: "Huizhou HKT Technology Park (South China Smart Manufacturing Center)",
    img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/%E6%83%A0%E5%B7%9E.png",
  },
  {
    name: "Nanchong Base (Southwest Smart Manufacturing Center)",
    img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/%E5%9B%9B%E5%B7%9D.png",
  },
  {
    name: "Nanchong Base (Southwest Smart Manufacturing Center)",
    img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/anhao2026-03-18.png",
  },
  {
    name: "Marketing Center (Group Headquarters)",
    img: "https://hotking.oss-cn-hongkong.aliyuncs.com/hkt/adpos/pic/kanglichen2026-03-18.png",
  },
]);

const swiperInstance2: any = ref(null);
// Swiper 初始化时触发
const onSwiperInit2 = (swiper: any) => {
  swiperInstance2.value = swiper;
};
const pauseAutoplay2 = () => {
  if (swiperInstance2.value) {
    swiperInstance2.value.autoplay.stop();
  }
};

// 鼠标离开时恢复轮播
const resumeAutoplay2 = () => {
  if (swiperInstance2.value) {
    swiperInstance2.value.autoplay.start();
  }
};
</script>
<template>
  <div class="mobile-home">
    <template v-if="isLoad">
      <el-affix :offset="43">
        <div class="search-input-wrap">
          <el-input class="input-wrap" v-model="user.publicSearch" size="large" placeholder="Search by model or package" @keyup.enter.native="SearchFun">
            <template #append>
              <div @click="SearchFun">
                <el-icon>
                  <Search />
                </el-icon>
              </div>
            </template>
          </el-input>
          <i class="category-icon" @click="openFun"></i>
        </div>
      </el-affix>
      <!-- banner -->
      <div class="banner-wrap">
        <div v-if="!isLoad && isClient" class="banner-img" style="background: #fafafa">
          <NuxtImg class="banner-img" src="/img/loading.png" loading="lazy" placeholder="/img/loading.png" width="780" height="440" alt="banner"></NuxtImg>
        </div>
        <Swiper v-else :autoplay="{ delay: 3500, disableOnInteraction: false }" :loop="true" @swiper="setControlledSwiper" :modules="[SwiperAutoplay, SwiperController,SwiperPagination]" :slides-per-view="1" :space-between="0" :pagination="{ clickable: true}" @slideChange="slideChangeFun">
          <SwiperSlide v-for="(item,index) in comments" :key="item" :virtualIndex="index">
            <a :href="item.code" target="_blank" v-if="item.name=='0'">
              <img :src="item.img" class="banner-img">
            </a>
          </SwiperSlide>
        </Swiper>
      </div>

      <!-- 产品中心 -->
      <div class="tab-nav-wrap">
        <div class="title">
          <h3>Products</h3>
        </div>
        <ul class="tab-nav">
          <li v-for="(i,idx) in CategoryStore.Category" :key="i" v-show="idx<7">
            <NuxtLink :to="{path:'/category/list',query:{code:i.subCatgory[0].id,current:1,size:10,cname:i.subCatgory[0].nameEn}}">
              <div class="nav-img-wrap">
                <NuxtImg class="nav-img" :src="i.img" :loading="isClient ? 'lazy' : 'eager'" :placeholder="isClient ? '/img/loading.png' : undefined" alt="nav"></NuxtImg>
              </div>
              <p>{{i.nameEn}}</p>
            </NuxtLink>
          </li>
          <li>
            <NuxtLink :to="{path:'/category'}">
              <div class="nav-img-wrap">
                <img src="@/assets/img/home/more.svg" width="30">
              </div>
              <p>View More</p>
            </NuxtLink>
          </li>
        </ul>
      </div>

      <!-- 公司简介 -->
      <section class="section company">
        <div class="title">
          <h3>Company Profile</h3>
        </div>

        <img src="@/assets/img/icon/about-bg.png" alt="" srcset="" class="company-img">

        <p class="desc">
          The company focuses on electronic components manufacturing. Established in 1992, it has extensive industry experience,
          with products covering multiple sectors including consumer electronics and industrial control.
        </p>

        <div class="data">
          <div class="data-item">
            <h4>22 Years</h4>
            <p>Industry Experience</p>
          </div>
          <div class="data-item">
            <h4>50K+</h4>
            <p>Partner Clients</p>
          </div>
          <div class="data-item">
            <h4>60+</h4>
            <p>Countries Served</p>
          </div>
        </div>
      </section>

      <section class="section">
        <div class="zn-wrap home-block">
          <h3 class="home-title">Two Regional Smart Manufacturing Centers</h3>
          <div class="tip">
            The group operates two manufacturing bases in South China and Southwest China. The South China base is located in Boluo County, Huizhou, with 80,000 square meters of factory area, while the Southwest base is located in Shunqing District, Nanchong, Sichuan, with 40,000 square meters.
          </div>
          <div @mouseenter="pauseAutoplay2" @mouseleave="resumeAutoplay2">
            <Swiper @swiper="onSwiperInit2" :autoplay="{ delay: 3500, disableOnInteraction: false, pauseOnMouseEnter: false }" :loop="true" :modules="[SwiperAutoplay, SwiperEffectCreative,SwiperNavigation,SwiperPagination,SwiperController]" :slides-per-view="1" :space-between="0" :pagination="{ clickable: true}" navigation>
              <SwiperSlide v-for="(item,index) in dataZn" :key="item" :virtualIndex="index">
                <div class="zn-list">
                  <div class="img">
                    <img :src="item.img" alt="">
                    <h3>{{ item.name }}</h3>
                  </div>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </section>

      <section class="section pb70">
        <div class="sb-wrap">
          <h3 class="home-title">{{datas[3][0].title}}</h3>
          <div class="tip" v-html="datas[3][0].content"></div>
          <ul class="ul">
            <li v-for="(item,index) in datas[3][0].list" :key="index">
              <nuxt-link class="img" :to="{ name: 'pdtion-finfo' }">
                <img :src="item.image">
              </nuxt-link>
              <h4>{{item.title}}</h4>
            </li>
          </ul>
        </div>
      </section>
      <section class="section">
        <div class="zzzl-wrap">
          <h3 class="home-title">{{sections[0].title}}</h3>
          <div class="tip" v-html="sections[0].content"></div>
          <ul class="ul" v-if="sections.length>0">
            <li v-for="(item,index) in sections[0].list" :key="index">
              <nuxt-link class="img" :to="{ name: 'pdtion-finfo' }">
                <img :src="item.image">
              </nuxt-link>
              <h4>{{item.title}}</h4>
            </li>
          </ul>
        </div>
      </section>

      <!-- 行业方案 -->
      <section class="solution">
        <Swiper :autoplay="{ delay: 888500, disableOnInteraction: false }" :loop="true" @swiper="setControlledSwiper2" :modules="[SwiperAutoplay, SwiperController,SwiperPagination]" :slides-per-view="1" :space-between="0" :pagination="{ clickable: true}" @slideChange="slideChangeFun2">
          <SwiperSlide v-for="(item,index) in solution" :key="item" :virtualIndex="index">
            <div class="solution_bg">
              <img src="@/assets/img/home/051.png" alt="" srcset="" v-if="index==0">
              <img src="@/assets/img/home/052.png" alt="" srcset="" v-else-if="index==1">
              <img src="@/assets/img/home/053.png" alt="" srcset="" v-else-if="index==2">
              <img src="@/assets/img/home/054.png" alt="" srcset="" v-else-if="index==3">
              <img src="@/assets/img/home/055.png" alt="" srcset="" v-else-if="index==4">
            </div>
            <div class="solution-info">
              <h4>{{ Number(index)+1 }}</h4>
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
              <NuxtLink :to="{path:'/news/detail',query:{code:item.id}}">View More →</NuxtLink>
            </div>
          </SwiperSlide>
        </Swiper>
      </section>

      <!-- 新闻 -->
      <section class="section">
        <div class="title">
          <h3>News & Events</h3>
        </div>

        <div class="news-list">
          <NuxtLink class="news-item" v-for="item in news" :key="item.title" :to="{path:`/news/detail`,query:{code:item.id}}">
            <h4>{{ item.title }}</h4>
            <p class="date">{{ item.publishTime }}</p>
          </NuxtLink>
        </div>
      </section>

      <!-- 直播间 -->
      <section class="live">
        <div class="sp-con">
          <div class="sp_open" @click="open.video=!open.video"></div>
        </div>
      </section>

      <!-- 留言 -->
      <section class="message">
        <div class="title white">
          <h3>Online Message</h3>
        </div>

        <el-form class="form">
          <el-input type="textarea" :rows="3" placeholder="Please enter your message" v-model="queryC.messageContents" />
          <el-input placeholder="Please enter your name" v-model="queryC.username" />
          <el-input placeholder="Please enter your phone number" v-model="queryC.phone" />
          <el-button type="danger" round class="submit" @click="guestbookFun" v-loading="loading">
            Submit Now
          </el-button>
        </el-form>
      </section>
    </template>
  </div>
  <el-dialog class="video-dialog" v-model="open.video" destroy-on-close append-to-body :z-index="2000" :show-close='false' :close-on-press-escape="false" :align-center='true'>
    <div class="con">
      <iframe class="video" src="https://player.bilibili.com/player.html?bvid=BV1af4JzZEWh" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    </div>
    <i class="close" @click="open.video=false"></i>
  </el-dialog>
</template>
<style scoped lang="scss">
.sb-wrap {
  ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  li {
    padding-bottom: 30px;
    position: relative;
    display: flex;
    border: 1px solid #f4f4f4;
    a {
      flex: 1;
      display: flex;
    }
    h4 {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      background-color: #e63c3cb3;
      color: #fff;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
    }
  }
}
.zzzl-wrap {
  ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  li {
    padding-bottom: 30px;
    position: relative;
    display: flex;
    border: 1px solid #f4f4f4;
    a {
      flex: 1;
      display: flex;
    }
    h4 {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      background-color: #e63c3cb3;
      color: #fff;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
    }
  }
}
.search-input-wrap {
  padding: 12px 12px 6px 12px;
  display: flex;
  .input-wrap {
    height: 32px;
    background: #fff;
    border-radius: 28px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  :deep(.el-input--large .el-input__wrapper) {
    border-radius: 28px;
    box-shadow: unset;
    padding-right: 0;
  }
  :deep(.el-input__inner) {
    height: 30px;
    line-height: 20px;
    padding: 5px 0;
  }
  :deep(.el-input__prefix) {
    font-size: 18px;
  }
  .el-input:deep(.el-input__wrapper.is-focus) {
    box-shadow: unset !important;
  }
  :deep(.el-input-group__append) {
    background: #fff;
    border-radius: 0 25px 25px 0;
    box-shadow: 0 0 0 1px #fff inset;
    color: $mainColor;
    padding: 0 10px;
    .el-icon {
      width: 26px;
      height: 26px;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
:deep(.el-affix--fixed) {
  top: 44px !important;
  .search-input-wrap {
    box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.1);
    background: #fff;
    z-index: 10;
    padding-bottom: 12px;
  }
}
:deep(.swiper-button-next:after),
:deep(.swiper-button-prev:after) {
  font-size: 24px;
}
.zn-wrap {
  .swiper {
    padding-bottom: 20px;
  }
}
.zn-list {
  h3 {
    text-align: center;
    font-size: 12px;
    line-height: 26px;
  }
}
:deep(.swiper-pagination) {
  bottom: 0px;
}
.banner-wrap {
  padding: 5px 12px 12px;
  .swiper {
    border-radius: 8px;
  }
  .banner-img {
    width: 100%;
    height: 215px;
    display: block;
    border-radius: 8px 8px 8px 8px;
    :deep(img) {
      border-radius: 8px 8px 8px 8px;
    }
  }
}

.tab-nav-wrap {
  background: #fff;
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 1px;
  .tab-nav {
    display: flex;
    flex-wrap: wrap;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
      min-width: 25%;
      margin-bottom: 20px;
    }
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .nav-img-wrap {
      width: 60px;
      height: 60px;
      background: #fff;
      margin-bottom: 5px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e8e8e8;
    }
    .nav-img {
      width: 45px;
      height: 45px;
    }
    p {
      height: 20px;
      font-size: 12px;
      color: #333333;
      line-height: 20px;
      text-align: center;
    }
  }
}
.mobile-home {
  background: #f5f6f7;
  padding-bottom: 1px;
  min-height: 100vh;
}

/* banner */

.banner {
  position: relative;
}

.banner img {
  width: 100%;
  display: block;
}

.banner-text {
  position: absolute;
  bottom: 20px;
  left: 16px;
  color: #fff;
}

.banner-text h2 {
  font-size: 18px;
}

/* 通用section */

.section {
  padding: 20px 16px;
  background: #fff;
  margin-top: 12px;
}

.title {
  text-align: center;
  margin-bottom: 16px;
}

.title h3,
.home-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.tip {
  margin-top: 10px;
  font-size: 12px;
  margin-bottom: 12px;
  text-align: center;
}

/* 产品 */

.product-item {
  text-align: center;
}

.product-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.product-item p {
  font-size: 12px;
  margin-top: 6px;
}

.more-btn {
  text-align: center;
  margin-top: 16px;
}

/* 公司 */

.company-img {
  width: 100%;
  border-radius: 6px;
}

.desc {
  font-size: 12px;
  color: #666;
  margin: 10px 0;
  line-height: 20px;
}

.data {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
}
.data-item {
  width: 80px;
  text-align: center;
  font-size: 14px;
  h4 {
    color: $mainColor;
    font-size: 16px;
    line-height: 30px;
  }
}

/* 行业方案 */

.solution {
  position: relative;
  width: 100%;
  margin-top: 12px;
  .solution_bg{
    width: 100%;
  }
  .solution-info {
    color: #fff;
    height: 230px;
    background: linear-gradient(180deg, #ff3a3a, #ff0000);
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px 10px;
    h4 {
      font-size: 14px;
      margin-bottom: 8px;
      border: 1px solid #fff;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    h3 {
      font-size: 20px;
      margin-bottom: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-wrap: break-word;
      word-break: break-all;
    }
    p {
      font-size: 14px;
      margin-bottom: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-wrap: break-word;
      word-break: break-all;
    }
    a {
      border: 1px solid #f4f4f4;
      padding: 2px 10px;
      border-radius: 3px;
    }
  }
}

/* 新闻 */

.news-item {
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 6px;
  display: block;
  & + .news-item {
    margin-top: 12px;
  }
  h4 {
    font-size: 14px;
  }
}

.date {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

/* 直播 */
.live {
  margin-top: 12px;
  position: relative;
  .sp-con {
    width: 100%;
    height: 220px;
    position: relative;
    background: #000;
    padding-top: 1px;
    background: url(@/assets/img/home/index_spbg.png) no-repeat center center;
    background-size: 100% 220px;
    display: flex;
    align-items: center;
    justify-content: center;

    .sp_open {
      width: 40px;
      height: 40px;
      background: url(@/assets/img/home/index_spOpen2.png) no-repeat center
        center;
      background-size: 30px auto;
    }

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 22px;
      background: url(@/assets/img/home/index_spOpen3.png) no-repeat center
        center;
      background-size: 100% auto;
      left: 0;
      bottom: -8px;
    }
  }
}

/* 留言 */

.message {
  background: linear-gradient(180deg, #ff3a3a, #ff0000);
  padding: 20px 16px;
  margin-top: 12px;
  margin-bottom: 0px;
}

.white {
  color: #fff;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.submit {
  margin-top: 10px;
}
</style>
<style lang="scss">
.video-dialog {
  width: 90% !important;
  padding: 0px 0 !important;
  position: relative;
  border-radius: 5px !important;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
    position: relative;
    .con {
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 10px;
    }
    .video {
      height: 300px;
    }
  }
  .close {
    background: url("~/assets/img/icon/close.svg") no-repeat top center;
    background-size: 30px 30px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
  }
}
</style>
