<script setup lang="ts">
definePageMeta({
  name: "homePage",
});
let pageTitle: any = ref("HOTKING-首页");
useHead(() => ({
  title: pageTitle.value,
}));
import { Search } from "@element-plus/icons-vue";
import { DefaultQuery, pageSizes } from "~/domain/query";
import type spuType from "~/domain/Spu";
import type spuQuery from "~/api/spu/spuQuery";
import { useSpu } from "~/api/spu/spuService";
import { useAll } from "~/api/pubAll/service";
const { getNewsList } = 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;
onMounted(() => {
  isLoad.value = true;
});

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

const loading = ref(false);

import banner1 from "@/assets/img/banner/banner_1.png";
const comments = ref([
  {
    img: banner1,
    code: "javascript:;",
    name: "0",
  },
  // {
  //   img: banner2,
  //   code: "341",
  //   name: "美容及个人护理",
  // },
  // {
  //   img: banner3,
  //   code: "2",
  //   name: "家居用品",
  // },
]);
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;
}

function download() {
  let obj = {
    method: "get",
    url: `${useRuntimeConfig().public.apiBase}/bom/downloadExcel`,
    fileName: `bom查询模板导出`,
    params: "",
  };
  exportMethod(obj); // 模板导出
}
onBeforeUnmount(() => {
  HomeStore.value.homeScrollPosition = document.documentElement.scrollTop;
});

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

const {
  data: ssrNewsData,
  error,
  refresh,
} = await useAsyncData<any>("getNewsList", () =>
  getNewsList({
    cid: 35,
    pageNum: 1,
    pageSize: 5,
  })
);
const newsArr = ref<any[]>(ssrNewsData.value?.data.records || []);
</script>
<template>
  <div class="home-boxs-bg">
    <div class="max-w1280 home-boxs">
      <img src="@/assets/img/loading.png" width="0" height="0" />
      <el-affix :offset="43">
        <div class="search-input-wrap" @click="user.searchFalg = true">
          <el-input class="input-wrap" v-model="user.publicSearch" size="large" placeholder="输入中英文产品名称搜索" @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>
      <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 mg12">
        <ul class="tab-nav">
          <li v-for="i in CategoryStore.Category" :key="i">
            <NuxtLink :to="{path:'/search',query:{key:i.nameCh,pageNum:1,pageSize:20}}">
              <div class="nav-img-wrap">
                <NuxtImg class="nav-img" :src="i.image" :loading="isClient ? 'lazy' : 'eager'" :placeholder="isClient ? '/img/loading.png' : undefined" alt="nav"></NuxtImg>
              </div>
              <p>{{i.nameCh}}</p>
            </NuxtLink>
          </li>
          <li>
            <NuxtLink :to="{path:'/category'}">
              <div class="nav-img-wrap">
                <img src="@/assets/img/home/more.svg" width="30">
              </div>
              <p>查看更多</p>
            </NuxtLink>
          </li>
        </ul>
      </div>
      <div class="bom-wrap mg12 home-break">
        <h3 class="index-title">BOM配单专家</h3>
        <div class="bom-con">
          <h5>标品齐全，选合晶芯城BOM配单</h5>
          <p>只能匹配&nbsp;·&nbsp;在线编辑&nbsp;·&nbsp;方便分享&nbsp;·&nbsp;下单协助</p>
          <div class="btn">
            <NuxtLink to="/bom">上传BOM</NuxtLink>
          </div>
          <a class="down" href="javascript:;" @click="download">下载BOM标准模板 提升选型准确率</a>
        </div>
      </div>
      <div class="logistics-wrap mg12 home-break">
        <h3 class="index-title">原厂直供</h3>
        <div class="logistics-con">
          <div class="sp-con">
            <div class="sp_open" @click="open.video=!open.video"></div>
          </div>
          <!-- <div class="search-input-wrap">
            <el-input class="input-wrap" v-model="wl" size="large" placeholder="输入中英文产品名称搜索">
              <template #append>
                <div>
                  <el-icon>
                    <Search />
                  </el-icon>
                </div>
              </template>
            </el-input>
            <i class="category-icon" @click="openFun"></i>
          </div> -->
          <div class="logistics-nav">
            <div class="nav-item">
              <img src="@/assets/img/home/y_1.png" width="50" v-show="isLoad">
              <p>超60万商品</p>
            </div>
            <div class="nav-item">
              <img src="@/assets/img/home/y_2.png" width="50" v-show="isLoad">
              <p>只能秒配单</p>
            </div>
            <div class="nav-item">
              <img src="@/assets/img/home/y_3.png" width="50" v-show="isLoad">
              <p>人工及时支持</p>
            </div>
            <div class="nav-item">
              <img src="@/assets/img/home/y_4.png" width="50" v-show="isLoad">
              <p>24小时发货</p>
            </div>
          </div>
        </div>
      </div>
      <div class="news-wrap mg12 home-break">
        <h3 class="index-title">商城资讯</h3>
        <div class="news-con">
          <ul>
            <li v-for="i in newsArr" :key="i.id">
              <NuxtLink :to="{path:'/news/detail',query:{id:i.id}}">
                <div class="img-wrap">
                  <NuxtImg class="new-img" :src="i.img" :loading="isClient ? 'lazy' : 'eager'" :placeholder="isClient ? '/img/loading.png' : undefined"></NuxtImg>
                </div>
                <div class="info">
                  <h3>{{i.title}}</h3>
                  <p>{{i.description}}</p>
                </div>
              </NuxtLink>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="product-wrap pb1">
        <div class="home-title">
          <h3>为你选择</h3>
          <NuxtLink :to="{path:'/category',query:{pageNum:1,pageSize:20}}">查看更多</NuxtLink>
        </div>
        <HomeProduct></HomeProduct>
      </div> -->
    </div>
    <h-footer></h-footer>
    <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="//player.bilibili.com/player.html?aid=513981169&bvid=BV1kg41117AZ&cid=786648570&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
      </div>
      <i class="close" @click="open.video=false"></i>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.home-boxs-bg {
  background-color: #f7f7f7;
  padding-bottom: 64px;
}
.home-boxs {
  background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0) 100px);
}
.home-boxs-bg {
  :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;
    }
  }
}

