<template>
  <div
    class="flex flex-col md:flex-row pb-[15vw] md:pb-[5vw] px-[2vw] pt-[6.5vw]"
  >
    <div
      class="w-full md:w-[25%] flex flex-col ps-[8vw] md:ps-0 border-e-[1px]"
    >
      <div class="flex justify-between">
        <p
          class="mt-[2vw] md:mt-0 md:py-0 py-[3vw] text-[4.544vw] md:text-[1.481vw] text-[#383E43] font-semibold"
        >
          دیگر محصولات
        </p>
        <div class="hidden md:flex h-[50px] me-[0.5vw]">
          <svg
            class="group/edit cursor-pointer h-[2.604vw] w-[2.604vw]"
            @click="prev"
            viewBox="0 0 50 50"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              class="group-hover/edit:stroke-black"
              cx="25"
              cy="25"
              r="24.5"
              transform="rotate(-180 25 25)"
              stroke="#878787"
            />
            <path
              class="group-hover/edit:stroke-black"
              d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199"
              stroke="#878787"
              stroke-width="2"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <svg
            class="group/edit cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
            @click="next"
            viewBox="0 0 50 50"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              class="group-hover/edit:stroke-black"
              cx="25"
              cy="25"
              r="24.5"
              stroke="#878787"
            />
            <g clip-path="url(#clip0_836_14507)">
              <path
                class="group-hover/edit:stroke-black"
                d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801"
                stroke="#878787"
                stroke-width="2"
                stroke-miterlimit="10"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </g>
            <defs>
              <clipPath id="clip0_836_14507">
                <rect
                  width="24"
                  height="24"
                  fill="white"
                  transform="translate(13 13)"
                />
              </clipPath>
            </defs>
          </svg>
        </div>
      </div>

      <div class="mt-[1vw] space-y-[1vw] text-[#878787]">
        <p
          :class="{ 'text-black': itemindex === 9 }"
          @click="changeSlide(9)"
          class="flex items-center hover:text-black cursor-pointer"
        >
          <svg
            class="w-[3.333vw] md:w-[16px] h-[3.333vw] md:h-[16px]"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[3.59vw] md:text-[0.938vw] font-semibold">
            انواع کلوچه های سلامت محور در مدل های <br />
            زنجبیلی ، کلاسیک ، دارچینی ، خرمایی و ...
          </span>
        </p>
        <p
          @click="changeSlide(1)"
          :class="{ 'text-black': itemindex === 1 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            انواع دسر ها شامل تارتها و دسر های کافه ای
          </span>
        </p>
        <p
          @click="changeSlide(2)"
          :class="{ 'text-black': itemindex === 2 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            انواع ترافلهای شکلاتی و خرمایی در طعم های اختصاصی
          </span>
        </p>
        <p
          @click="changeSlide(3)"
          :class="{ 'text-black': itemindex === 3 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            انواع حلواهای بوتیکی سلامت محور اختصاصی
          </span>
        </p>
        <p
          @click="changeSlide(4)"
          :class="{ 'text-black': itemindex === 4 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            سمنوی ساده و بدون شکر و سمنوی مغزیجات
          </span>
        </p>

        <p
          @click="changeSlide(5)"
          :class="{ 'text-black': itemindex === 5 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            انواع بیسکوییت جوانه گندم سلامت محور در ۶ مدل
          </span>
        </p>

        <p
          @click="changeSlide(6)"
          :class="{ 'text-black': itemindex === 6 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            انواع کرم های صبحانه سلامت محور
          </span>
        </p>

        <p
          @click="changeSlide(7)"
          :class="{ 'text-black': itemindex === 7 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            انواع آرد بسته بندی گندم ، جو و جودوسر
          </span>
        </p>

        <p
          @click="changeSlide(-1)"
          :class="{ 'text-black': itemindex === -1 }"
          class="items-center hidden md:flex hover:text-black cursor-pointer"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="8" cy="8" r="7.5" fill="#FAF6F9" stroke="#383E43" />
            <circle cx="8" cy="8" r="2" fill="#383E43" />
          </svg>
          <span class="ps-3 text-[0.938vw] font-semibold">
            انواع پک سوغاتی اداری و سازمانی vip
          </span>
        </p>

        <button
          class="group/edit hidden md:flex text-[0.833vw] hover:border-black border-[1px] px-[1.302vw] py-[0.625vw] rounded-[10px]"
        >
          <span class="group-hover/edit:text-black"> ادامه مطلب </span>
          <svg
            class="group-hover/edit:-translate-x-2 transition duration-300 group-hover/edit:duration-300  ms-3 h-[1.25vw] w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              class="group-hover/edit:stroke-black"
              d="M9.57 5.93018L3.5 12.0002L9.57 18.0702"
              stroke="#383E43"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              class="group-hover/edit:stroke-black"
              d="M20.4999 12H3.66992"
              stroke="#383E43"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </button>
      </div>
    </div>
 
      <Carousel
        @slide-end="handleSlideStart"
        ref="myCarousel"
        class="md:w-[75%] mt-[8vw] md:mt-0 w-full"
        :wrap-around="true"
        :breakpoints="breakpoints"
      >
        <Slide v-for="(slide, index) in 9" :key="index">

          <div
     
          class="carousel-item h-[85.641vw] md:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
    
          >
            <div
            :class="`test-${index}`"
           
              class="mx-[3vw] mediagallery md:mx-[1vw] w-[53.846vw] md:w-[18.073vw] h-[76.41vw] md:h-[25.938vw] border-[1.5px] rounded-[500px]"
            >

            </div>
          </div>
        </Slide>
      </Carousel>

  </div>
