<script setup>
import {
  ref,
  reactive,
  h,
  watch,
  toRaw,
  onMounted,
  onUnmounted,
  nextTick,
} from "vue";
import { RouterLink, useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  NButton,
  NButtonGroup,
  NSpace,
  NIcon,
  NDropdown,
  NMenu,
  NLayout,
  NLayoutHeader,
  NLayoutFooter,
  NLayoutContent,
  NLayoutSider,
  NTag,
  NDataTable,
  useMessage,
} from "naive-ui";
import Play from "@/assets/svgs/Play_.svg";
import Pause from "@/assets/svgs/Pause.svg";
import svgDots from "@/assets/svgs/Dots.svg";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import duration from "dayjs/plugin/duration";
import pubsub from "pubsub-js";
import ArtistsSpan from "@/components/ArtistsSpan.vue";

const store = useStore();
const router = useRouter();
dayjs.extend(duration);
const playingList = ref([]);
const wpTable = ref("");
const listHeight = ref(0);

const token = pubsub.subscribe("zp", (msg, data) => {
  switch (msg) {
    case "zp.togglePlaying":
      break;
    case "zp.removeCurrPlayingSong":
      removeCurrPlayingSong(data.id);
      break;
  }
});

//卸载组件
onUnmounted(() => {
  pubsub.unsubscribe(token);
});

watch(
  () => store.state.settings.playingList,
  (val, oldVal) => {
    playingList.value = toRaw(store.state.settings.playingList);
  },
  {
    immediate: true,
    deep: true,
  }
);

let dragIdx = -1;
const dragstart = (idx) => {
  // console.log('start ',idx);
  dragIdx = idx;
};
const dragenter = (e, idx) => {
  // console.log('enter ',idx);
  e.preventDefault();
  if (dragIdx !== idx) {
    let dragItem = toRaw(playingList.value)[dragIdx];
    let item = toRaw(playingList.value)[idx];
    // console.log(playingList,dragItem);
    playingList.value.splice(dragIdx, 1);
    playingList.value.splice(idx, 0, dragItem);
    dragIdx = idx;
    store.commit("saveSettings", {
      playingList: playingList.value,
    });
  }
};
const dragover = (e, idx) => {
  // console.log('over ',idx);
  e.preventDefault();
};
const drop = (e, idx) => {
  // console.log('drop ',idx);
  e.preventDefault();
};

//菜单
const options = [
  {
    label: "播放",
    key: "play",
  },
  // {
  //   label: "下一首播放",
  //   key: "nextToPlay",
  // },
  {
    type: "divider",
    key: "",
  },
  {
    label: "从列表删除",
    key: "remove",
  },
];

// 处理菜单选择
const handleSelect = (key, id) => {
  switch (key) {
    case "play":
      pubsub.publish("zp.play", {
        id,
        im: true,
      });
      break;
    case "nextToPlay":
      break;
    case "remove":
      removeCurrPlayingSong(id)
      break;
  }
};
const removeCurrPlayingSong = (id) => {
  store.commit("removePlayingList", { id });
  if (playingList.value.length > 0) {
    if (store.state.settings.songId == id) pubsub.publish("zp.next");
  } else pubsub.publish("zp.stop");
};
const handleClick = () => {
  // showDropdownRef.value = !showDropdownRef.value;
};

const arLeave = () => {
  pubsub.publish("zp.togglePlaying");
};
</script>

<template>
  <div class="title">当前播放</div>
  <div class="tools">
    <div class="count">共{{ playingList.length }}首</div>
    <div class="btns"><n-button size="tiny">清除列表</n-button></div>
  </div>
  <div class="wp-list" ref="wpTable">
    <div
      class="tr"
      v-for="(p, idx) in playingList"
      :key="idx"
      draggable="true"
      @dragstart="dragstart(idx)"
      @dragenter="dragenter($event, idx)"
      @dragover="dragover($event, idx)"
      @drop="drop($event, idx)"
      @dblclick="pubsub.publish('zp.play', { id: p.id, im: true })"
    >
      <div class="icon">
        <NButton
          v-show="p.id === store.state.settings.songId"
          text
          type="primary"
          size="tiny"
        >
          <NIcon style="bottom: -1px; left: -2px; position: absolute">
            <Play v-if="store.state.settings.playing"></Play>
            <Pause v-else></Pause>
          </NIcon>
        </NButton>
      </div>
      <div class="name">
        <span class="ntext">{{ p.name }}</span>
        <span class="nm">
          <n-dropdown
            placement="right-start"
            @select="handleSelect($event, p.id)"
            trigger="click"
            :options="options"
            :show-arrow="true"
          >
            <NButton
              class="mn"
              text
              type="primary"
              style="font-size: 18px"
            >
              <NIcon>
                <svg-dots />
              </NIcon>
            </NButton>
          </n-dropdown>
        </span>
      </div>
      <div class="ar">
        <ArtistsSpan :artists="p.artists" :onLeave="arLeave" />
      </div>
      <div class="al">{{ p.album.name }}</div>
      <div class="dt">
        {{ dayjs.duration(p.duration).format("mm:ss") }}
      </div>
    </div>
  </div>
</template>

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

<style lang="less" scoped>
@import "@/assets/css/common.less";
.title {
  padding: 10px 12px 0px 12px;
  font-size: 24px;
}
.tools {
  display: flex;
  align-items: center;
  .count {
    flex: 1;
    padding: 6px 24px;
    font-size: 12px;
  }
  .btns {
    margin-right: 10px;
  }
}
.wp-list {
  position: absolute;
  bottom: 0px;
  top: 80px;
  right: 0;
  left: 0;
  overflow-y: auto;

  .tr {
    display: flex;
    font-size: 14px;
    border-top: 1px #eee solid;
    border-bottom: 1px #eee solid;
    margin-bottom: -1px;

    > * {
      padding: 4px 6px;
    }

    &:nth-child(2n + 1) {
      background-color: #f6f6f6;
    }

    &:hover {
      background-color: #eee;

      .name .mn {
        display: block;
      }
    }

    .icon {
      padding-left: 10px;
      width: 20px;
    }
    .name {
      flex: 3;
      .text-el-line-normal();
      display: flex;
      align-items: center;
      .ntext {
        .text-el-line-normal();
      }

      .mn {
        flex: 1;
        display: none;
      }
    }
    .ar {
      // width: 120px;
      flex: 2;
      // color: #999;
      margin-top: 1px;
      font-size: 12px;
      .text-el-line-normal();
    }
    .al {
      // width: 80px;
      flex: 1;
      margin-top: 1px;
      color: #999;
      font-size: 12px;
      .text-el-line-normal();
    }
    .dt {
      margin-top: 1px;
      color: #999;
      font-size: 12px;
    }
  }
}

thead {
  display: none;
}

.n-layout-header,
.n-layout-content,
.n-layout-side {
  // background-color: #eee;
}
</style>
