<template>
  <v-rows class="tw-w-full">
    <v-carousel
      hide-delimiter-background
      show-arrows="hover"
      height="auto"
      v-if="!isMobile()"
    >
      <v-carousel-item
        v-for="banner in banners"
        :src="banner"
        cover
        alt="canrud"
        :key="banner"
      >
      </v-carousel-item>
    </v-carousel>
    <v-carousel
      hide-delimiter-background
      show-arrows="hover"
      height="auto"
      v-if="isMobile()"
    >
      <v-carousel-item
        v-for="banner in mobileBanners"
        :src="banner"
        cover
        alt="canrud"
        :key="banner"
      >
      </v-carousel-item>
    </v-carousel>
  </v-rows>
  <HotProducts />
  <!-- <v-tabs
    class="tabs"
    v-model="tabRecom"
    color="white"
    bg-color="#eeeeee"
    style="margin-top: 40px"
    slider-color="blue-lighten-1"
    selected-class="active"
    v-if="recommendImages[0] !== null && !isMobile()"
  >
    <v-tab :value="1">Best Sellers</v-tab>
  </v-tabs>

  <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
    <div class="recommend-left-box">
      <v-img
        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
        alt="往左移"
        class="recommend-img-left"
        @click="toggleRowLeft"
      />
    </div>
    <div class="image-row" id="row1">
      <div
        v-for="(imageObj, index) in recommendImages"
        :key="'row1-' + index"
        class="imageTotal"
      >
        <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
          <img
            :src="imageObj[0]?.url"
            :alt="'Image ' + (index + 1)"
            class="item-imgHot"
          />
          <span class="image-name">
            {{ imageObj[0]?.name }}
          </span>
        </a>
        <div v-else class="image-substitute"></div>
      </div>
    </div>
    <div class="recommend-right-box">
      <v-img
        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
        alt="往右移"
        class="recommend-img-right"
        @click="toggleRowRight"
      />
    </div>
  </div>
  <div style="padding-left: 16px; padding-right: 16px">
    <v-tabs
      class="tabs2"
      ref="tabs2"
      v-model="tabRecom"
      style="margin-top: 25px; margin-bottom: 20px; width: 100%"
      color="white"
      bg-color="#eeeeee"
      slider-color="blue-lighten-1"
      selected-class="active"
      v-if="isMobile()"
    >
      <v-tab :value="1">Best Sellers</v-tab>
    </v-tabs>
    <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
      <v-progress-circular
        color="blue-lighten-2"
        indeterminate
        size="64"
        class="tw-m-auto"
      ></v-progress-circular>
    </div>
    <v-item-group multiple v-if="isMobile()">
      <v-row v-if="!hotLoadingMobile">
        <v-col
          v-for="(item, i) in recommendImagesMobile"
          :key="i"
          cols="6"
          lg="3"
          md="4"
          sm="6"
        >
          <div v-if="item !== null">
            <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
              <v-img
                :src="item[0].url"
                :alt="item[0].name"
                eager
                class="d-block"
              />
              <v-card-text class="tw-text-left font-weight-medium title">
                <h4 class="clamp-text">{{ item[0].name }}</h4>
              </v-card-text>
            </v-card>
          </div>
        </v-col>
      </v-row>
    </v-item-group>
    <v-row v-if="isMobile()">
      <v-col>
        <v-pagination
          :size="isMobile() ? 'small' : 'default'"
          v-if="hotTotalMobile"
          v-model="currentIndexMobile"
          @update:modelValue="toggleRowMobile"
          :length="hotLength"
          rounded="0"
          class="tw-float-right tw-mt-[32px]"
          total-visible="5"
        ></v-pagination></v-col
    ></v-row>
  </div> -->
  <!-- 能源材料 -->
  <div class="tw-py-8 py-sm-16">
    <v-container>
      <MainTitleListOdd
        title="Material Reagents"
        :list="materials"
        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
      />
    </v-container>
  </div>

  <!-- 设备 -->
  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList
        title="Lab Device"
        listType="equipment"
        :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
        desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
        href="/equipment"
      />
    </v-container>
  </div>

  <!-- Customized Battery -->
  <div class="tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList
        :title="'Customized Battery'"
        :list="batteries"
        href="/customize"
        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
      />
    </v-container>
  </div>
  <!-- Testing -->
  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList
        title="Testing"
        :list="tests"
        href="/test"
        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
      />
    </v-container>
  </div>
  <!-- Pack -->
  <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
    <v-container>
      <MainTitleList
        title="Pack"
        href="/pack"
        :list="packs"
        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
      />
    </v-container>
  </div>
