<template>
  <!-- 轮播图 -->
  <div class="width-100 bannerImg">
    <swiper :modules="modules" :slides-per-view="1" :loop="true" :space-between="50" navigation
      :pagination="{ clickable: true }" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide v-for="(item, index) in bannerList" :key="index">
        <img :src="item.detail" :alt="item.title" class="width-100 d-block" />
        <span :class="[index == bannerList.length - 1 ? 'img-title' : 'img-title title-img']">{{ item.title }}</span>
      </swiper-slide>
    </swiper>
  </div>
  <!-- About montier -->
  <Title :value="titleOne" id="aboutus"></Title>
  <AboutUs />

  <!-- Service分类 -->
  <Title :value="title" id="service"></Title>
  <servicePage :index="1" />

  <!-- PRODUCT CENTER -->
  <Title :value="titleTwo" id="productCenter"></Title>
  <projectCase :index="3" />

  <!-- PROJECT CASES -->
  <Title :value="titleThree" id="projectCases"></Title>
  <projectCase :index="2" />

  <!-- INFORMATION CENTER -->
  <Title :value="titleFour" id="informationCenter"></Title>
  <servicePage :index="2" />
</template>

<script setup lang="ts">
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

import Title from '../components/Title.vue';
import servicePage from './Service.vue'
import AboutUs from './AboutUs.vue'
import projectCase from './ProjectCase.vue'
import { ref, onMounted } from 'vue'

onMounted(() => {
  const position = localStorage.getItem('scrollPosition')
  if (position) {
    setTimeout(() => {
      document.getElementById(position)?.scrollIntoView()
    }, 50)
    localStorage.removeItem('scrollPosition');
  }
})

let title = ref<any>({
  title: "Service",
  desc: ""
})
let titleOne = ref<any>({
  title: "About MONTIERI",
  desc: ""
})
let titleTwo = ref<any>({
  title: "Product Center",
  desc: ""
})
let titleThree = ref<any>({
  title: "Project Cases",
  desc: ""
})
let titleFour = ref<any>({
  title: "News",
  desc: ""
})

let modules = [Navigation, Pagination, Scrollbar, A11y]
let bannerList = ref<any>([
  { detail: new URL("../assets/img/Banner/Banner1.jpg", import.meta.url).href, title: 'Becoming your best Building materials, Hotel FF&E Supplier is our goal' },
  { detail: new URL("../assets/img/Banner/Banner2.jpg", import.meta.url).href, title: 'Customizable  Product and Best service for best you and your most beautiful Building' },
  { detail: new URL("../assets/img/Banner/Banner3.jpg", import.meta.url).href, title: 'Quality Always Matters' },
])

const onSwiper = () => {

};
const onSlideChange = () => {

};
</script>

<style scoped lang="less">
.d-block {
  width: 100vw;
  height: 49.5vw;
  position: relative;
}

.img-title {
  // position: absolute;
  // bottom: 3%;
  // left: 7%;
  // right: 11%;
  // color: #fff;
  // font-weight: bold;
  // font-size: 54px;

  box-sizing: border-box;
  position: absolute;
  color: #fff;
  bottom: 0;
  left: 0;
  // height: 50px;
  // line-height: 50px;
  // text-align: center;
  // background: rgba(0, 0, 0, .5);
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 70%);
  width: 100%;
  padding: 20px 20px 60px 20px;
  font-size: 55px;
  text-align: center;
}

.title-img {
  font-size: 50px;
}

.bannerImg {
  :deep(.swiper-button-prev:after) {
    color: #fff;
    font-size: 30px;
  }

  :deep(.swiper-button-next:after) {
    color: #fff;
    font-size: 30px;
  }
}

@media (max-width: 800px) {
  .img-title {
    box-sizing: border-box;
    font-size: 16px;
    padding-bottom: 20px;
  }

  .bannerImg {
    margin: 0;
    padding: 0;
    // margin-top: 50px;

    :deep(.swiper-button-prev:after) {
      font-size: 30px;
    }

    :deep(.swiper-button-next:after) {
      font-size: 30px;
    }
  }
}
</style>