<template>
  <div class="m-auto case-details" :class="mobileShow?'width-90':'width-80'">
    <Breadcrumbs></Breadcrumbs>
    <div class="case-dateils">
      <div class="switch-menu d-flex flex-nowrap">
        <div class="s30 width-50 text-center" :class="selectIndex === index?'selected':''" v-for="(item,index) in switchList" @click="selectMethods(index)" :key="index"><span>{{ item }}</span></div>
      </div>
      <div class="case-content">
        <div v-if="selectIndex === 0">
          <img src="../assets/img/projectCase.png" class="width-100 mt-2" alt="Project Case">
        </div>
        <div v-else-if="selectIndex === 1">
          <h3 class="font-size-18 color-343434 mb-1">Quality</h3>
          <p class="line-height-2 font-size-16 color-343434">Striving for perfection is our philosophy.</p>
          <p class="line-height-2 font-size-16 color-343434">Owing to its European quality control standards, automatic HOMAG product lines,integrated design and production software, and best raw materials from world well-known suppliers. OPPEIN can deliver excellent products in line with German quality.
          </p>
          <p class="line-height-2 font-size-16 color-343434">We have implemented a complex quality system to review all material and standard  operating procedures are audited regularly to ensure the standards are met..
          </p>
          <img src="../assets/img/projectCase1.png" class="width-100 mt-2" alt="Project Case">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumbs from "./Breadcrumbs.vue"
import {onMounted, ref} from "vue";
let screenWidth = ref<any>('')
let mobileShow = ref<any>(false)
let selectIndex = ref<number>(1)
let slidesPerView = ref<number>(3)
let switchList = ref<any>(['DETAILS','QUALITY'])
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 selectMethods = (index:number) => {
  selectIndex.value = index
}
</script>

<style scoped lang="less">
.s30{
  font-size: calc(30 * 100vw / 1920);
  span{
    transition: all .5s;
    cursor: pointer;
  }
}
.s30 span:hover{
  color: #fa8106;
  border-bottom: 2px solid #fa8106;
}
.selected{
  span{
    color: #fa8106;
    border-bottom: 2px solid #fa8106;
  }
}
</style>