<template>
  <div class="m-auto project-case" :class="mobileShow?'width-90':'width-80'">
    <swiper
        :modules="modules"
        :slides-per-view="slidesPerView"
        :loop="true"
        :space-between="50"
        navigation
        :pagination="{ clickable: true }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
      <swiper-slide  v-for="(item,index) in bannerList" class="hover-scale cursor-pointer" :key="index" v-if="selectIndex === 1">
        <div>
          <div class="case-img overflow-hidden img-after" @click="changeindex">
            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" />
          </div>
          <div>
            <h3 class="color-343434 font-size-18 line-height-2 border-bottom mb-1">North Sydney Landmark Project AURA Apartment</h3>
            <p class="mb-1 align-items-center d-flex"><img src="../assets/img/i20.png" alt="address"><span class="ml-1 font-size-14 color-666">China</span></p>
            <p class="align-items-center d-flex"><img src="../assets/img/i21.png" alt="units"><span class="ml-1 font-size-14 color-666">387 Units</span></p>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide  v-for="(item,index2) in bannerList" class="hover-scale cursor-pointer" :key="index2" v-else-if="selectIndex === 2">
        <div>
          <div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${item.name}`)">
            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" />
            <h3 class="position-absolute color-fff project-center-title">Door</h3>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide  v-for="(item,index3) in bannerList2" class="hover-scale cursor-pointer" :key="index3" v-else-if="selectIndex === 3">
        <div>
          <div class="case-img overflow-hidden position-relative">
            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" />
            <h3 class="position-absolute color-fff project-center-title">{{ item.name }}</h3>
          </div>
        </div>
      </swiper-slide>
      <!-- <div v-if="selectIndex == 2" class="projectall">
        <p class="allproject" @click="goPage('/projectcase/allproject')">EXPLORE ALL PROJECTS >></p>
      </div> -->
    </swiper>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import {A11y, Navigation, Scrollbar} from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue';
import router from "../router";
let modules = [Navigation,Scrollbar, A11y];
let bannerList = ref<any>([
  {detail:new URL("../assets/img/Banner/Banner1.jpg",import.meta.url).href,title:'轮播', name: 'Door'},
  {detail:new URL("../assets/img/Banner/Banner2.jpg",import.meta.url).href,title:'轮播', name: 'Door'},
  {detail:new URL("../assets/img/Banner/Banner3.jpg",import.meta.url).href,title:'轮播', name: 'Door'}
])
let bannerList2 = ref<any>([
  {detail:new URL("../assets/img/center01.png",import.meta.url).href,title:'轮播', name: 'Door'},
  {detail:new URL("../assets/img/center02.png",import.meta.url).href,title:'轮播', name: 'Window'},
  {detail:new URL("../assets/img/center03.png",import.meta.url).href,title:'轮播', name: 'Railing'},
  {detail:new URL("../assets/img/center04.png",import.meta.url).href,title:'轮播', name: 'Building Material'},
  {detail:new URL("../assets/img/center05.png",import.meta.url).href,title:'轮播', name: 'Kitchen Cabinets with Customization'},
  {detail:new URL("../assets/img/center06.png",import.meta.url).href,title:'轮播', name: 'Kitchen faucet and sink'},
  {detail:new URL("../assets/img/center07.png",import.meta.url).href,title:'轮播', name: 'Sanitary Ware'},
])
let screenWidth = ref<any>('')
let mobileShow = ref<any>(false)
let selectIndex = ref<any>(1)
const props = defineProps(['index'])
if(props.index){
  selectIndex.value = props.index
}
let slidesPerView = ref<number>(3)
onMounted(async ()=>{
  screenWidth.value = document.body.offsetWidth;
  if(screenWidth.value<800){
    mobileShow.value = true
    slidesPerView.value = 1
  }else if(screenWidth.value<1000){
    mobileShow.value = true
    slidesPerView.value = 2
  }else{
    mobileShow.value = false
    slidesPerView.value = 3
  }
  window.addEventListener('resize',function(){
    screenWidth.value = document.body.offsetWidth;
    if(screenWidth.value<800){
      mobileShow.value = true
      slidesPerView.value = 1
    }else if(screenWidth.value<1000){
      mobileShow.value = true
      slidesPerView.value = 2
    }else{
      mobileShow.value = false
      slidesPerView.value = 3
    }
  })
})
const onSwiper = () => {

};
const onSlideChange = () => {

};

const goPage = (url: any) => {
  router.push({
    path: url
  })
}
const changeindex = () => { 
  selectIndex.value = 2
}
</script>

<style scoped lang="less">
.projectall{
  width: 100%;
  text-align: center;
}
.allproject{
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 18px;
  margin-top: 20px;
  font-weight: bold;
  padding: 10px;
  border: 1px solid #333;
  color: #333;
}
.project-case {
  .cursor-pointer{
    cursor: pointer;
  }
  :deep(.swiper-button-prev:after){
    color: #fff;
    font-size: 30px;
  }
  :deep(.swiper-button-next:after){
    color: #fff;
    font-size: 30px;
  }
  .img-after{
    border-bottom: solid .4em #fa8106;
  }
  .border-bottom{
    border-bottom: 1px solid #eee;
  }
  .hover-scale{
    .case-img{
      img{
        transition: all 3s;
      }
      .imgcase{
        height: 600px;
      }
      .imgcase1{
        height: 350px;
      }
    }

  }
  .hover-scale:hover .case-img img{
    transform: scale(1.1);
  }
  .hover-scale:hover h3{
    color: #fa8106;
  }
  .project-center-title{
    bottom: 0;
    left: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(0,0,0,.5);
    width: 100%;
  }
}
@media (max-width: 800px) {
  .bannerImg {
    margin-top:50px;
    :deep(.swiper-button-prev:after){
      font-size: 30px;
    }
    :deep(.swiper-button-next:after){
      font-size: 30px;
    }
  }
}
</style>