<script setup>
import { reactive } from "vue";
import Navbar from "@/components/Navbar.vue";
import Carousels from "@/components/Carousels.vue";
import Map from "@/components/Map.vue";

function handleScroll(event) {
  const container = event.currentTarget;
  console.log('event.deltaY',event.deltaY);
  if (event.deltaY > 0) {
    container.scrollLeft += 150;
  } else {
    container.scrollLeft -= 150;
  }
}

let initialTouchPosition = null;

function handleTouchStart(event) {
  initialTouchPosition = event.touches[0].clientX;
}

function handleTouchMove(event) {
  if (!initialTouchPosition) return;

  const currentTouchPosition = event.touches[0].clientX;
  const diff = currentTouchPosition - initialTouchPosition;

  const container = document.querySelector('.main-container');
  if (diff > 0) {
    container.scrollLeft -= 150;
  } else {
    container.scrollLeft += 150;
  }

  initialTouchPosition = null;
}
</script>

<template>
  <!-- <Navbar /> -->
  <div class="main-container" @wheel="handleScroll" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
    <Navbar />
    <div class="d-flex content">
      <img src="@/assets/img/banner-0615.webp" alt="" />
      <div class="map">
        <Map />
      </div>
    </div>
    <!-- <Carousels :imgList="images" /> -->
    <!-- <Map /> -->
  </div>
</template>

<style lang="scss">
.main-container {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  .content {
    // width: 200%;
    width: 3000px; // 圖片+地圖的寬度
    height: 100%;
    padding-top: 170px;
    white-space: nowrap;
    .map {
      width: 1500px;
    }
  }
}
</style>
