<template>
  <div class="">
    <v-carousel cycle height="450" hide-delimiter-background show-arrows="hover">
      <v-carousel-item src="/banner/banner1.jpg" cover> </v-carousel-item>
      <v-carousel-item src="/banner/banner2.jpg" cover> </v-carousel-item>
      <v-carousel-item src="/banner/banner3.jpg" cover> </v-carousel-item>
      <v-carousel-item src="/banner/banner4.png" cover> </v-carousel-item>
      <!-- <v-carousel-item src="/banner3.jpeg" cover> </v-carousel-item> -->
    </v-carousel>
  </div>
  <!-- 优势 -->
  <!-- <div class="tw-mb-[64px]">
      <MainTitleList
        :cardNum="3"
        :title="t('优势')"
        :list="strengths"
        desc="Canrd is aimed to be the world's top one-stop service provider in the field of new energy research Dedicated, professional, and quick response/solution"
      />
    </div> -->
  <!-- 能源材料 -->
  <div class="tw-py-[64px]">
    <v-container>
      <MainTitleListOdd
        :title="t('材料试剂')"
        :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-[64px]">
    <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-[64px]">
    <v-container>
      <MainTitleList
        :title="t('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-[64px]">
    <v-container>
      <MainTitleList
        :title="t('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="tw-pt-[64px] tw-pb-[128px]">
    <v-container>
      <MainTitleList
        :title="t('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 { useCategoryStore } from '@/stores/category'
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

const { t } = useI18n()

const store = useCategoryStore()

const lab = computed(
  () =>
    store?.list?.[3] || {
      categoryDisplayName: '',
      list: []
    }
)
const materials = [
  { name: 'Energy materials', imageUrl: '/home/1.jpg', href: '/products' },
  {
    name: 'Experimental consumables',
    imageUrl: '/home/2-Universal-consumables.png',
    href: '/products'
  },
  {
    name: 'Low-dimensional material',
    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: 'low-dimensional materials', imageUrl: '/home/3-powertool.png' },
  { name: 'low-dimensional materials', imageUrl: '/home/4-portableenergystorage.png' }
]
</script>