<template>
  <!-- 准备一个容器用来存放音乐播放器 -->
  <div id="aplayer"></div>
</template>

<script setup>
// https://aplayer.js.org/#/zh-Hans/
// import Hls from 'hls.js/dist/hls.min.js';
import APlayer from "aplayer"; // 引入音乐插件
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import { onMounted, reactive } from "vue";

// window.Hls = Hls;
const data = reactive({
  audio: [],
  info: {
    fixed: true, // 开启吸底模式
    // mini: false, // 开启迷你模式
    // autoplay: true, // 自动播放(已经没用了)
    // theme: '#000', // 主题色
    loop: "all", // 	音频循环播放, 可选值: 'all', 'one', 'none'
    order: "list", // 音频循环顺序, 可选值: 'list', 'random'
    preload: "metadata", //预加载，可选值: 'none', 'metadata', 'auto'
    volume: 0.5, // 默认音量，可选值: 0-1
    mutex: true, // 互斥，默认为true，即不允许多个音频同时播放，当前播放的音频会暂停其他音频
    lrcType: 3, // 歌词类型，可选值:  1, 2, 3
  },
});
onMounted(async () => {
  // 8834041785
  const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=7567066822")
  // const res = await fetch("https://met.hxyouzi.com/meting-api/?server=tencent&type=playlist&id=8834041785")
  const mlist = await res.json()
  data.audio = []
  mlist.forEach(i => {
    data.audio.push({
      title: i.name,
      author: i.artist,
      url: i.url,
      pic: i.pic,
      lrc: i.lrc,
    });
    // console.log('>>>>>',data.audio);

  });
  
  // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
  const ap = new APlayer({
    container: document.getElementById("aplayer"),
    audio: data.audio, // 音乐信息
    ...data.info, // 其他配置信息
  });
  const d = document.querySelector("#aplayer > div.aplayer-body > div.aplayer-miniswitcher > button");
  let flag = true;
  const app = document.querySelector("#aplayer > div.aplayer-lrc");
  app.style.display = "block";
  app.style.transform = "translateY(50px)";
  d.addEventListener("click", () => {
    if (flag) {
      app.style.transform = "translateY(0)";
      ap.lrc.show();
      flag = false;
    } else {
      app.style.transform = "translateY(50px)";
      ap.lrc.hide();
      ap.list.hide();
      flag = true;
    }
  });
  // d.click();
});
</script>
<style lang="less" scoped>
#aplayer {
  width: 480px; // 定个宽度
  color: var(--n-text-color); // 设置颜色
  background-color: #f5f5f8; // 设置背景色
  :deep(.aplayer-body) {
    color: var(--n-text-color); // 设置颜色
    background-color: #f5f5f8; // 设置背景色
    // bottom: 10px; // 设置底部距离
    .aplayer-icon-lrc {
      display: none;
    }
  }
  :deep(.aplayer-icon):hover svg path {
    fill: @blue; // 设置颜色
  }
  :deep(.aplayer-list) {
    width: 418px !important;
    background-color: #f5f5f8;
    border: none;
  }
  :deep(.aplayer-list-light) {
    background: inherit;
    color: @orange;
  }
  :deep(.aplayer-list) ol {
    max-height: 160px !important;
    // margin-bottom: 12px;
    .aplayer-list-light .aplayer-list-author {
      color: @orange !important;
    }
  }
  :deep(.aplayer-list) ol li {
    border: none;
  }
  :deep(.aplayer-list) ol li:hover {
    background: inherit;
    color: @blue;
    border: none;
    .aplayer-list-author {
      color: @blue !important;
    }
  }
  :deep(.aplayer-info) {
    padding: 0 !important;
    border-top: none;
  }
  :deep(.aplayer-icon) svg {
    color: var(--n-text-color); // 设置颜色
    background-color: var(--v-bgc); // 设置背景色
  }
  :deep(.aplayer-icon):hover svg {
    color: @blue; // 设置颜色
  }
  :deep(.aplayer-miniswitcher) {
    color: var(--n-text-color); // 设置颜色
    background-color: var(--v-bgc); // 设置背景色
  }
  :deep(.aplayer-lrc) {
    // text-align: right !important;
    width: 368px !important;
    transition: all 0.3s ease;
    // left: unset;
    bottom: 12px;
    z-index: 999;
    text-shadow: none !important;
  }
  :deep(.aplayer-lrc-contents) {
    transition: all 0.5s ease !important;
    p {
      font-size: 12px !important;
      color: @purple !important;
      opacity: 0.8;
    }
  }
  :deep(.aplayer-lrc-contents) {
    .aplayer-lrc-current {
      opacity: 1;
      font-size: 13px !important;
      color: @orange !important;
    }
  }
}
@media screen and (max-width: 800px) {
  #aplayer {
    width: 100vw !important;
  }
}
</style>