</template>

<script setup lang="ts">
import MainTitleList from "../components/MainTitleList.vue";
import MainTitleListOdd from "../components/MainTitleListOdd.vue";
import HotProducts from "../components/HotProducts.vue";
import { useCategoryStore } from "../stores/category";
import { computed, onMounted, reactive, ref } from "vue";
import { isMobile } from "../utils";

const maxPage = ref(1);
const maxPageMobile = ref(1);
const tabRecom = ref();
const recommendList = ref({});
const recommendImages = ref({});
const currentIndex = ref(1);
const hotLoading = ref(false);
const hotTotal = ref(10);
const isOrNotMobile = isMobile();
const recommendListMobile = ref({});
const recommendImagesMobile = ref({});
const currentIndexMobile = ref(1);
const hotLoadingMobile = ref(false);
const hotTotalMobile = ref(10);
// const loadHotProducts = async () => {
//   hotLoading.value = true;
//   const pageSize = 5;
//   let { data: hotProducts } = await useAsyncData(
//     "hotProducts",
//     () =>
//       $fetch("/shop/product/hotProducts", {
//         method: "GET",
//         params: {
//           pageNo: currentIndex.value,
//           pageSize: pageSize,
//         },
//       }),
//     {
//       server: true, // 仅在服务器端获取数据
//     }
//   );
//   hotTotal.value = hotProducts.value.data.total;
//   recommendList.value = hotProducts.value.data.records;
//   maxPage.value = hotProducts.value.data.pages;
//   // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
//   recommendImages.value = Array.from({ length: 5 }).map((_, index) => {
//     const item = recommendList.value[index];
//     if (!item) {
//       return null;
//     }
//     // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
//     if (typeof item.productimageliststore === "string") {
//       try {
//         item.productimageliststore = JSON.parse(item.productimageliststore);
//       } catch (error) {
//         item.productimageliststore = []; // 解析失败时，设置为空数组
//       }
//     }
//     const ree = (item.productimageliststore = item?.productimageliststore.map(
//       (productItem: ProductImage) => ({
//         ...productItem,
//         // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
//         url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
//         name: item.name,
//         productUrl: `https://www.canrud.com/products/detail/${item.id}`,
//       })
//     ));
//     return ree;
//   });
//   hotLoading.value = false;
// };

// const toggleRowLeft = () => {
//   if (currentIndex.value !== 1) {
//     currentIndex.value--;
//   } else if (currentIndex.value == 1) {
//     currentIndex.value = maxPage.value;
//   }
//   startTimer();
// };
// let intervalId: any;
// const toggleRowRight = () => {
//   if (currentIndex.value < maxPage.value) {
//     currentIndex.value++;
//   } else if (currentIndex.value == maxPage.value) {
//     currentIndex.value = 1;
//   }
//   startTimer();
// };
// const startTimer = () => {
//   // 清除已有计时器，防止重复
//   clearInterval(intervalId);
//   intervalId = setInterval(() => {
//     toggleRowRight();
//   }, 5000); // 每6秒调用一次
// };

// onMounted(() => {
//   startTimer();
// });

// const toggleRowMobile = (value: number) => {
//   currentIndexMobile.value = value;
// };

