// js/slide.js
(() => {
  console.log("slide.js loaded");

  document.addEventListener("DOMContentLoaded", () => {
    console.log("slide.js DOMContentLoaded");

    if (!window.Vue) {
      console.error("Vue が読み込まれていません（slide.js）");
      return;
    }

    const root = document.querySelector("#ShopSlide");
    if (!root) {
      console.warn("#ShopSlide が見つからないので、slide.js は何もしません");
      return;
    }

    const { createApp } = Vue;

    const slideApp = createApp({
      data() {
        return {
          slideShops: [],
        };
      },
      computed: {
        loopedSlideShops() {
          return [...this.slideShops, ...this.slideShops];
        },
      },
      mounted() {
        console.log("slideApp mounted");

        fetch("./data/shoplist.json")
          .then((res) => res.json())
          .then((data) => {
            this.slideShops = data.flatMap((shop) =>
              [shop.images[1]]
                .filter(Boolean)
                .map((img) => ({ src: img, alt: shop.name }))
            );

            console.log("slideShops loaded:", this.slideShops.length);
          })
          .catch((err) => {
            console.error(
              "スライド用ショップデータの読み込みに失敗しました",
              err
            );
          });
      },
    });

    slideApp.mount(root);
  });
})();