<!--index.wxml-->
<import src="../../../utils/playpercent.wxml" />
<import src="../../../utils/lrc.wxml" />

<view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">歌单</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">正在播放</view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight-31}}px" bindchange="bindChange">
    <swiper-item>
      <scroll-view scroll-y="true" scroll-x="false" style="height:{{winHeight}}px;">
        <view wx:for="{{playlists}}" wx:key="playlist" class="playlist z-depth-2" bindtap="tracks" id="{{index}}">
          <view>
            <image src="{{item.cover}}" class="cover" mode="aspectFill"/>
          </view>
          <view class="hover">
            <text></text>
          </view>
          <view class="title">
            <text>{{item.title}}</text>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <view id="playingpage" class=" {{playing?'playing':''}}">
        <view class="blurbg" style="background-image: url({{coverImgUrl}})"></view>
        <view class="playing-wrap">
          <view class="contents">
            <view hidden="{{showlrc}}" style="height:200px; width:200px;" id="playing-main">
              <image src="{{coverImgUrl}}" bindtap="loadlrc" id="pmaincover" />
            </view>
            <view class="nowPlayingTitle" hidden="{{showlrc}}">
              <text>{{nowPlayingTitle}}</text>
            </view>
            <view class="nowPlayingArtist" hidden="{{showlrc}}" >
              <text>{{nowPlayingArtist}}</text>
            </view>
          </view>
          <template is="lrc" data="{{lrc:lrc,showlrc:showlrc,lrcindex:lrcindex}}" />
          <view class="actions">
            <view id="playing-actwrap">
              <template is="playingpercent" data="{{playtime:playtime,percent:percent,duration:duration,downloadPercent:downloadPercent}}" />
              <view id="playingaction">
                <view class="pa-saction" bindtap="playshuffle" hidden="{{shuffle!=1}}">
                  <image src="../../../imgs/a_p.png" />
                </view>
                <view class="pa-saction" bindtap="playshuffle" hidden="{{shuffle!=2}}">
                  <image src="../../../imgs/a_y.png" />
                </view>
                <view class="pa-saction" bindtap="playshuffle" hidden="{{shuffle!=3}}">
                  <image src="../../../imgs/aa9.png" />
                </view>
                <view class="pa-maction" data-other="-1" bindtap="playprev">
                  <image src="../../../imgs/ajh.png" />
                </view>
                <view class="pa-baction" hidden="{{!playing}}" bindtap="playingtoggle" data-p="{{playing}}">
                  <image id='pa-playing' src="../../../imgs/ajd.png" />
                </view>
                <view class="pa-baction" hidden="{{playing}}" bindtap="playingtoggle" data-p="{{playing}}">
                  <image id='pa-pause' src="../../../imgs/ajf.png" />
                </view>
                <view class="pa-maction" data-other="1" bindtap="playnext">
                  <image src="../../../imgs/ajb.png" />
                </view>
                <view class="pa-saction" bindtap="musicinfo">
                  <image src="../../../imgs/aab.png" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" style="height:{{winHeight - 110}}px" class="music_list" animation="{{animationData}}">
          <block wx:for="{{tracks}}" wx:key="tracks">
            <view class="item_music" bindtap="itemClick" id="{{index}}">
              <view class="list_music_info">
                <view class="list_ava">
                    <image class="list_avaimg" src="{{item.cover}}" />
                </view>
                <view class="list_music_info">

                  <text class="list_title" wx:if="{{index==curIndex}}" style="color: #da7c0c" >{{item.name}}</text>
                  <text wx:else class="list_title" style="color:#000">{{item.name}}</text>

                  <text class="list_author" wx:if="{{index==curIndex}}" style="color: #da7c0c" >{{item.artist}}</text>
                  <text wx:else class="list_author" style="color:#000">{{item.artist}}</text>
                </view>
              </view>

            </view>
          </block>
        </scroll-view>



        <view>




        </view>



      </view>
    </swiper-item>
</swiper>

/**index.wxss**/
page {
  background-color: #000;
}

.swiper-tab{
	width: 100%;
	text-align: center;
	line-height: 80rpx;}
.swiper-tab-list{
    font-size: 30rpx;
    display: inline-block;
	  width: 33.33%;
	  color: #777777;
}
.on { color: #da7c0c;
	border-bottom: 5rpx solid #da7c0c;}

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
	text-align: center;
}
/*播放列表页*/
.playlist {
    width: 100%;
    height: 230px;
    position: relative;
    text-align: center;
}

.show {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.cover {
    width: 100%;
    position: relative;
}

.hover {
   text-align: center;
    position: absolute;
    width: 100%;
    top:0px;
    height:100%;
    line-height:30px;
    background: black;
    opacity: 0.3;
}

.title {
    text-align: center;
    position: absolute;
    width: 100%;
    top:100px;
    height:30px;
    line-height:30px;
    color: white;
}
/*播放器页*/
#playingpage {
  position: relative;
  width: 100%;
  height: 100%;
}
#playingpage .blurbg{
  position: absolute;
  left: 0;
  bottom:0;
  right: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(.8);
  background-repeat: no-repeat;
}
#playingpage .playing-wrap {
  position: absolute;
  left: 0;
  bottom:0;
  right: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