</template>

<script>
import { ref } from "vue";
const myCarousel = ref(null);


const list = ref([])



export default defineComponent({
  name: "Breakpoints",
  data: () => ({
    itemindex: 0,
    list: [],
    datas: [
      { htm: '<h1>parag</h1>' ,url: "https://www.google.com/imgres?q=QWSAD%27&imgurl=https%3A%2F%2Fyt3.googleusercontent.com%2Fytc%2FAIdro_lzldHSacRGWtHljOIVE6nwxc8vW74S1HBiy9ls1AU7wBQ%3Ds900-c-k-c0x00ffffff-no-rj&imgrefurl=https%3A%2F%2Fm.youtube.com%2F%40shiitakiaandqwsad3859&docid=dq5X-El72TSwGM&tbnid=J3taltW7PWqUPM&vet=12ahUKEwjHjrS6q7WHAxXJHxAIHQTkC2oQM3oECBkQAA..i&w=900&h=900&hcb=2&ved=2ahUKEwjHjrS6q7WHAxXJHxAIHQTkC2oQM3oECBkQAA" },
      { name: 10, url: "/public/images/products/1.jpg" },
      { name: 10, url: "public/images/products/1.jpg" },
      { name: 10, url: "./../../public/images/products/1.jpg" },
      { name: 10, url: "./../../public/images/products/1.jpg" },
      { name: 10, url: "./../../public/images/products/1.jpg" },
      { name: 10, url: "./../../public/images/products/1.jpg" },
      { name: 10, url: "./../../public/images/products/1.jpg" },
      { name: 10, url: "./../../public/images/products/1.jpg" },
    ],
    breakpoints: {
      // 700px and up
      300: {
        itemsToShow: 1.4,
        snapAlign: "end",
      },
      700: {
        itemsToShow: 3.3,
        snapAlign: "center",
      },
      // 1024 and up
      1024: {
        itemsToShow: 3.3,
        snapAlign: "start",
      },
    },
  }),


  methods: {
    prev: function () {
      this.$refs.myCarousel.prev();
      this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
    },
    next: function () {
      this.$refs.myCarousel.next();
      this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
    },

    handleSlideStart(data) {
      this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
   console.log(data);
    },
    changeSlide(index) {
      this.$refs.myCarousel.slideTo(index);
      this.itemindex = this.$refs.myCarousel.data.currentSlide.value;
    },
  },

  
  
});
</script>

<style>

.carousel__slide--next .carousel-item:nth-child(1) {
  border: 1px solid black;
}
.carousel__slide {
  opacity: 0.8;
}

.carousel__slide--next {
  opacity: 1;
}

</style>