<template>
  <div class="procurement m-auto align-items-center" :class="mobileShow ? 'width-90' : 'd-flex  width-80'">
    <div class="bg-F4F4F4 pa-2 border-box" :class="mobileShow ? 'width-100' : 'width-100'">
      <div class="content-img">
        <div class="fixed-width position-relative">
          <img :src="Imglist.img[0].details" class="procurement-max-width" :alt="Imglist.img[0].name" loading="lazy">
          <img :src="Imglist.img[1].details" class="position-absolute second-img" :alt="Imglist.img[1].name"
            loading="lazy">
          <!-- <span class="font-size-20 read-more pa-2 text-center position-absolute"
            :class="mobileShow ? 'read-more-mobile' : 'read-more-pc'">Read more</span> -->
        </div>
      </div>
      <div class="titledesign">
        <div class="destitle">
          <div class="zhu"></div>
          <h1><strong>{{ Imglist.title }}</strong></h1>
        </div>
        <p class="ml-3 content" :class="mobileShow ? 'font-size-16' : 'font-size-26'">
          {{ Imglist.content }}
        </p>
      </div>
      <p class="btn position-relative" @click="goPage()">Back</p>
    </div>
  </div>
</template>

<script setup lang="ts">

import { onMounted, ref, reactive, watch } from "vue";
import router from "../router";

let screenWidth = ref<any>('')
let mobileShow = ref<any>(false)
let selectIndex = ref<any>('')
let Imglist = reactive<any>({})
selectIndex.value = router.currentRoute.value.query.index

const goPage = () => {
  document.documentElement.scrollTop = 0
  router.back()
}

onMounted(async () => {
  screenWidth.value = document.body.offsetWidth;
  if (screenWidth.value < 1000) {
    mobileShow.value = true
  } else {
    mobileShow.value = false
  }
  window.addEventListener('resize', function () {
    screenWidth.value = document.body.offsetWidth;
    if (screenWidth.value < 1000) {
      mobileShow.value = true
    } else {
      mobileShow.value = false
    }
  })
})

watch(() => router.currentRoute.value.query.index, (newValue: any) => {
  if (newValue == '0') {
    Imglist = {
      title: 'Design',
      content: 'Solving all problems from design, and work out a practical scheme.They are project planning, archi-tectural design, interior design, product design.These four parts from a closed loop.',
      img: [
        { details: new URL("../assets/img/Design01.jpg", import.meta.url).href, name: 'Design' },
        { details: new URL("../assets/img/Design02.jpg", import.meta.url).href, name: 'Design' },
      ]
    }
  } else if (newValue == '1') {
    Imglist = {
      title: 'After -sale Service',
      content: 'We care about quality and care about longtime performance. After sales service is crucial for our business procedure. We offer online and swift response for after sales services.',
      img: [
        { details: new URL("../assets/img/After-saleService01.jpg", import.meta.url).href, name: 'After -sale Service' },
        { details: new URL("../assets/img/After-saleService02.jpg", import.meta.url).href, name: 'After -sale Service' },
      ]
    }
  } else if (newValue == '2') {
    Imglist = {
      title: 'Manufacture',
      content: 'We are able to mass-customize products efficiently as per the approved specification. We manufacture case-goods, upholstery items and all type of solidwood products, as well as decorative lightings.Flexiblity of custom-made system achieve a lower costsin mass product.',
      img: [
        { details: new URL("../assets/img/Manufacture01.jpg", import.meta.url).href, name: 'Manufacture' },
        { details: new URL("../assets/img/Manufacture02.jpg", import.meta.url).href, name: 'Manufacture' },
      ]
    }
  } else if (newValue == '3') {
    Imglist = {
      title: 'Installation',
      content: 'We have our installation teams for site measurement taken and installation condition analysis. Our installation team is expert on flooring, mill work, cabinets, drapery，wall covering, and carpet.',
      img: [
        { details: new URL("../assets/img/Installation01.jpg", import.meta.url).href, name: 'Installation' },
        { details: new URL("../assets/img/Installation02.jpg", import.meta.url).href, name: 'Installation' },
      ]
    }
  } else if (newValue == '4') {
    Imglist = {
      title: 'Quality',
      content: 'Product quality is the lifeline of an company and the fundamental guarantee of its sustainable development. We have implemented a complex quality system to review all material and standard  operating procedures are audited regularly to ensure the standards are met.  MONTIER can deliver excellent products in line with German quality.',
      img: [
        { details: new URL("../assets/img/Quality01.jpg", import.meta.url).href, name: 'Quality' },
        { details: new URL("../assets/img/Quality02.jpg", import.meta.url).href, name: 'Quality' },
      ]
    }
  } else if (newValue == '5') {
    Imglist = {
      title: 'Logistics',
      content: 'We work with 3rd party forwarder for local and overseas logistic. For different schedule of delivery, we will manage warehousing for FF&E.',
      img: [
        { details: new URL("../assets/img/Logistics01.jpg", import.meta.url).href, name: 'Logistics' },
        { details: new URL("../assets/img/Logistics02.jpg", import.meta.url).href, name: 'Logistics' },
      ]
    }
  }

}, { immediate: true, deep: true })

</script>

<style scoped>
.procurement {
  margin: 2vw auto 2vw;
}

.fixed-width {
  width: 60%;
  height: 30vw;
}

.procurement-max-width {
  width: 100%;
  height: 100%;
}


.second-img {
  top: 50%;
  right: -100%;
  transform: translateX(-50%) translateY(-50%);
  background: #fff;
  width: 70%;
  height: 20vw;
}

.second-img1 {
  top: 50%;
  transform: translateY(-50%);
}

.second-img3 {
  width: 40%;
  height: 20vw;
  margin-left: 8rem;
  margin-top: 5rem;
}

.read-more {
  background: rgba(255, 192, 0);
  color: #fff;
  width: 60px;
  display: inline-block;
  top: 85%;
  left: 95%;
  transform: translateX(-50%) translateY(-50%);
  cursor: pointer;
  box-shadow: 0 4px 10px #333;
}


.read-more-pc {
  right: -22%;
}

.read-more-mobile1 {
  right: -10%;
  top: 100%;
}

.read-more-pc1 {
  top: 100%;
  right: -3%;
}

.read-more-mobile {
  right: -50%;
  font-size: 14px;
  width: 30px;
}

.text-align-justify {
  /* text-align: justify; */
  /* text-indent: 20px; */
}

.titledesign {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;

  .destitle {
    width: 20%;
    margin-bottom: 1rem;

    .zhu {
      width: 2.5rem;
      height: 1rem;
      background-color: rgba(237, 125, 49);
      margin-bottom: 0.5rem;
    }
  }

  .content {
    width: 80%;
    line-height: 2.5rem;
  }
}

.btn {
  cursor: pointer;
  margin-top: 3rem;
  left: 50%;
  font-size: 20px;
  width: 10rem;
  height: 3rem;
  border: 1px solid #333;
  text-align: center;
  line-height: 3rem;
  transform: translateX(-50%);
}

.btn:hover {
  color: rgba(237, 125, 49);
  border: 1px solid rgba(237, 125, 49);
}

@media screen and (max-width: 960px) {
  .procurement {
    margin-top: 15vw;
  }

  .titledesign {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;

    .destitle {
      width: 100%;
      margin-bottom: 1rem;
      text-align: left;
    }

    .content {
      width: 100%;
      line-height: 2rem;
    }
  }
}
</style>