<template>
  <div class="m-auto project-case wow animated fadeInUp" :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, index2) in bannerList" class="hover-scale cursor-pointer" :key="item.position"
        v-if="selectIndex === 2">
        <div>
          <div class="case-img overflow-hidden position-relative"
            @click="goPage(`/projectcase/${item.position}`, 'projectCases')">
            <img :src="item.detail" :alt="item.name" class="width-100 d-block position-relative imgcase1"
              loading="lazy" />
            <div class="position-absolute color-fff project-center-title">
              <span class="font-700 font-size-20">{{ item.name }}</span>
              <span class="font-700 font-size-20">{{ item.address }}</span>
            </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.position}`, 'productCenter')">
            <img :src="item.detail" :alt="item.name" class="width-100 d-block position-relative imgcase"
              loading="lazy" />
            <span class="position-absolute color-fff project-center-title1 font-size-22 font-700">{{ item.name }}</span>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <p v-if="selectIndex == 2" class="btn" @click="goPage('/projectcase', 'projectCases')">EXLORE ALL PROJECTS</p>
    <p v-if="selectIndex == 3" class="btn" @click="goPage('/productcenter', 'productCenter')">EXLORE ALL PRODUCT</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/ProjectCase/01/1.jpg", import.meta.url).href, name: 'Fairmont Empress Hotel', address: 'Victoria, Canada', position: 0 },
  { detail: new URL("../assets/img/ProjectCase/02/1.jpg", import.meta.url).href, name: 'Monsaraz Hilton', address: 'San Diego，USA', position: 1 },
  { detail: new URL("../assets/img/ProjectCase/03/1.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel', address: 'San Fransisco，USA', position: 2 },
  { detail: new URL("../assets/img/ProjectCase/04/1.jpg", import.meta.url).href, name: 'Lofts on Laurel', address: 'San Diego，USA', position: 3 },
  { detail: new URL("../assets/img/ProjectCase/05/1.jpg", import.meta.url).href, name: 'State&Oak Street', address: 'Carlsbad，CA，USA', position: 4 },
  { detail: new URL("../assets/img/ProjectCase/06/1.jpg", import.meta.url).href, name: '989 Johson Street', address: 'Victoria, Canada', position: 5 },
  { detail: new URL("../assets/img/ProjectCase/07/1.jpg", import.meta.url).href, name: 'Tarrace Lofts', address: 'Vista, California, USA', position: 6 },
  { detail: new URL("../assets/img/ProjectCase/08/1.jpg", import.meta.url).href, name: 'Ocean 17', address: 'Carlsbad，CA，USA', position: 7 },
])
let bannerList2 = ref<any>([
  { detail: new URL('../assets/img/center06.jpg', import.meta.url).href, name: 'Hotel FFE', position: 0 },
  { detail: new URL("../assets/img/center01.jpg", import.meta.url).href, name: 'Doors', position: 1 },
  { detail: new URL("../assets/img/center02.jpg", import.meta.url).href, name: 'Windows', position: 2 },
  { detail: new URL("../assets/img/center03.jpg", import.meta.url).href, name: 'Railings&stairs', position: 3 },
  { detail: new URL("../assets/img/center04.jpg", import.meta.url).href, name: 'Building Materials', position: 4 },
  { detail: new URL("../assets/img/center05.jpg", import.meta.url).href, name: 'Kitchen Faucets/Sinks/Cabinets', position: 5 },
  { detail: new URL("../assets/img/center07.jpg", import.meta.url).href, name: 'Sanitary Wares', position: 6 },
])
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, name: string) => {
  if (name != '') {
    localStorage.setItem('scrollPosition', name)
  }
  document.documentElement.scrollTop = 0
  router.push({
    path: url
  })
}
</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: 42rem;
      }

      .imgcase1 {
        height: 27rem;
      }
    }

  }

  .hover-scale:hover .case-img img {
    transform: scale(1.2);
  }

  .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: 960px) {
  .project-case .hover-scale .case-img .imgcase1 {
    height: 17rem;
  }

  .project-case .hover-scale .case-img .imgcase {
    height: 30rem;
  }

  .bannerImg {
    margin-top: 50px;

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

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