<script setup>
import { ref, onUnmounted, watch, toRaw, nextTick } from "vue";
import { NButton, NIcon } from "naive-ui";
import { useStore } from "vuex";
import svgChevrongDown from "@/assets/svgs/ChevronDown.svg";
import pubsub from "pubsub-js";
import ArtistsSpan from "@/components/ArtistsSpan.vue";
import AlbumSpan from "@/components/AlbumSpan.vue";
import _ from 'lodash';

const store = useStore();

const song = ref(null);
const lyric = ref(null);
const lyArr = ref([]);
const coverAngle = ref(0);
const currTime = ref(0);
const totalTime = ref(0);
const currentLyricLine = ref(false);
const currentLyricIdx = ref(-1);
const lyList = ref('')

//#region 唱机
let interval = 0;
watch(
  () => [store.state.settings.playing, store.state.showSongDetail],
  ([playing, showSongDetail]) => {
    // console.log(playing, showSongDetail);
    if (playing && showSongDetail) {
      clearInterval(interval)
      interval = setInterval(() => {
          coverAngle.value += 0.5;
        }, 40)
    } else {
      clearInterval(interval)
    }
  },
  { immediate: true }
);
//#endregion

//#region 歌词

//处理歌词
const handleLyric = (ly) => {
  lyArr.value = [];
  const lines = ly.split("\n");
  const re = /^\[(\d+):(\d+(.\d+)?)\](.*)$/;
  lines.forEach((line) => {
    // console.log(line);
    // let match =  re.exec(line)
    // console.log(match);
    // console.log(Number(line.replace(re,'$1')))
    if (re.test(line))
      lyArr.value.push({
        time:
          Number(line.replace(re, "$1")) * 60 * 1000 +
          Number(line.replace(re, "$2")) * 1000,
        lyric: line.replace(re, "$4"),
        origin: line,
      });
  });
  // lyList.value.scrollTop = 0;
  // console.log(lyArr.value);
};

watch(
  ()=> [currentLyricIdx.value,store.state.showSongDetail],
  ([val, showSongDetail])=>{
    // console.log('changed lyric');
    if(val>0){
      // let elContent = document.getElementsByClassName('ly-content')[0]
      nextTick(()=>{
        let el = document.getElementsByClassName('ly-key-lines')[val]
        lyList.value.scrollTop = el.offsetTop - 100 - 6 
      })
      
    }
  },
  {
    immediate: true,
  }
)

//#endregion

//#region 处理消息订阅

const token = pubsub.subscribe("zp", (msg, data) => {
  switch (msg) {
    case "zp.songInfo":
      // console.log("SongDetail: 收到歌曲详细信息。", data);
      song.value = data;
      break;
    case "zp.lyric":
      lyric.value = data;
      handleLyric(data);
      break;
    case "zp.progress":
      totalTime.value = data.total * 1000;
      currTime.value = data.progress * 1000;
      currentLyricIdx.value = _.findLastIndex(lyArr.value,(item) => {
        return item.time < currTime.value;
      });
      // console.log(currentLyricIdx.value);
      break;
  }
});
//卸载组件
onUnmounted(() => {
  pubsub.unsubscribe(token);
});
//#endregion
</script>

