const { createApp } = Vue;

createApp({
  data() {
    return {
      yearLabel: "",
      awards: [],
      others: [],
      dataUrl: "data/cmList.json",
    };
  },
  computed: {
    awardsBlock1() {
      return this.awards.slice(0, 4);
    },
    awardsBlock2() {
      return this.awards.slice(4);
    },
  },
  async mounted() {
    const res = await fetch(this.dataUrl, { cache: "no-store" });
    if (!res.ok) {
      console.error("JSONの読み込みに失敗:", res.status, this.dataUrl);
      return;
    }
    const json = await res.json();
    this.yearLabel = json.yearLabel || "";
    this.awards = Array.isArray(json.awards) ? json.awards : [];
    this.others = Array.isArray(json.others) ? json.others : [];
  },
  components: {
    "cm-movie": {
      props: ["item", "type"],
      computed: {
        embedUrl() {
          return `https://www.youtube.com/embed/${this.item.videoId}?rel=0&autoplay=1&mute=1`;
        },
        thumbUrl() {
          return `https://i.ytimg.com/vi/${this.item.videoId}/hqdefault.jpg`;
        },
        altText() {
          if (this.type === "award") {
            return `【${this.item.awardLabel}】${this.item.jichitai} ${this.item.title}`;
          }
          return `${this.item.jichitai} ${this.item.title}`;
        },
      },
      template: `
        <li class="movie">
          <div class="ttl">
            <template v-if="type === 'award'">
              <div class="award_badge">
                <img :src="item.badgeImg" :alt="item.awardLabel" />
                <p class="award">{{ item.awardLabel }}</p>
              </div>
            </template>

            <p class="name">
              <span class="cm_jichitai">{{ item.jichitai }}</span>
              <span class="cm_title">{{ item.title }}</span>
            </p>
          </div>

          <div class="thumb area_youtube">
            <a :href="embedUrl" data-lity>
              <img class="youtube_thumb" :alt="altText" :src="thumbUrl" height="320" width="640" />
            </a>
          </div>
        </li>
      `,
    },
  },
}).mount("#cmApp");