AlgerMusicPlayer/out/renderer/assets/MusicList-s-QHu-iA.js

import { ad as request, d as defineComponent, r as ref, G as computed, E as watch, O as createBlock, f as withCtx, u as unref, g as useStore, j as openBlock, b as createBaseVNode, e as createVNode, t as toDisplayString, a7 as getImgUrl, n as normalizeClass, s as setAnimationClass, c as createElementBlock, T as createCommentVNode, U as PlayBottom, a4 as renderList, a2 as normalizeStyle, a3 as Fragment, ac as isMobile, a5 as setAnimationDelay, S as Scrollbar, aj as __unplugin_components_0, am as getMusicDetail, _ as _export_sfc } from "./index-DKaFsuse.js";
import { S as SongItem } from "./SongItem-CoswpGn6.js";
import { _ as __unplugin_components_2 } from "./Drawer-BEJ8Ydua.js";
import { _ as __unplugin_components_2$2 } from "./Avatar-rQ2og-6c.js";
import { _ as __unplugin_components_2$1 } from "./Ellipsis-D4R5dIX2.js";
import { N as NImage } from "./Image-DXClIklC.js";
function getListByCat(params) {
  return request.get("/top/playlist", {
    params
  });
}
function getListDetail(id) {
  return request.get("/playlist/detail", { params: { id } });
}
function getAlbum(id) {
  return request.get("/album", { params: { id } });
}
const _hoisted_1 = { class: "music-page" };
const _hoisted_2 = { class: "music-header h-12 flex items-center justify-between" };
const _hoisted_3 = { class: "music-title" };
const _hoisted_4 = { class: "music-content" };
const _hoisted_5 = { class: "music-info" };
const _hoisted_6 = { class: "music-cover" };
const _hoisted_7 = {
  key: 0,
  class: "creator-info"
};
const _hoisted_8 = { class: "creator-name" };
const _hoisted_9 = {
  key: 0,
  class: "music-desc"
};
const _hoisted_10 = { class: "music-list-container" };
const _hoisted_11 = { class: "music-list" };
const _hoisted_12 = { class: "music-list-content" };
const _hoisted_13 = {
  key: 0,
  class: "loading-more"
};
const pageSize = 20;
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MusicList",
  props: {
    show: { type: Boolean },
    name: {},
    songList: {},
    loading: { type: Boolean, default: false },
    listInfo: {},
    cover: { type: Boolean, default: true }
  },
  emits: ["update:show", "update:loading"],
  setup(__props, { emit: __emit }) {
    const store = useStore();
    const props = __props;
    const emit = __emit;
    const page = ref(0);
    const isLoadingMore = ref(false);
    const displayedSongs = ref([]);
    const loadingList = ref(false);
    const total = computed(() => {
      if (props.listInfo?.trackIds) {
        return props.listInfo.trackIds.length;
      }
      return props.songList.length;
    });
    const formatDetail = computed(() => (detail) => {
      const song = {
        artists: detail.ar,
        name: detail.al.name,
        id: detail.al.id
      };
      detail.song = song;
      detail.picUrl = detail.al.picUrl;
      return detail;
    });
    const handlePlay = () => {
      const tracks = props.songList || [];
      store.commit(
        "setPlayList",
        tracks.map((item) => ({
          ...item,
          picUrl: item.al.picUrl,
          song: {
            artists: item.ar
          }
        }))
      );
    };
    const close = () => {
      emit("update:show", false);
    };
    const loadMoreSongs = async () => {
      if (isLoadingMore.value || displayedSongs.value.length >= total.value) return;
      isLoadingMore.value = true;
      try {
        if (props.listInfo?.trackIds) {
          const start = page.value * pageSize;
          const end = Math.min((page.value + 1) * pageSize, total.value);
          const trackIds = props.listInfo.trackIds.slice(start, end).map((item) => item.id);
          if (trackIds.length > 0) {
            const { data } = await getMusicDetail(trackIds);
            displayedSongs.value = [...displayedSongs.value, ...data.songs];
            page.value++;
          }
        } else {
          const start = page.value * pageSize;
          const end = Math.min((page.value + 1) * pageSize, props.songList.length);
          const newSongs = props.songList.slice(start, end);
          displayedSongs.value = [...displayedSongs.value, ...newSongs];
          page.value++;
        }
      } catch (error) {
        console.error("加载歌曲失败:", error);
      } finally {
        isLoadingMore.value = false;
        loadingList.value = false;
      }
    };
    const getItemAnimationDelay = (index) => {
      const currentPageIndex = index % pageSize;
      return setAnimationDelay(currentPageIndex, 20);
    };
    const handleScroll = (e) => {
      const target = e.target;
      if (!target) return;
      const { scrollTop, scrollHeight, clientHeight } = target;
      if (scrollHeight - scrollTop - clientHeight < 100 && !isLoadingMore.value) {
        loadMoreSongs();
      }
    };
    watch(
      () => props.show,
      (newVal) => {
        loadingList.value = newVal;
        if (!props.cover) {
          loadingList.value = false;
        }
      }
    );
    watch(
      () => props.songList,
      (newSongs) => {
        page.value = 0;
        displayedSongs.value = newSongs.slice(0, pageSize);
        if (newSongs.length > pageSize) {
          page.value = 1;
        }
        loadingList.value = false;
      },
      { immediate: true }
    );
    return (_ctx, _cache) => {
      const _component_n_ellipsis = __unplugin_components_2$1;
      const _component_n_image = NImage;
      const _component_n_avatar = __unplugin_components_2$2;
      const _component_n_scrollbar = Scrollbar;
      const _component_n_spin = __unplugin_components_0;
      const _component_n_drawer = __unplugin_components_2;
      return openBlock(), createBlock(_component_n_drawer, {
        show: _ctx.show,
        height: unref(isMobile) ? "100%" : "80%",
        placement: "bottom",
        "block-scroll": "",
        "mask-closable": "",
        style: { backgroundColor: "transparent" },
        to: `#layout-main`,
        onMaskClick: close
      }, {
        default: withCtx(() => [
          createBaseVNode("div", _hoisted_1, [
            createBaseVNode("div", _hoisted_2, [
              createVNode(_component_n_ellipsis, { "line-clamp": 1 }, {
                default: withCtx(() => [
                  createBaseVNode("div", _hoisted_3, toDisplayString(_ctx.name), 1)
                ]),
                _: 1
              }),
              createBaseVNode("div", { class: "music-close" }, [
                createBaseVNode("i", {
                  class: "icon iconfont icon-icon_error",
                  onClick: close
                })
              ])
            ]),
            createBaseVNode("div", _hoisted_4, [
              createBaseVNode("div", _hoisted_5, [
                createBaseVNode("div", _hoisted_6, [
                  createVNode(_component_n_image, {
                    src: unref(getImgUrl)(_ctx.cover ? _ctx.listInfo?.coverImgUrl : unref(displayedSongs)[0]?.picUrl, "500y500"),
                    class: normalizeClass(["cover-img", unref(setAnimationClass)("animate__fadeIn")]),
                    "preview-disabled": "",
                    "object-fit": "cover"
                  }, null, 8, ["src", "class"])
                ]),
                _ctx.listInfo?.creator ? (openBlock(), createElementBlock("div", _hoisted_7, [
                  createVNode(_component_n_avatar, {
                    round: "",
                    size: 24,
                    src: unref(getImgUrl)(_ctx.listInfo.creator.avatarUrl, "50y50")
                  }, null, 8, ["src"]),
                  createBaseVNode("span", _hoisted_8, toDisplayString(_ctx.listInfo.creator.nickname), 1)
                ])) : createCommentVNode("", true),
                createVNode(_component_n_scrollbar, { style: { "max-height": "200" } }, {
                  default: withCtx(() => [
                    _ctx.listInfo?.description ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(_ctx.listInfo.description), 1)) : createCommentVNode("", true),
                    createVNode(PlayBottom)
                  ]),
                  _: 1
                })
              ]),
              createBaseVNode("div", _hoisted_10, [
                createBaseVNode("div", _hoisted_11, [
                  createVNode(_component_n_scrollbar, { onScroll: handleScroll }, {
                    default: withCtx(() => [
                      createVNode(_component_n_spin, {
                        show: unref(loadingList) || _ctx.loading
                      }, {
                        default: withCtx(() => [
                          createBaseVNode("div", _hoisted_12, [
                            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayedSongs), (item, index) => {
                              return openBlock(), createElementBlock("div", {
                                key: item.id,
                                class: normalizeClass(["double-item", unref(setAnimationClass)("animate__bounceInUp")]),
                                style: normalizeStyle(getItemAnimationDelay(index))
                              }, [
                                createVNode(SongItem, {
                                  item: unref(formatDetail)(item),
                                  onPlay: handlePlay
                                }, null, 8, ["item"])
                              ], 6);
                            }), 128)),
                            unref(isLoadingMore) ? (openBlock(), createElementBlock("div", _hoisted_13, "加载更多...")) : createCommentVNode("", true),
                            createVNode(PlayBottom)
                          ])
                        ]),
                        _: 1
                      }, 8, ["show"])
                    ]),
                    _: 1
                  })
                ]),
                createVNode(PlayBottom)
              ])
            ])
          ])
        ]),
        _: 1
      }, 8, ["show", "height"]);
    };
  }
});
const MusicList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b137c3d"]]);
export {
  MusicList as M,
  getListDetail as a,
  getListByCat as b,
  getAlbum as g
};