#playingpage .playing-wrap .contents {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#playingpage .playing-wrap .actions {
  padding: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nowPlayingTitle {
  margin-top: 10px;
  position:relative;
  z-index:2;

}

.nowPlayingArtist {
  margin-top: 20px;
  position:relative;
  z-index:2;
}
#playing-zz{text-align: center;position: absolute;z-index:20;width: 100%;top:0;left: 0;}
#playing-zz image{width: 222rpx;height:366rpx;margin:-60rpx 0 0 60px; transform-origin:60rpx 60rpx; transform: rotate(-20deg);
transition: all linear .5s }



#playing-main{
  animation-delay: .5s;animation: circle 20s linear infinite; animation-play-state: paused;
}
#playingmainbg{
  width:596rpx;
  height: 596rpx;
  position: relative;
  z-index: 1
}
#pmaincover{width: 100%;height: 100%;left:104rpx ;top:104rpx;
border-radius: 50%;overflow: hidden;}

#playing-actwrap{
  position: absolute;
  left: 0;
  bottom:0;
  width: 100%;
  box-sizing:border-box;
  overflow: hidden;
  z-index: 10;
}
#playing-info{display: flex;margin:0 80rpx}
.pi-act{flex: 1;text-align: center;width: 100%;position: relative}
.pi-act image{width:120rpx;height: 120rpx;}


#playingaction{margin: 10rpx 10rpx 30rpx;display: flex}
.pa-baction,.pa-maction,.pa-saction{flex: 1;text-align: center;width: 100%}
.pa-baction image{width:110rpx;height:110rpx; vertical-align: middle }
.pa-maction image{width:80rpx;height:80rpx;vertical-align: middle;margin-top: 15rpx}
.pa-saction image{width:120rpx;height:120rpx; vertical-align: middle;}


.playing #playing-main{animation-play-state: running !important;}
.playing #playing-zz image{transform: rotate(-0deg) }

/*弹出播放列表*/
.music_list{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 4;
}

.item_music{
  background-color: white;
  padding: 0.2rem;
  display: flex;
  justify-content: center;
}

.list_ava{
    float: left;
    height: 2.8rem;
    margin-right: 10px;
}
.list_avaimg{
    margin-left: 0.1rem;
    margin-top: 0.1rem;
    width: 2.8rem;
    height: 2.8rem;
}
.list_music_info{
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
}
.list_title{
  display: block;
  font-size: 14px;
  color: #000;
  margin-top: 5px;
  text-align: left;
}
.list_author{
  margin-top: 5px;
  display: block;
  font-size: 12px;
  color: #666;
  text-align: left;
}
.list_control{
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.4rem;
}

let bsurl = 'https://poche.fm/api/app/playlists?id=1.0.1&v=mina'

var common = require('../../../utils/util.js');