<template>
  <div id="sdTitle">
    <n-button
      circle
      size="small"
      @click="pubsub.publish('zp.toggleSongDetail')"
    >
      <template #icon>
        <n-icon>
          <svgChevrongDown />
        </n-icon>
      </template>
    </n-button>
  </div>
  <div id="sdContent" v-if="song">
    <div class="detail">
      <!-- 唱机 -->
      <div class="disk">
        <div class="styli">
          <img
            src="@/assets/images/needle.png"
            :class="{ playing: store.state.settings.playing }"
          />
        </div>
        <div class="bg">
          <img class="disk" src="@/assets/images/disk.png" />
          <img
            class="cover"
            :src="song.album.picUrl"
            :style="{ transform: 'rotateZ(' + coverAngle + 'deg)' }"
          />
        </div>
        <div class="pic"></div>
      </div>
      <div class="song">
        <div class="name">{{ song.name }}</div>
        <div class="alias">
          {{ song.alias.length > 0 ? song.alias.join(" ") : "" }}
        </div>
        <div class="others">
          <div class="album">
            专辑：
            <AlbumSpan
              :album="song.album"
              :onLeave="
                () => {
                  pubsub.publish('zp.toggleSongDetail');
                }
              "
            />
          </div>
          <div class="artists">
            歌手：
            <ArtistsSpan
              :artists="song.artists"
              :onLeave="
                () => {
                  pubsub.publish('zp.toggleSongDetail');
                }
              "
            />
          </div>
        </div>
        <div class="ly" v-if="lyric" ref="lyList">
          <div class="ly-content" >
            <div
              class="ly-line"
              v-for="(line, idx) in lyArr"
              key="idx"
              :class="{ current: currentLyricIdx == idx, ['ly-key-lines']: true, }"
            >
              {{ line.lyric }}
            </div>
          </div>
          <div class="ly-right"></div>
        </div>
      </div>
      <div class="comments"></div>
    </div>
  </div>
</template>

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

<style lang="less" scoped>
@import "@/assets/css/common.less";
#sdTitle {
  position: absolute;
  left: 0;
  top: 0;
  right: 220px;
  height: 40px;
  background-color: #f9f9f9;
  padding-left: 50px;

  display: flex;
  align-items: center;
}
#sdContent {
  position: absolute;
  left: 0;
  top: 40px;
  right: 0;
  bottom: 64px;
  background-color: #f6f6f6;
  overflow-y: auto;

  .styli {
    position: relative;
    height: 60px;
    img {
      width: 160px;
      position: absolute;
      left: 135px;
      transform-origin: 13px 13px;
      z-index: 100;
    }
    .playing {
      transform: rotateZ(28deg);
    }
  }
  .detail {
    // margin: 2em;
    display: flex;
    justify-content: center;
    .pointer {
      height: 50px;
    }
    .disk {
      --back-color: #eee;
      --width-num: 340;
      --padding-num: 10;
      --width: calc(var(--width-num) * 1px);
      --height: calc(var(--width-num) * 1px);

      // position: relative;
      // width: 300px;
      .bg {
        position: relative;

        width: var(--width);
        height: var(--height);
        background-color: var(--back-color);
        border-radius: var(--width);
        padding: calc(var(--padding-num) * 1px);
        img.disk {
          width: calc(
            (var(--width-num) - var(--padding-num) * 2) * 1px
          );
        }
        img.cover {
          width: 220px;
          height: 220px;
          border-radius: 200px;
          position: absolute;
          top: 60px;
          left: 62px;
        }
      }
    }
    .song {
      position: relative;
      width: 330px;
      margin-left: 30px;
      font-size: 14px;
      color: #333;

      .name {
        font-size: 24px;
        font-weight: 500;
        margin-top: 10px;
        .text-el-line-normal();
      }
      .others {
        // display: flex;
        font-size: 12px;
        color: #999;
        .album {
          flex: 1;
          .text-el-line-normal();
        }
        .artists {
          flex: 1;
          .text-el-line-normal();
        }
      }

      .ly {
        position: relative;
        margin-top: 15px;
        height: 288px;
        overflow-y: auto;
        scroll-behavior: smooth;

        -webkit-mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0,
          rgba(0, 0, 0, 1) 20px,
          rgba(0, 0, 0, 1) 260px,
          rgba(0, 0, 0, 0) 
        );
        mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0) 0,
          rgba(0, 0, 0, 1) 20px,
          rgba(0, 0, 0, 1) 250px,
          rgba(0, 0, 0, 0) 
        );

        //  background-image : linear-gradient(180deg,hsla(255,0%,100%,0),rgba(255, 255, 255, 0.521));

        .ly-content {
          font-size: 14px;
          color: #999;
          margin-bottom: 100px;
          // display: flex;
          // flex-direction: column;
          // justify-items: center;

          .ly-line {
            min-height: 35px;
            display: flex;
            align-items: center;
          }

          .current {
            font-size: 18px;
            font-weight: 600;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