.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;
    }
  }
}
.banner-wrap {
  padding: 6px 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;
    }
  }
}
.index-title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
}
.logistics-wrap {
  .search-input-wrap {
    padding: 0 30px;
  }
  .logistics-nav {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
      min-width: 25%;
      margin-top: 18px;
      font-size: 12px;
      img {
        margin-bottom: 8px;
      }
    }
  }
}
.bom-wrap {
  .bom-con {
    border: 1px solid $mainColor;
    border-radius: 5px;
    padding: 12px;
    text-align: center;
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      a {
        width: 120px;
        height: 30px;
        color: #fff;
        background: $mainColor;
        border-radius: 5px;
        line-height: 30px;
      }
    }
    .down {
      font-size: 12px;
      text-decoration: underline;
      margin-top: 5px;
      display: block;
    }
  }
}
.tab-nav-wrap {
  background: #fff;
  margin-top: 0;
  border-radius: 5px;
  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: 30px;
      height: 30px;
    }
    p {
      height: 20px;
      font-size: 12px;
      color: #333333;
      line-height: 20px;
      text-align: center;
    }
  }
}

.home-break {
  background: #fff;
  border-radius: 5px;
  padding: 20px 12px 20px;
}
.news-wrap {
  .news-con {
    li {
      border-bottom: 1px solid #e8e8e8;
      padding: 10px 0;
      a {
        display: flex;
        justify-content: space-between;
      }
      .info {
        flex: 1;
        max-width: calc(100% - 130px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      h3 {
        font-size: 14px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        font-size: 12px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
    .img-wrap {
      min-width: 120px;
      margin-right: 10px;
      img {
        width: 120px;
        height: 68px;
      }
    }
  }
}

.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;
  }
}
</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>
