<script setup>
import {
  ref,
  onUnmounted,
  reactive,
  toRef,
  toRefs,
  toRaw,
} from "vue";
import { useStore } from "vuex";
import { NAvatar, NIcon } from "naive-ui";
import pubsub from "pubsub-js";
import { getSongDetial, getLyric } from "@/network/song";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import duration from "dayjs/plugin/duration";
import ArtistsSpan from "@/components/ArtistsSpan.vue";
import svgArrowMin from "@/assets/svgs/ArrowMinimize24Regular.svg";
import svgArrowMax from "@/assets/svgs/ArrowMaximize24Regular.svg";

const store = useStore();
const showInfo = ref(true);
const info = reactive({
  name: "",
  artists: [],
  album: {},
  alias: [],
  duration: 0,
  mv: 0,
});

//#region 取得歌曲信息、歌词
const songInfo = (id, im) => {
  getSongDetial(id)
    .then((res) => {
      showInfo.value = true;
      console.log("SongInfo: 获取歌曲详细信息", res.data.songs[0]);
      info.name = res.data.songs[0].name;
      info.artists = res.data.songs[0].ar;
      info.album = res.data.songs[0].al;
      info.alias = res.data.songs[0].alia;
      info.duration = res.data.songs[0].dt;
      info.mv = res.data.songs[0].mv;
      currTime.value = "00:00";
      totalTime.value = zpTime(info.duration);
      if (im) {
        const p = {
          ...{
            id,
            date: Date.now(),
          },
          ...toRaw(info),
        };
        store.commit("savePlayed", p);
        store.commit("addToPlayingList", p);
        console.log("savePlayed");
      }
      pubsub.publish("zp.songInfo", {
        ...{
          id,
          date: Date.now(),
        },
        ...toRaw(info),
      });
    })
    .catch((err) => {});
};
const songLyric = (id) => {
  getLyric(id)
    .then((res) => {
      if (res.data.code == 200)
        pubsub.publish("zp.lyric", res.data.lrc.lyric);
      else pubsub.publish("zp.lyric", null);
    })
    .catch((err) => {});
};
//#endregion

//#region 处理消息订阅
let totalTime = ref("03:13");
let currTime = ref("00:03");

dayjs.extend(duration);
function zpTime(time) {
  return dayjs.duration(time).format("mm:ss");
}
// totalTime.value = zpTime(12345)
const psToken = pubsub.subscribe("zp", (msg, data) => {
  switch (msg) {
    case "zp.getSongInfo":
      songInfo(data.id, data.im);
      songLyric(data.id);
      break;
    case "zp.hideSongInfo":
      showInfo.value = false;
      break;
    case "zp.progress":
      totalTime.value = zpTime(data.total * 1000);
      currTime.value = zpTime(data.progress * 1000);
      break;
  }
});
//卸载组件
onUnmounted(() => {
  pubsub.unsubscribe(psToken);
});
//#endregion

const toggleSongDetail = () => {
  // console.log(
  //   "显示/隐藏歌曲详细界面，包括歌词、模拟唱机以及其他操作。"
  // );
  pubsub.publish("zp.toggleSongDetail");
};
</script>

<template>
  <div id="songInfo">
    <div class="wp-img" v-show="showInfo" @click="toggleSongDetail">
      <img :src="info.album.picUrl" width="42" class="img" />
      <span class="wp-icon">
        <NIcon v-if="store.state.showSongDetail"
          ><svgArrowMin
        /></NIcon>
        <NIcon v-else><svgArrowMax /></NIcon>
      </span>
    </div>

    <div class="song" v-show="showInfo">
      <div class="w-song" @click="toggleSongDetail">
        <div class="song-name" >
          {{ info.name }}
        </div>
        <div class="song-author">
          <!-- <ArtistsSpan :artists="info.artists" /> -->
          <template v-for="(ar, idx) of info.artists" key="idx">
            <span
              style="margin-right: 4px; cursor: pointer"
              >{{ ar.name }}</span
            >
          </template>
        </div>
      </div>

      <div class="song-time" @click="toggleSongDetail">
        <span class="played-time">{{ currTime }}</span
        >/<span class="total-time">{{ totalTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
#songInfo {
  flex: 3;
  display: flex;
  align-items: center;
  margin-left: 12px;

  .wp-img {
    --radius: 4px;

    position: relative;
    border: 1px #eee solid;
    border-radius: var(--radius);
    cursor: pointer;

    &:hover {
      .wp-icon {
        display: flex;
      }
    }

    .img {
      border-radius: var(--radius);
      width: 42px;
      height: 42px;
      max-width: 42px;
      max-height: 42px;
    }

    .wp-icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 42px;
      height: 42px;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: var(--radius);
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);

      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 33px;

      display: none;
    }
  }

  .song {
    padding-left: 6px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    .w-song {
      display: flex;
      align-items: center;
      .song-name {
        // flex: 1;
        .text-el-line();
      }
      .song-author {
        // flex: 1;
        margin-left: 4px;
        color: #aaa;
        font-size: 13px;
        .text-el-line();
      }
    }
    .song-time {
      color: #aaa;
      font-size: 13px;
      font-family: Courier, monospace;
    }
  }
}
</style>
