<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="music-player">
    <!-- 返回按钮 -->
    <view class="header">
      <image
        @click="goBack"
        style="width: 60rpx; height: 60rpx"
        src="/src/static/icon/Left.svg"
      ></image>
    </view>

    <view class="player-content">
      <!-- 播放图片 -->
      <view class="record-player">
        <image
          src="/src/static//icon/fi-rr-big-play.svg"
          alt="Record Player"
          class="record-image"
        />
      </view>
      <!-- 播放按钮 -->
      <view class="track-info">
        <!-- 歌名 取消收藏 -->
        <view class="song-header">
          <view class="song-title">{{ song.name }}</view>
          <view class="favorite-btn">
            <image
              @click="cancelHeart"
              style="width: 32rpx; height: 32rpx"
              :src="
                song.favorite
                  ? '/src/static/icon/fi-rr-heart-grey.svg'
                  : '/src/static/icon/fi-rr-heart.svg'
              "
            ></image>
          </view>
        </view>
        <!-- 进度条时间 -->
        <view class="progress-container">
          <view class="progress-bar">
            <view class="progress-current"></view>
          </view>
          <view class="time-info">
            <text class="current-time">00:00</text>
            <text class="total-time">{{ song.duration }}</text>
          </view>
        </view>
        <!-- 上一曲下一曲播放 -->
        <view class="controls">
          <!-- 循环播放 -->
          <view class="control-btn" @click="palyCycleBtn">
            <image
              style="width: 32rpx; height: 32rpx"
              src="/src/static/icon/fi-rr-refresh.svg"
            ></image>
          </view>
          <!-- 上一曲 -->
          <view class="control-btn" @click="previousSongBtn">
            <image
              style="width: 48rpx; height: 32rpx"
              src="/src/static/icon/Group-left.svg"
            ></image>
          </view>
          <!-- 播放 暂停 -->
          <view class="control-paly" @click="togglePlayPause">
            <button class="control-btn pause-btn" v-if="isPlaying">
              <image style="width: 40rpx; height: 40rpx" src="/src/static/icon/Vector.svg"></image>
            </button>
            <button class="control-btn pause-btn" v-else>
              <view class="control-Vector">
                <image
                  style="width: 8rpx; height: 40rpx"
                  src="/src/static/icon/Vector-paly.svg"
                ></image>
              </view>
              <view class="control-Vector">
                <image
                  style="width: 8rpx; height: 40rpx"
                  src="/src/static/icon/Vector-paly.svg"
                ></image>
              </view>
            </button>
          </view>
          <!-- 下一曲 -->
          <view class="control-btn" @click="nextSongBtn">
            <image
              style="width: 48rpx; height: 32rpx"
              src="/src/static/icon/Group-right.svg"
            ></image>
          </view>
          <!--  -->
          <view class="control-btn">
            <image
              style="width: 32rpx; height: 32rpx"
              src="/src/static/icon/fi-rr-shuffle.svg"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const song = ref({})
  const isPlaying = ref(false) // 用来标识播放状态

  //   实现返回逻辑
  const goBack = () => {
    uni.navigateBack()
  }
  // 取消收藏
  const cancelHeart = () => {
    console.log('取消收藏')
  }
  // 循环播放
  const palyCycleBtn = () => {
    console.log('循环播放')
  }
  // 上一曲
  const previousSongBtn = () => {
    console.log('上一曲')
  }
  // 下一曲
  const nextSongBtn = () => {
    console.log('下一曲')
  }
  // 实现播放/暂停切换逻辑
  const togglePlayPause = () => {
    isPlaying.value = !isPlaying.value
    console.log('控制播放')
  }

  onLoad((query) => {
    if (query.songDate) {
      song.value = JSON.parse(decodeURIComponent(query.songDate))
    }
  })
</script>

<style scoped lang="scss">
  .music-player {
    height: 100%;
    margin: 0 auto;
    background-color: #ffffff;
  }

  .header {
    padding: 1rem;
  }

  .player-content {
    height: 100%;
    padding: 1rem;
  }
  // 播放图片
  .record-player {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .record-image {
    width: 620rpx;
    height: 640rpx;
  }

  // 播放
  .track-info {
    padding: 0 0.5rem;
  }
  // 歌名
  .song-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  .song-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: #333;
  }
  // <!-- 进度条时间 -->
  .progress-container {
    margin-bottom: 2rem;
  }

  .progress-bar {
    position: relative;
    width: 100%;
    height: 8rpx;
    margin-bottom: 0.5rem;
    background-color: #eee;
    border-radius: 4rpx;
  }

  .progress-current {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background-color: #ff8c69;
    border-radius: 4rpx;
  }

  .time-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #666;
  }
  //   <!-- 上一曲下一曲播放 -->
  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }

  .control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    padding: 0.5rem;
  }
  .pause-btn {
    width: 132rpx;
    height: 132rpx;
    background: #f88842;
    border-radius: 50%;
  }
  .control-Vector {
    width: 20rpx;
  }
</style>
