<template>
  <div class="common-layout">
    <el-container>
      <el-header height="120px" style="padding: 0">
        <el-row>
          <el-col :span="24">
            <el-row>
              <el-col :span="2" :offset="10">
                <el-image src="/melody.png" style="width: 90px; height: 90px" />
              </el-col>
              <el-col :span="5" style="text-align: left; margin-top: 28px">
                <el-row>
                  <span style="font-size: 30px; font-weight: bold">Melody</span>
                </el-row>
                <el-row>
                  <span style="font-size: 12px; color: grey; margin-left: 25px"
                    >我的音乐精灵</span
                  >
                </el-row>
              </el-col>
              <el-col :span="7">
                <a
                  href="https://github.com/foamzou/melody"
                  class="github-corner"
                  aria-label="View source on GitHub"
                  ><svg
                    width="80"
                    height="80"
                    viewBox="0 0 250 250"
                    style="
                      fill: #151513;
                      color: #fff;
                      position: absolute;
                      top: 0;
                      border: 0;
                      right: 0;
                    "
                    aria-hidden="true"
                  >
                    <path
                      d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
                    ></path>
                    <path
                      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                      fill="currentColor"
                      style="transform-origin: 130px 106px"
                      class="octo-arm"
                    ></path>
                    <path
                      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                      fill="currentColor"
                      class="octo-body"
                    ></path></svg
                ></a>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row class="nav-container">
          <el-col :span="12" :offset="6">
            <div class="nav-menu">
              <div
                v-for="(item, index) in navItems"
                :key="index"
                class="nav-item"
                :class="{ active: currentPath === item.path }"
                @click="navigate(item.path)"
              >
                <i :class="item.icon"></i>
                <span>{{ item.label }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <router-view
        :playTheSong="playTheSong"
        :playTheSongWithPlayUrl="playTheSongWithPlayUrl"
        :abortTheSong="abortTheSong"
        v-slot="{ Component }"
      >
        <transition>
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
      <el-footer
        v-if="playerSongInfo.playUrl"
        height="70px"
        class="player-footer"
      >
        <div class="player-container">
          <el-row align="middle" class="player-content">
            <!-- 左侧：封面和歌曲信息 -->
            <el-col :span="6" class="song-info">
              <div class="cover-image">
                <el-image
                  :src="playerSongInfo.coverUrl"
                  fit="cover"
                  class="cover"
                />
              </div>
              <div class="song-details">
                <div class="song-name">{{ playerSongInfo.songName }}</div>
                <div class="artist-name">{{ playerSongInfo.artist }}</div>
              </div>
            </el-col>

            <!-- 中间：播放器控件 -->
            <el-col :span="12" class="player-controls">
              <audio
                id="audio"
                autoplay
                :src="playerSongInfo.playUrl"
                controls="controls"
                class="audio-player"
              />
            </el-col>

            <!-- 右侧：操作按钮 -->
            <el-col :span="6" class="operation-buttons">
              <el-tooltip
                :content="
                  wyAccount
                    ? '上传歌曲到云盘'
                    : '上传歌曲到云盘(请先绑定网易云账号)'
                "
                placement="top"
              >
                <el-button
                  circle
                  class="operation-btn"
                  :disabled="!playerSongInfo.pageUrl || !wyAccount"
                  @click="
                    uploadToCloud(
                      playerSongInfo.pageUrl,
                      playerSongInfo.suggestMatchSongId
                    )
                  "
                >
                  <i class="bi bi-cloud-upload"></i>
                </el-button>
              </el-tooltip>

              <el-tooltip content="在源站查看" placement="top">
                <el-button
                  circle
                  class="operation-btn"
                  :disabled="!playerSongInfo.pageUrl"
                  @click="window.open(playerSongInfo.pageUrl, '_blank')"
                >
                  <i class="bi bi-box-arrow-up-right"></i>
                </el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { getPlayUrl, getSongsMeta, createSyncSongFromUrlJob } from "./api";
import { startTaskListener } from "./components/TaskNotification";
import storage from "./utils/storage";
import { getProperPlayUrl } from "./utils/audio";

export default {
  data: () => {
    return {
      playerSongInfo: {
        songName: "",
        artist: "",
        coverUrl: "/melody.png",
        playUrl: "",
        pageUrl: "",
        suggestMatchSongId: "",
      },
      wyAccount: null,
      navItems: [
        { label: "搜索", path: "/", icon: "bi bi-search" },
        { label: "我的歌单", path: "/playlist", icon: "bi bi-music-note-list" },
        { label: "我的音乐账号", path: "/account", icon: "bi bi-person" },
        { label: "设置", path: "/setting", icon: "bi bi-gear" },
      ],
      currentPath: "/",
    };
  },
  mounted() {
    this.wyAccount = storage.get("wyAccount");
  },
  watch: {
    $route(to) {
      this.wyAccount = storage.get("wyAccount");
      this.currentPath = to.path;
    },
  },
  methods: {
    async uploadToCloud(pageUrl, suggestMatchSongId) {
      const ret = await createSyncSongFromUrlJob(pageUrl, suggestMatchSongId);
      console.log(ret);

      if (ret.data && ret.data.jobId) {
        startTaskListener(ret.data.jobId);
      }
    },
    search() {
      this.$router.push("/");
    },
    account() {
      this.$router.push("/account");
    },
    playlist() {
      this.$router.push("/playlist");
    },
    setting() {
      this.$router.push("/setting");
    },
    async playTheSong(metaInfo, pageUrl, suggestMatchSongId) {
      console.log("------------------------");
      console.log(metaInfo);
      console.log(pageUrl);
      let info = metaInfo;
      if (!info) {
        const ret = await getSongsMeta({ url: pageUrl });
        info = ret.data.songMeta;
        console.log(ret);
      }

      const resourceForbidden = info.resourceForbidden;
      const songUrl = info.audios[0].url;
      console.log("play: ", songUrl);
      this.playerSongInfo.playUrl = getProperPlayUrl(
        info.source,
        songUrl,
        pageUrl || info.pageUrl
      );

      this.playerSongInfo.coverUrl = info.coverUrl;
      this.playerSongInfo.songName = info.songName;
      this.playerSongInfo.artist = info.artist;
      this.playerSongInfo.pageUrl = info.pageUrl || pageUrl;
      this.playerSongInfo.suggestMatchSongId = suggestMatchSongId;
    },
    async playTheSongWithPlayUrl(playOption) {
      if (!playOption.playUrl) {
        const playUrlRet = await getPlayUrl(playOption.songId);
        if (playUrlRet.data.playUrl) {
          playOption.playUrl = playUrlRet.data.playUrl;
        }
      }

      this.playerSongInfo.playUrl = getProperPlayUrl(
        playOption.source,
        playOption.playUrl,
        playOption.pageUrl
      );
      this.playerSongInfo.coverUrl = playOption.coverUrl;
      this.playerSongInfo.songName = playOption.songName;
      this.playerSongInfo.artist = playOption.artist;
      this.playerSongInfo.pageUrl = playOption.pageUrl;
      return true;
    },
    abortTheSong() {
      this.playerSongInfo.playUrl = "";
    },
    navigate(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 3px;
}

.nav span {
  font-size: 18px;
}

.el-dialog {
  margin-top: 30px;
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(-25deg);
  }
  40%,
  80% {
    transform: rotate(10deg);
  }
}
@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

<style scoped > .nav-container {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 8px 0;
  margin-top: 10px;
}

.nav-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
}

.nav-item:hover {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

.nav-item.active {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
  font-weight: 500;
}

.nav-item i {
  font-size: 18px;
  margin-right: 6px;
}

.nav-item span {
  font-size: 15px;
}

.player-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to right, #1a1a1a, #2d2d2d);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 0;
}

.player-container {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
}

.player-content {
  height: 70px;
  padding: 0 20px;
}

.song-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cover-image {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.song-details {
  color: #fff;
}

.song-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.artist-name {
  font-size: 12px;
  color: #a8a8a8;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

.audio-player {
  width: 100%;
  max-width: 600px;
  height: 32px;
  border-radius: 16px;
}

.player-footer .operation-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #000000;
  transition: all 0.3s;

  &:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
  }

  &:disabled {
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
  }

  i {
    font-size: 16px;
  }
}
</style>