// watch(currentIndex, (newIndex) => {
//   loadHotProducts(); // Call loadHotProducts when currentIndex changes
// });
// // Initial load of hot products
// await loadHotProducts(); // Load hot products the first time

// const loadHotProductsMobile = async () => {
//   hotLoadingMobile.value = true;
//   let { data: hotProductsMobile } = await useAsyncData(
//     "hotProducts",
//     () =>
//       $fetch("/shop/product/hotProducts", {
//         method: "GET",
//         params: {
//           pageNo: currentIndexMobile.value,
//           pageSize: 4,
//         },
//       }),
//     {
//       server: true, // 仅在服务器端获取数据
//     }
//   );
//   hotTotalMobile.value = hotProductsMobile.value.data.total;
//   recommendListMobile.value = hotProductsMobile.value.data.records;
//   maxPageMobile.value = hotProductsMobile.value.data.pages;
//   // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
//   recommendImagesMobile.value = Array.from({ length: 4 }).map((_, index) => {
//     const item = recommendListMobile.value[index];
//     if (!item) {
//       return null;
//     }
//     // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
//     if (typeof item.productimageliststore === "string") {
//       try {
//         item.productimageliststore = JSON.parse(item.productimageliststore);
//       } catch (error) {
//         item.productimageliststore = []; // 解析失败时，设置为空数组
//       }
//     }
//     const ree = (item.productimageliststore = item?.productimageliststore.map(
//       (productItem: ProductImage) => ({
//         ...productItem,
//         // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
//         url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
//         name: item.name,
//         productUrl: `https://www.canrud.com/products/detail/${item.id}`,
//       })
//     ));
//     return ree;
//   });
//   hotLoadingMobile.value = false;
// };
// watch(currentIndexMobile, (newIndex) => {
//   loadHotProductsMobile(); // Call loadHotProducts when currentIndex changes
// });
// // Initial load of hot products
// await loadHotProductsMobile(); // Load hot products the first time

onMounted(() => {
  console.log(
    "%c [ onMounted ]-10",
    "font-size:13px; background:pink; color:#bf2c9f;",
    111
  );
});
useHead({
  title: "canrud",
  meta: [
    {
      name: "title",
      content:
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
    {
      name: "keywords",
      content:
        "科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack",
    },
    {
      name: "description",
      content:
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
  ],
  link: [{ rel: "preload", href: "/banner/banner1.jpg", as: "image" }],
});

// useAsyncData(async ({ app }) => {
//   console.log('%c [ app ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', app)
//   app.head.title = 'canrud'
//   app.head.meta = [
//     {
//       name: 'description',
//       content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at
//     }]
// })
console.log(11);

const store = useCategoryStore();

const lab = computed(
  () =>
    store?.list?.[3] || {
      categoryDisplayName: "",
      list: [],
    }
);

const banners = [
  "/banner/banner1.jpg",
  "/banner/banner2.jpg",
  "/banner/banner3.jpg",
  "/banner/banner5.jpg",
];

const mobileBanners = [
  "/mobile/banner-index1.png",
  "/mobile/banner-index2.png",
  "/mobile/banner-index3.png",
];

const materials = [
  { name: "Energy materials", imageUrl: "/home/1.jpg", href: "/products" },
  {
    name: "Laboratory consumables",
    imageUrl: "/home/2-Universal-consumables.png",
    href: "/products",
  },
  {
    name: "Low-dimensional materials",
    imageUrl: "/home/3-Low-dimensional-materials.png",
    href: "/products",
  },
];

const tests = [
  {
    name: "Electrochemical performance",
    imageUrl: "/home/8_Electrochemical_performance.svg",
    href: "/test",
  },
  {
    name: "Reliability testing",
    imageUrl: "/home/9 Reliability testing.svg",
    href: "/test",
  },
  {
    name: "Material testing",
    imageUrl: "/home/10 Material testing.svg",
    href: "/test",
  },
  { name: "Calibration", imageUrl: "/home/11 Calibration.svg", href: "/test" },
];
const batteries = [
  {
    name: "Material evaluation",
    imageUrl: "/home/4-Material-evaluation.png",
    href: "/customize",
  },
  {
    name: "R&D foundry",
    imageUrl: "/home/5-R&D-foundry.png",
    href: "/customize",
  },
  {
    name: "Chemical system",
    imageUrl: "/home/6-Chemical-system.png",
    href: "/customize",
  },
  {
    name: "Semi product customization",
    imageUrl: "/home/7-Semi-product-customization.png",
    href: "/customize",
  },
];
const packs = [
  { name: "Power bank", imageUrl: "/home/12-power-bank.png", href: "/pack" },
  {
    name: "Energy storage",
    imageUrl: "/home/13-Energy-storage.png",
    href: "/pack",
  },
  { name: "power tool", imageUrl: "/home/3-powertool.png", href: "/pack" },
  {
    name: "portable energy storage",
    imageUrl: "/home/4-portableenergystorage.png",
    href: "/pack",
  },
];
// const hotLength = computed(() =>
//   hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
// );
</script>
<style scoped>
@media screen and (min-width: 1537px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 100px;
    width: 85%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 20px;
    width: 85%;
  }
}
@media screen and (max-width: 1280px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 0px;
    width: 88%;
  }
}

