<script setup>
import {
  ref,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  NButton,
  NIcon,
  NDropdown,
  NMenu,
} 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";
import AlbumSpan from "@/components/AlbumSpan.vue";

const store = useStore();
const router = useRouter();
dayjs.extend(duration);

const props = defineProps({
  songs: Array, // 歌曲列表
  ctxMenu: Array, //菜单
  showHead: {
    type: Boolean,
    default: true,
  }
});
const emit = defineEmits({
  itemDbclick: null, // 双击每行
  ctxMenuSelect: null, // 点击菜单
})

const ctxMenuOptions = ()=>{
  return (props.ctxMenu ? props.ctxMenu : [])
}
const onCtxMenuSelect = (key, id) => {
  props.ctxMenuSelect?.(key, id)
}

// const s = ref(props.songs)
// console.log(s.value.value);
</script>

<template>
  <div class="wp-list" ref="wpTable" v-if="false">
    <div
      class="tr"
      v-for="(p, idx) in songs"
      :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"
            :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" />
      </div>
      <div class="al">{{ p.album.name }}</div>
      <div class="dt">
        {{ dayjs.duration(p.duration).format("mm:ss") }}
      </div>
    </div>
  </div>
  <table class="tbList">
    <tr class="tr trh" v-show="showHead">
      <td class="icon"></td>
      <td class="name">音乐标题</td>
      <td class="ar">歌手</td>
      <td class="al">专辑</td>
      <td class="dt">时长</td>
      
    </tr>
    <tr
      class="tr"
      v-for="p in songs"
      :key="p.id"
      draggable="false"
      @dblclick="$emit('itemDbclick', p.id)"
    >
      <td 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>
      </td>
      <td class="name">
        <span class="ntext">{{ p.name }}</span>
        <span class="nm">
          <n-dropdown
            v-if="ctxMenuOptions().length > 0"
            placement="right-start"
            @select="$emit('ctxMenuSelect', $event, p.id)"
            trigger="click"
            :show-arrow="true"
            :options="(ctxMenuOptions())"
          >
            <NButton
              class="mn"
              text
              type="primary"
              style="font-size: 18px"
            >
              <NIcon>
                <svg-dots />
              </NIcon>
            </NButton>
          </n-dropdown>
        </span>
      </td>
      <td class="ar"><ArtistsSpan :artists="p.artists" /></td>
      <td class="al"><AlbumSpan :album="p.album" /></td>
      <td class="dt">
        {{ dayjs.duration(p.duration).format("mm:ss") }}
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "Songlist",
};
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.tbList {
  border-spacing: 0;
  border: 1px solid #eee;
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  // table-layout: fixed;
  user-select: none;

  .trh{
    background-color: #f0f0f0;
    font-weight: 600;
    td{
      // background-color: red;
    }
  }
  
  .tr {
    display: flex;
    align-items: center;
    // line-height: 1.8;

    &:nth-child(2n + 1):not(.trh) {
      background-color: #f6f6f6;
    }
    td {
      padding: 6px 6px;
      // display: flex;
      // align-items: center;
    }

    &:hover {
      // background-color: #eee;

      .name .mn {
        display: block;
      }
    }

    .icon {
      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 {
      flex: 2;
      .text-el-line-normal();
    }
    .ar,
    .al,
    .dt {
      font-size: 12px;
    }
    .al,
    .dt {
      color: #999;
    }
    .al {
      flex: 1;
      .text-el-line-normal();
    }
    .dt {
      width: 50px;
    }
  }


}
.wp-list {
  // position: absolute;
  // bottom: 0px;
  // top: 80px;
  // right: 0;
  // left: 160px;
  overflow-y: auto;

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

    > * {
      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();
      display: flex;
      align-items: center;
      .ntext {
        .text-el-line();
      }

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