<script setup>
import {
  ref,
  onUnmounted,
  reactive,
  toRef,
  toRefs,
} from "vue";
import { useStore } from "vuex";
import { NProgress } 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";

const store = useStore();
const progress = ref("");
const wpProgress = ref("");
const setTime = (e) => {
  //设定状态条长度
  rightDot.value = wpProgress.value.clientWidth - e.offsetX + 'px'
  percentage.value = e.offsetX / wpProgress.value.clientWidth * 100
  // console.log(rightDot.value);
  //发布 设置进度条消息
  pubsub.publish("zp.setProgressScale", {
    scale: e.offsetX / wpProgress.value.clientWidth,
  });
};

// const primaryColor = store.state.theme.themeOverrides.common.primaryColor;
const rightDot = ref("px");
//#region 处理消息订阅

let percentage = ref(0.0);
const psToken = pubsub.subscribe("zp", (msg, data) => {
  switch (msg) {
    case "zp.progress":
      percentage.value = (data.progress * 100) / data.total;
      rightDot.value =
        (1 - data.progress / (data.total - 0)) *
          wpProgress.value.clientWidth +
        "px";
      // console.log(rightDot.value);
      break;
  }
});
//卸载组件
onUnmounted(() => {
  pubsub.unsubscribe(psToken);
});
//#endregion
</script>
<template>
  <div id="wpProgress" ref="wpProgress">
    <n-progress
      class="progress"
      type="line"
      :percentage="percentage"
      :show-indicator="false"
      :color="
        store.state.theme.themeOverrides.common.primaryColor
      "
      :height="3"
      :border-radius="0"
      ref="progress"
      @click="setTime"
    />
    <div
      class="dot"
      :style="{
        backgroundColor:
          store.state.theme.themeOverrides.common
            .primaryColor,
        right: rightDot,
      }"
    ></div>
  </div>
</template>

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

<style lang="less" scope>
#wpProgress {
  position: relative;
  // overflow: visible;
  ::-webkit-scrollbar {
    display: none;
  }

  .progress {
    cursor: pointer;
  }

  .dot {
    position: absolute;
    // background-color: red;
    height: 10px;
    width: 10px;
    border-radius: 6px;
    top: -4px;
    // left: -4px;
    display: none;
  }

  &:hover {
    .dot {
      display: block;
    }
  }
}
</style>