.active {
  background-color: #1086e8;
}

/* #image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  margin: 10px auto 50px;
  width: 80%;
} */

@media screen and (min-width: 1537px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    margin: 10px auto 50px;
    width: 80%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    margin: 10px auto 0px;
    width: 80%;
  }
}
@media screen and (max-width: 1280px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    margin: 10px auto 0px;
    width: 90%;
  }
}
.image-row {
  display: flex;
  height: 305px;
}
@media screen and (min-width: 1537px) {
  .image-row {
    display: flex;
    height: 305px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row {
    display: flex;
    height: 245px;
  }
}
@media screen and (max-width: 1280px) {
  .image-row {
    display: flex;
    height: 220px;
  }
}
@media screen and (min-width: 1537px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 290px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 210px;
  }
}
@media screen and (min-width: 1537px) {
  .image-row img {
    width: 240px;
    height: 240px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row img {
    width: 180px;
    height: 180px;
  }
}

@media screen and (min-width: 1537px) {
  .image-row .image-substitute {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row .image-substitute {
    width: 200px;
    height: 200px;
  }
}

@media screen and (max-width: 1280px) {
  .image-row .image-substitute {
    width: 185px;
    height: 185px;
  }
}
@media screen and (max-width: 1280px) {
  .image-row img {
    width: 160px;
    height: 160px;
    margin-left: 10px;
  }
}
@media screen and (min-width: 1537px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 50px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 10px;
  }
}
@media screen and (max-width: 1280px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 5px;
  }
}
button .recommendButton {
  margin: 0 0px;
  cursor: pointer;
}

.recommend-left-box {
}

.recommend-img-left {
  width: 26px;
  height: 27px;
  margin-right: 30px;
}

.recommend-img-left:hover {
  cursor: pointer;
}
.recommend-right-box {
}

.recommend-img-right {
  width: 26px;
  height: 27px;
  margin-left: 30px;
}

.recommend-img-right:hover {
  cursor: pointer;
}
.image-grid {
  padding: 16px;
}

.v-card {
  transition: all 0.3s ease-in-out;
}
.clamp-text {
  display: -webkit-box; /* 使用弹性盒子 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  -webkit-line-clamp: 3; /* 限制最多显示3行 */
  overflow: hidden; /* 隐藏多余内容 */
  text-overflow: ellipsis; /* 添加省略号 */
  white-space: normal; /* 允许换行 */
  line-height: 1.5em; /* 设置每行的高度 */
  min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
}
</style>