let seek = 0
let defaultdata = {
  winWidth: 0,
  winHeight: 0,
  listHeight: 0,
  // tab切换
  currentTab: 0,
  // 播放列表
  playlists: [],
  tracks: [],
  coverImgUrl: "http://lastshrek.b0.upaiyun.com/icon.jpg",
  nowPlayingTitle:"请选择歌曲",
  nowPlayingArtist: "",
  playing:false,
  playtime: '00:00',
  duration: '00:00',
  percent: 1,
  lrc: [],
  lrcindex: 0,
  showlrc: false,
  disable: false,
  downloadPercent: 0,
  curIndex: 0,
  initial: true,
  shuffle: 1,
  music: {},
  animationData: {},
  pop: false,
  scroll: false,
  currentTab: 0
}
//获取应用实例
let app = getApp()
Page({
  data: defaultdata,
  onLoad: function(options) {
    var that = this
    if (options.currentTab) {
      that.setData({
        currentTab: options.currentTab
      })
    }
    wx.request({
      url: bsurl,
      success: function (res) {
        var playlists = []
        if (res.data.length != 3) {
          var playlist = {
            id:0,
            cover:'https://s.poche.fm/nowlistening/cover.png',
            title:'破车最近在听的歌',
          }
          playlists.push(playlist)
        }
        res.data.forEach(function(playlist) {
          playlists.push(playlist)
        })
        playlists.push(res.data)
        that.setData({
          listHeight: res.data.length * 230,
          playlists: playlists,
          loadingHide:true
        })
      }
    })
    //获取系统信息
    wx.getSystemInfo( {
      success: function( res ) {
        that.setData( {
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        })
      }
    })
    // 获取上次播放数据
    let index = wx.getStorageSync('curIndex')
    let tracks = wx.getStorageSync('tracks')
    if (tracks) {
      let track = tracks[index]
      that.setData( {
        curIndex: index,
        tracks: tracks,
        coverImgUrl:track.cover,
        nowPlayingArtist: track.artist,
        nowPlayingTitle: track.name,
        music: track
      })
    }

    //监听停止,自动下一首
    wx.onBackgroundAudioStop(function(){
      that.playnext();
    })
  },
  bindChange: function(e) {
    var that = this
    that.setData( { currentTab: e.detail.current })
  },
  swichNav: function(e) {
    var that = this;
    if( this.data.currentTab === e.target.dataset.current ) {
      return false;
    } else {
      that.setData( {
        currentTab: e.target.dataset.current
      })
    }
  },
  // 跳转下一页
  tracks: function(event) {
    var index = event.currentTarget.id
    var playlist = this.data.playlists[index]
    var p = playlist.id
    var title = playlist.title
    wx.navigateTo({
        url: '../tracks/index?id=' + p + '&title=' + title
    })
  },
  // 接收点击数据
  changeData: function(tracks, index, tab) {
    var curMusic = tracks[index]
    this.setData({
      curIndex: index,
      tracks: tracks,
      coverImgUrl:curMusic.cover,
      nowPlayingArtist: curMusic.artist,
      nowPlayingTitle: curMusic.name,
      playing: true,
      music: curMusic,
      lrc: [],
      lrcindex: 0,
      currentTab: tab
    })
    app.globalData.curplay.id = curMusic.id
    //存储当前播放
    wx.setStorageSync("curIndex", index)
    wx.setStorageSync("tracks", tracks)
    app.seekmusic(1)
    if (this.data.showlrc) {
      common.loadlrc(this)
    }
  },
  //播放方法
  playingtoggle:function() {
    var that = this
    if (this.data.initial) {
      // this.play(this.data.tracks, this.data.curIndex)
      this.setData({
        initial: false
      })
      this.changeData(this.data.tracks, this.data.curIndex)
      wx.showToast({
        title: '开始播放',
        icon: 'success',
        duration: 2000
      })
      return
    }
    if (this.data.playing) {
      that.setData({
        playing: false
      })
      app.stopmusic(1)
      wx.showToast({
        title: '暂停播放',
        icon: 'success',
        duration: 2000
      })
    } else {
      app.seekmusic(1, function () {
        wx.showToast({
          title: '继续播放',
          icon: 'success',
          duration: 2000
        })
        that.setData({
          playing: true
        })
      }, app.globalData.currentPosition)
    }
  },
  playnext: function (e) {
    if (this.data.initial) {
      this.setData({
        initial: false
      })
    }
    let shuffle = this.data.shuffle
    let count = this.data.tracks.length
    let lastIndex = parseInt(this.data.curIndex)

    if (shuffle == 3) {
      //随机播放
      lastIndex = Math.floor(Math.random() * count)
    } else if (shuffle == 1) {
      if (lastIndex == count - 1) {
        lastIndex = 0
      } else {
        lastIndex = lastIndex + 1
      }
    }
    this.changeData(this.data.tracks, lastIndex)
  },
  playprev: function (e) {
    if (this.data.initial) {
      this.setData({
        initial: false
      })
    }
    let shuffle = this.data.shuffle
    let lastIndex = parseInt(this.data.curIndex)
    let count = this.data.tracks.length
    if (shuffle == 3) {
      //随机播放
      lastIndex = Math.floor(Math.random() * count)
    } else if (shuffle == 1) {
      if (lastIndex == 0) {
        lastIndex = count - 1
      } else {
        lastIndex = lastIndex - 1
      }
    }
    this.changeData(this.data.tracks, lastIndex)
  },
  playshuffle: function() {
    if (this.data.shuffle == 1) {
      this.setData({
        shuffle: 2
      })
      return
    }
    if (this.data.shuffle == 2) {
      this.setData({
        shuffle: 3
      })
      return
    }
    if (this.data.shuffle == 3) {
      this.setData({
        shuffle: 1
      })
    }
  },
  musicinfo: function() {
    let pop = this.data.pop
    var animation = wx.createAnimation({
      duration: 100,
    })
    this.animation = animation
    this.setData({
      animationData:animation.export()
    })
    if (!pop) {
      // 创建动画
      this.animation.translate(0, -this.data.winHeight + 31).step()

    } else {
      this.animation.translate(0, this.data.winHeight - 81).step()
    }
    this.setData({
      animationData: this.animation.export(),
      pop: !pop
    })
  },
  // 点击播放列表
  itemClick: function(event) {
    var p = event.currentTarget.id
    this.changeData(this.data.tracks, p)
    this.musicinfo()
  },
  // 加载歌词
  loadlrc: function(event) {
    if (this.data.showlrc == false) {
      this.setData({
        showlrc: true
      })
      common.loadlrc(this);
    } else {
      this.setData({
        showlrc: false
      })
    }
  },
  onShow: function (options) {
    var that = this
    app.globalData.playtype = 1;
    common.playAlrc(that, app);
    seek = setInterval(function () {
      common.playAlrc(that, app);
    }, 1000)
  },
  onUnload: function () {
    clearInterval(seek)
  },
  onHide: function () {
    clearInterval(seek)
  },
})