<script setup>
import {
  ref,
  onUnmounted,
  reactive,
  toRef,
  toRefs,
} from "vue";
import { NAvatar } from "naive-ui";
import pubsub from "pubsub-js";
import { getSongDetial } from "@/network/song";
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import duration from 'dayjs/plugin/duration'
import ArtistsSpan from "@/components/ArtistsSpan.vue";

const showInfo = ref(false);
const info = reactive({
  name: "",
  artists: "",
  albumPicUrl: "",
});

//#region 取得歌曲信息
const songInfo = (id) => {
  getSongDetial(id)
    .then((res) => {
      showInfo.value = true;
      info.name = res.data.songs[0].name;
      info.artists = res.data.songs[0].ar;
      info.albumPicUrl = res.data.songs[0].al.picUrl;
    })
    .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);
      break;
    case "zp.progress":
      totalTime.value = zpTime(data.total * 1000)
      currTime.value = zpTime(data.progress * 1000)
      break;
  }
});
//卸载组件
onUnmounted(() => {
  pubsub.unsubscribe(psToken);
});
//#endregion
</script>

<template>
  <div id="songInfo">
    <NAvatar
      :size="40"
      v-show="showInfo"
      :src="info.albumPicUrl"
    ></NAvatar>
    <div class="song" v-show="showInfo">
      <div class="w-song">
        <div class="song-name">{{ info.name }}</div>
        <div class="song-author">
          <ArtistsSpan :artists="info.artists" />
        </div>
      </div>

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

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

<style lang="less" scoped>
#songInfo {
  flex: 3;
  display: flex;
  align-items: center;
  margin-left: 12px;

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