// index.js
window.addEventListener("load", () => {
  console.log("load");
  const script = document.createElement("SCRIPT");
  script.src = "./js/home/home.js";
  script.setAttribute("type", "module");
  document.querySelector("body").appendChild(script);
});

// home.js
const homePageTemplate = `
<div class="w">
    <div class="carousel-wrapper">
        <div class="carousel-container ">
            <!-- 切换箭头 -->
            <!-- 轮播图图片需要动态生成 -->
        </div>
        <!-- 指示器 -->
        <ul class="carousel-indicators d-flex">

        </ul>
    </div>
    <div class="recommend-playlist">
        <h3 class="recommend-playlist-header">推荐歌单<svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-arrow-right"></use>
            </svg>
        </h3>
        <ul class="recommend-playlist-container d-flex justify-content-between align-items-start">
            <!-- 推荐歌单需要动态生成 -->
        </ul>
    </div>
</div>
`;
//首页初始化
document.querySelector("#app").innerHTML = homePageTemplate;

// ajax.js
const BASE_URL = "http://localhost:3000";
export default function Ajax({
  //请求参数配置
  method = "GET", //默认为'get'请求
  url,
  data = {},
}) {
  return new Promise((resolve) => {
    // 通过 Promise 返回异步请求
    const xhr = new XMLHttpRequest();
    xhr.open(method, BASE_URL + url);
    xhr.onload = function () {
      resolve(JSON.parse(xhr.response));
    };
    xhr.onerror = function () {
      // 待最后进行错误处理操作
      if (xhr.status == 0) {
      }
    };
    xhr.send(JSON.stringify(data));
  });
}

/**
 * @description: 获得轮播图信息
 * @param {*}
 * @return {*}
 */
export async function getBannerList() {
  const result = Ajax({
    url: `/homepage/block/page`,
  });
  return result;
}

//home.js
import { getBannerList } from "../service/ajax.js";

const result = await getBannerList();
const carouselData = result.data.blocks[0].extInfo.banners;

//carousel.js
// 切换箭头为静态 HTML 样式，无需根据图片数量动态生成。
const carouselControl = `
<button class="carousel-control carousel-control-left carousel-control-hover">
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-arrow-left"></use>
</svg>
</button>
<button class="carousel-control carousel-control-right carousel-control-hover">
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-arrow-right"></use>
</svg>
</button>
`;
//轮播图配置
const carousel = {
  data: [], //轮播图数据
  currentIndex: 0, //轮播图当前切换的画面
  times: 2000, //轮播图多少时间切换画面
  animationTimes: 0.5, //轮播图动画持续时间，单位s
  autoCycleTimer: new Set(), //如果在切换动画，无法进行切换画面
};

export function carouselRender(data) {
  //初始化轮播图
  let carouselItem = "",
    carouselIndicatorsLi = "";
  const wrapper = document.querySelector(".carousel-wrapper");
  let { width = 0 } = wrapper.getBoundingClientRect(); //得到图片的宽度
  //动态生成轮播图
  data.forEach((item, index) => {
    //指示器激活选中判断
    let isActive = carousel.currentIndex == index ? "active" : "";
    //动态生成轮播图图片，并给每一张图片加上偏移量和动画效果
    carouselItem += `
            <div class="carousel-item ${
              "#" + index
            }" style='transform:translateX(${
      width * (index - 1)
    }px);transition-duration:${carousel.animationTimes}s'>
                <img src="${item.pic}" alt="">
            </div>
            `;
    //动态生成轮播图指示器
    carouselIndicatorsLi += `
                <li data-slide-to="${index}" class="carousel-indicators-li ${isActive}"></li>
            `;
  });
  // 通过模板字符串，按照 home.html 中的 html 结构进行排布
  const carouselContainer = `
        <div class="carousel-container" style="transition:transform ${carousel.animationTimes}s ">
            ${carouselControl}
            <div class="carousel-content">
                ${carouselItem}
            </div>
        </div>
        `;
  const carouselIndicators = `
        <ul class="carousel-indicators d-flex">
            ${carouselIndicatorsLi}
        </ul>
        `;
  // 将得到的字符串通过 innerHTML 插入到轮播图盒子
  wrapper.innerHTML = carouselContainer + carouselIndicators;
}
Ajax({
  url: "/homepage/block/page",
}).then((res) => {
  console.log(res);
  carousel.data = res.data.blocks[0].extInfo.banners;
  //首次渲染轮播图
  carouselRender(carousel.data);
});