<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-if="selectIndex === 2">
        <div>
          <div class="case-img overflow-hidden position-relative" @click="goPage(`/projectcase/${index}`)">
            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase1" loading="lazy"/>
            <div class="position-absolute color-fff project-center-title">
              <h3 class="font-700">{{ item.name }}</h3>
              <h3 class="font-700">{{ item.address }}</h3>
            </div>
          </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" @click="goPage(`/productcenter/${item.name}`)">
            <img :src="item.detail" :alt="item.title" class="width-100 d-block position-relative imgcase" loading="lazy"/>
            <h3 class="position-absolute color-fff project-center-title1">{{ 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>
    <p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase')">EXLORE ALL PROJECTS</p>
    <p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter')">EXLORE ALL PROJECTS</p>
  </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/cases/01.jpg",import.meta.url).href,title:'轮播', name: 'Fairmont Empress Hotel', address: 'Victoria, Canada'},
  {detail:new URL("../assets/img/cases/02.jpg",import.meta.url).href,title:'轮播', name: 'Monsaraz Hilton', address: 'San Diego，USA'},
  {detail:new URL("../assets/img/cases/03.jpg",import.meta.url).href,title:'轮播', name: 'Canopy By Hilton San Francisco Soma Hotel', address: 'San Fransisco，USA'},
  {detail:new URL("../assets/img/cases/04.jpg",import.meta.url).href,title:'轮播', name: 'Lofts on Laurel', address: 'San Diego，USA'},
  {detail:new URL("../assets/img/cases/05.jpg",import.meta.url).href,title:'轮播', name: 'State&Oak Street', address: 'Carlsbad，CA，USA'},
  {detail:new URL("../assets/img/cases/06.jpg",import.meta.url).href,title:'轮播', name: '989 Johson Street', address: 'Victoria, Canada'},
  {detail:new URL("../assets/img/cases/07.jpg",import.meta.url).href,title:'轮播', name: 'Tarrace Lofts', address: 'Vista, California, USA'},
  {detail:new URL("../assets/img/cases/08.jpg",import.meta.url).href,title:'轮播', name: 'Ocean 17', address: 'Carlsbad，CA，USA'},
])
let bannerList2 = ref<any>([
  {detail:new URL("../assets/img/center01.jpg",import.meta.url).href,title:'轮播', name: 'Door'},
  {detail:new URL("../assets/img/center02.jpg",import.meta.url).href,title:'轮播', name: 'Window'},
  {detail:new URL("../assets/img/center03.jpg",import.meta.url).href,title:'轮播', name: 'Railing'},
  {detail:new URL("../assets/img/center04.jpg",import.meta.url).href,title:'轮播', name: 'Building Material'},
  {detail:new URL("../assets/img/center05.jpg",import.meta.url).href,title:'轮播', name: 'Kitchen Cabinets with Customization'},
  {detail:new URL("../assets/img/center06.jpg",import.meta.url).href,title:'轮播', name: 'Kitchen faucet and sink'},
  {detail:new URL("../assets/img/center07.jpg",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) => {
  document.documentElement.scrollTop = 0
  router.push({
    path: url
  })
}
const changeindex = () => { 
  selectIndex.value = 2
}
</script>

<style scoped lang="less">
.btn{
  cursor: pointer;
  float: left;
  margin-top: 3rem;
  padding: 1rem 2rem;
  border: 1px solid #333;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
}
.btn:hover{
  color: #fa8106;
  border: 1px solid #fa8106;
}
.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 .project-center-title{
    background: #fa8106;
  }
  .hover-scale:hover .project-center-title1{
    background: #fa8106;
  }
  .project-center-title{
    bottom: 0;
    left: 0;
    height: 50px;
    line-height: 50px;
    text-align: left;
    background: rgba(0,0,0,.4);
    width: 100%;
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .project-center-title1{
    bottom: 0;
    left: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: rgba(0,0,0,.4);
    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>