<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,
  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 dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import duration from "dayjs/plugin/duration";
import pubsub from "pubsub-js";

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

onMounted(() => {
  window.addEventListener("resize", onResize);
  // console.log(wpTable.value.clientHeight);
  listHeight.value = wpTable.value.clientHeight;
});
const onResize = () => {
  if (wpTable.value) {
    listHeight.value = wpTable.value.clientHeight - 40;
    // console.log(wpTable.value.clientHeight)
  }
};

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

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

const createColumns = ({ play, singerInfo }) => {
  return [
    {
      title: "",
      key: "index",
      align: "right",
      width: 20,
      render(row) {
        if (row.id === store.state.settings.songId) {
          const icon = h(store.state.settings.playing ? Play : Pause);
          return h(
            NButton,
            {
              text: true,
              type: "primary",
              circle: true,
              size: "tiny",
            },
            {
              default: () =>
                h(
                  NIcon,
                  {
                    style: {
                      bottom: "-2px",
                      left: "-2px",
                      position: "absolute",
                    },
                  },
                  // [h(store.state.settings.playing ? Play : Pause,{},[])]
                  { default: () => icon }
                ),
            }
          );
        } else return "";
      },
    },
    {
      title: "音乐标题",
      key: "name",
      align: "left",
      ellipsis: true,
      render(row) {
        return h(
          NButton,
          {
            style: {
              marginRight: "6px",
            },
            text: true,
            size: "small",
            onClick: () => play(row.id),
          },
          {
            default: () => row.name,
          }
        );
      },
    },
    {
      title: "歌手",
      key: "artists",
      ellipsis: true,
      width: 120,
      render(row) {
        const ars = row.artists.map((ar, idx) => {
          let r = h(
            NButton,
            {
              style: {
                marginRight: "6px",
              },
              text: true,
              size: "small",
              onClick: () => singerInfo(ar.id),
            },
            {
              default: () => ar.name,
            }
          );
          return h("span", [idx == 0 ? "" : "/  ", r]);
        });
        // console.log(ars);
        return ars;
      },
    },
    {
      title: "专辑",
      key: "album.name",
      width: 100,
      ellipsis: true,
    },
    {
      title: "时长",
      key: "duration",
      width: 60,
      render(row) {
        return h("span", [
          dayjs.duration(row.duration).format("mm:ss"),
        ]);
      },
    },
    // {
    //   title: "播放时间",
    //   key: "date",
    //   width: 100,
    //   render(row) {
    //     return h("span", [
    //       dayjs(row.date).format("YYYY-MM-DD"),
    //     ]);
    //   },
    // },
  ];
};

const columns = createColumns({
  play(id) {
    pubsub.publish("zp.play", { id, im: true });
  },
  singerInfo(id) {
    // console.log("歌手页面");
    router.push("/singer/" + id);
  },
});

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

<template>
  <n-layout>
    <n-layout-header
      style="padding: 10px 12px 0px 12px; font-size: 24px"
      >当前播放
    </n-layout-header>
    <n-layout has-sider>
      <n-layout-content style="padding: 6px 12px; font-size: 12px">
        共{{ playingList.length }}首
      </n-layout-content>
      <n-layout-sider width="100" style="padding: 0 12px 6px 12px">
        <n-button size="tiny">清除列表</n-button>
      </n-layout-sider>
    </n-layout>
  </n-layout>
  <div class="wp-table" ref="wpTable">
    <n-data-table
      :bordered="false"
      :single-line="true"
      :columns="columns"
      :data="playingList"
      size="small"
      :max-height="listHeight"
    />
  </div>
</template>

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

<style lang="less" scoped>
.wp-table {
  position: absolute;
  bottom: 0px;
  top: 76px;
  overflow: hidden;
}

thead {
  display: none;
}

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