<template>
    <div style="text-align: left">
      <el-tooltip content="点击即刻播放对应歌单歌曲" placement="right">
        <el-tag>歌单</el-tag>
      </el-tooltip>
    </div>
  
    <el-tree node-key="id" :default-expanded-keys="['2']" :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    <DancePNG />
  </template>
  <script lang="ts" setup>
  import DancePNG from "./dancePNG.vue"
  import bus from "./../utils/bus.js";
  interface Tree {
    label: string;
    search?: number | string;
    platform?: string;
    children?: Tree[];
    id: string;
  }
  
  const handleNodeClick = (data: Tree) => {
    if (!data.search) {
      return;
    }
    bus.emit("searchNewValue", {
      search: data.search,
      platform: data.platform,
      type: "playlist",
    });
  };
  
  const data: Tree[] = [
    {
      label: "QQ音乐",
      children: [],
      id: '1'
    },
    {
      label: "网易云音乐",
      id: '2',
      children: [
        {
            label: "小黑子永远不懂",
            search: "8168081914",
            platform: "netease",
            id: '8168081914'
        },
        {
            label: "ikun真爱粉",
            search: "2762963245",
            platform: "netease",
            id: '2762963245'
        },
        {
            label: "ikun应援团",
            search: "7548038923",
            platform: "netease",
            id: '7548038923'
        },
        {
          label: "坤坤严选歌单",
          search: "7313297753",
          platform: "netease",
          id: '7313297753'
        },
        {
          label: "我的歌单",
          search: "6771007429",
          platform: "netease",
          id: '6771007429'
        },
        {
          label: "轻音乐",
          search: "6771327978",
          platform: "netease",
          id: '6771327978'
        },
        {
          label: "地下城与勇士",
          search: "8464562814",
          platform: "netease",
          id: '8464562814'
        },
      ],
    },
    {
      label: "酷狗音乐",
      children: [],
      id: '3'
    },
    {
      label: "虾米音乐",
      children: [],
      id: '4'
    },
    {
      label: "百度音乐",
      children: [],
      id: '5'
    },
  ];
  
  const defaultProps = {
    children: "children",
    label: "label",
  };
</script>