text: <template>
    <div class="bottom alignCenter scrollStyle" ref="bottom">
      <div class="playControl">
        <i class="iconfont icon-shangyishou prev" @click="prev" v-if="!isPreNext"></i>
        <i class="iconfont icon-icon-test1 prev"  style="font-size:32px;" v-if="isPreNext"></i>
        <i class="iconfont palyClass play" :class="palyClass" @click="playState"></i>
        <i class="iconfont icon-xiayishou next" @click="next" v-if="!isPreNext"></i>
        <i class="iconfont icon-icon-test1 next" style="font-size:32px;" v-if="isPreNext"></i>
      </div>
      
      <div class="timeContainer alignCenter">
          <span class="run">{{currentTime | songTime}}</span>
          <div class="timeschedule alignCenter" @click="toTime" ref="timeContainer">
            <div class="box" 
            ref="box" @mousedown.stop="drap"
            :style="{'left':`${time}px`}"></div>
            <div class="in"></div>
            <div class="out" :style="{'width':`${timeSchedule}%`}"></div>
          </div> 
          <span class="duration" v-if = "currentSong.duration">{{currentSong.duration | time}}</span>
          <span class="duration" v-if = "!currentSong.duration">00:00</span>
      </div>
      <div class="soundContainer alignCenter">
        <i class="iconfont icon-horn-copy sound"></i>
        <div class="soundschedule alignCenter">
          <div class="in"></div>
          <div class="out"></div>
        </div>
      </div>
      <div class="other alignCenter">
        <i class="iconfont mode" :class="[modeClass]" @click="changeMode"></i>
        <i class="iconfont icon-geci word"></i>
        <div class="listContainer alignCenter" @click="showDrop=!showDrop">
          <i class="iconfont icon-bofangliebiao list" ></i>
          <span class="num">{{playList.length}}</span>
        </div>
      </div>
      <audio ref="audio" :src="currentSong.url" @timeupdate="updateTime" @ended="end" autoplay>
  
      </audio>
      <div class="dropListContainer" v-if="showDrop">
        <dropList :width="580">
            <template v-slot:header>
                <div class="bplayContainer allCenter">
                    <div class="bplayItem" :class="{'active':activeCur== 'playList'}"
                    @click="activeCur ='playList'"
                    >
                      播放列表
                      </div>
                    <div class="bplayItem" :class="{'active':activeCur== 'playHistory'}"
                    @click="activeCur ='playHistory'"
                    >
                      历史记录
                      </div>
                </div>
            </template>
            <div class="bDetail spCenter alignCenter">
              <p class="bNum" v-if="activeCur == 'playList'">共{{sequenceList.length}}首</p>
              <p class="bNum" v-if="activeCur == 'playHistory'">共{{playHistoryList.length}}首</p>
              <div class="bControl alignCenter">
                <div class="bCollection">
                  <i class="iconfont icon-shoucanggedan"></i>
                  <span class="bcol">收藏全部</span>
                </div>
                <div class="bClear">
                  <i class="iconfont icon-lajixiang"></i>
                  <span class="bcle">清空</span>
                </div>
              </div>
            </div>
            <div class="albumContainer">
              <album :Songs="sequenceList" :types="3" :width='100' :nameWidth="55" :show="activeCur == 'playList'" :key="`value:${renderAlbum1}`">
              </album>
  
              <album :Songs="playHistoryList" :types="4" :width='100' :nameWidth="55" :show="activeCur == 'playHistory'" :key="`value:${renderAlbum2}`">
              </album>
            </div>
              
        </dropList>
      </div>
      <div class="modules" @click="showDrop = false" ref="modules" v-show="showDrop"
      style="position: fixed;
              width: 100%;
              top: 0;
              left: 0;
              z-index: 99;
              height: 630px;"
      ></div>
    </div>
  </template>
  
  <script>
  import {mapGetters,mapMutations,mapActions} from 'vuex'
  import DropList from '../base/DropList'
  import Album from '../base/Album'
  import {Axios,getSongUrl} from '../common/api'
  
  
  const offSetLeft = 250
  const boxWidth = 12
  
  export default {
    data() {
      return {
        timeWidth: 0,
        time: 0,
        activeCur:'playList',
        currentTime:0,
        timeSchedule:0,
        showDrop:false,
        isPreNext:false,
        mode:[
          'sequence',
          'random',
          'loop'
        ],
        nowMode:'sequence',
      }
    },
    computed: {
      ...mapGetters([
        'currentSong',
        'playList',
        'sequenceList',
        'currentIndex',
        'playing',
        'playHistoryList'
      ]),
      renderAlbum1() {
        if(this.activeCur==="playList") {
          return 1
        }
        return 2
      },
      renderAlbum2() {
        if(this.activeCur==="playHistory") {
          return 3
        }
        return 4
      },
      modeClass() {
        switch (this.nowMode) {
          case 'sequence':
            return 'icon-biao-'
          case 'random':
            return 'icon-bofangye-caozuolan-suijibofang'
          case 'loop':
            return 'icon-danquxunhuan'
          default:
            break;
        }
      },
      palyClass() {
        if(this.playing) {
          return 'icon-zanting'
        }
        return 'icon-bofang'
      },
      percent() {
        return this.currentTime * 1000/this.currentSong.duration
      }
    },
    components: {
      DropList,
      Album
    },
    watch: {
      currentTime(newVal) {
        this.time = this.percent * this.timeWidth - boxWidth/2
      },
      time(newVal) {
          if(newVal < 0) {
           this.timeSchedule = 0
           return 0
          }
           this.timeSchedule = (newVal / this.timeWidth)*100
      }
    },
    mounted() {
      this.init()
    },
    updated() {
      //  设置进度条的宽度
      this.timeWidth = this.$refs.timeContainer.offsetWidth
    },
    filters: {
      songTime(value) {
        var min = Math.floor(value/60)
        var seconds = Math.floor(value % 60)
        if(seconds < 10) {
          seconds = '0' + seconds
        }
        if(min < 10) {
          min = '0' + min
        }
        return `${min}:${seconds}`
      }
    },
    methods: {
      init() {
        //  设置vuex中的audio，提供给歌曲详情页使用
        this.setAudio(this.$refs.audio)
        //  设置进度条的宽度
        this.timeWidth = this.$refs.timeContainer.offsetWidth
        //  设置蒙版层的高度，不遮住底部
        this.$refs.modules.style.height = document.documentElement.clientHeight - this.$refs.bottom.clientHeight
        
        window.onresize = () => {
          this.timeWidth = this.$refs.timeContainer.offsetWidth
          setTimeout(() => {
            this.$refs.modules.style.height = `${document.documentElement.clientHeight - this.$refs.bottom.clientHeight}px`
          }, 200);    
      }
      },
      drap(e) {
        e.stopPropagation()
        if(!this.currentSong.duration) {
          return
        }
        let box = this.$refs.box
        var _this = this
        let startX =  offSetLeft - boxWidth/2 
        let moveX = 0,endX = 0
        document.addEventListener('mousemove',move)
  
        document.addEventListener('mouseup',function (e) {
          e.stopPropagation()
          document.removeEventListener("mousemove",move)
        })
        function move(e) {
          e.stopPropagation()
          moveX = e.clientX - offSetLeft - boxWidth/2
          if(e.clientX - offSetLeft >= _this.timeWidth) {
           _this.time = _this.timeWidth - boxWidth/2
           moveX = 0
          }else if(e.clientX - offSetLeft <= 0) {
            moveX = 0 - boxWidth/2
          }else {
            _this.time = moveX
            _this.$refs.audio.currentTime = _this.time / _this.timeWidth * _this.currentSong.duration / 1000
          }  
        }
      },
      toTime(e) {
        if(!this.currentSong.duration) {
          return
        }
        this.time = e.clientX - offSetLeft - boxWidth/2
        this.$refs.audio.currentTime = this.time / this.timeWidth * this.currentSong.duration / 1000
        if(e.clientX > this.timeWidth + offSetLeft) {
          this.time = this.timeWidth
        }else if(e.clientX < offSetLeft) {
          this.time = 0
        }
      },
      updateTime(e) {
        this.currentTime = e.target.currentTime
      },
      changeMode() {
        this.nowMode = this.nowMode == this.mode[0] ? this.mode[1] : this.nowMode == this.mode[1] ? this.mode[2] : this.mode[0]
  
        this.setPlayMode(this.nowMode)
  
        let index = this.sequenceList.findIndex((item) => {
           return item == this.currentSong
        })
  
        if(this.nowMode == this.mode[2]) {
            this.setCurrentIndex(index)
            this.setPlayList(this.sequenceList)
          return
        }else {
          this.selectPlay({
                  list:this.sequenceList,
                  index:this.currentIndex
                })
        }
        
      },
      end() {
        this.setPlayState(true)
        if(this.nowMode === this.mode[2]) {
          this.loop()
        }else {
          this.next()
        }
      },
      loop() {
        this.$refs.audio.currentTime = 0
        this.$refs.audio.play()
        this.isPreNext = false
      },
      next() {
        if(!this.currentSong.duration) {
          return 
        }
        this.isPreNext = true
        this.setPlayState(true)
        if(this.playList === 1 || this.nowMode === this.mode[2]) {
          this.loop()
        }else if(this.nowMode === this.mode[0]) {
          let index = this.currentIndex + 1
          if(index === this.playList.length) {
            index = 0
          }
          this.setPlayList(this.sequenceList)
          this._getUrl(this.playList[index].mid,index)
        }else{
          let index = this.currentIndex
          this.setPlayList(this.sequenceList)
          /*标记*/
          this._getUrl(this.playList[index].mid,index)
        }
      },
      prev() {
        if(!this.currentSong.duration) {
          return 
        }
        this.isPreNext = true;
        this.setPlayState(true)
        if(this.playList === 1  || this.nowMode === this.mode[2]) {
          this.loop()
        }else if(this.nowMode === this.mode[0]) {
          let index = this.currentIndex - 1
          if(index === - 1) {
            index = this.playList.length - 1
          }
          this.setPlayList(this.sequenceList)
          this._getUrl(this.playList[index].mid,index)
        }else {
          /*标记*/
          let index = this.currentIndex
          this.setPlayList(this.sequenceList)
          /*标记*/
          this._getUrl(this.playList[index].mid,index)
        }
      },
      
      playState() {
        if(!this.currentSong.duration) {
          return 
        }
        if(this.playing) {
          this.$refs.audio.pause()
          this.setPlayState(false)
        }else {
          this.$refs.audio.play()
          this.setPlayState(true)
        }
      },
      _getUrl(mid,index) {
        let params = {
          id: mid
        }
        Axios(getSongUrl,params).then((res) => {
          let url = res.data[0].url
          let list = this.playList.slice(0)
          list[index].url = url   
          this.selectPlay({
            list:this.sequenceList,
            index:index
          })
          this.isPreNext = false;
        })
      },
      ...mapActions([
        'selectPlay',
      ]),
      ...mapMutations({
        setCurrentIndex:'SET_CURRENT_INDEX',
        setPlayList:'SET_PLAYLIST',
        setPlayMode:'SET_PLAY_MODE',
        setPlayState:'SET_PLAY_STATE',
        setAudio:'SET_AUDIO'
      })
    }
  }
  </script>
  
  <style lang='scss'>
  @import '../assets/css/base.scss';
  .bottom {
      position: fixed;
      z-index: 1000;
      bottom: 0;
      box-sizing: border-box;
      border-top: 1px solid $borderColor;
      width: 100%;
      height: 50px;
      background: #F6F6F8;
      .playControl {
        width: 200px;
        i {
          font-size: 35px;
          color:#D23030;
        }
        .prev {
          padding-left: 30px;
        }
        .play {
          padding: 0 20px;
        }
      }
      .timeContainer {
        flex: 1;
        margin-right: 10px;
        span {
          font-size: 13px;
          padding: 0 10px;
        }
        .timeschedule {
          flex: 1;
          padding: 10px 0;
          position: relative;
          .box {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            z-index: 100;
            background: #f1f1f1;
            top: 3px;
            left: -6px;
            border: 1px solid #C2C2C4;
            &::before {
              content: '';
              width: 4px;
              height: 4px;
              position: absolute;
              left: 4px;
              top: 4px;
              background: #D23030;
              border-radius: 50%;
            }
          }
          .in {
            position: absolute;
            width: 100%;
            left: 0;
            height: 4px;
            background: #C2C2C4;
            border-radius: 3px;
          }
          .out {
            left: 0;
            /* width: 100%; */
            position: absolute;
            height: 4px;
            background: #D23030;
            border-radius: 3px;
          }
        }
      }
      .soundContainer {
        width: 130px;
        .sound {
          font-size: 20px;
        }
        .soundschedule {
          width: 90px;
          position: relative;
          .in {
            position: absolute;
            width: 100%;
            left: 0;
            height: 4px;
            background: #C2C2C4;
            border-radius: 3px;
          }
          .out {
            left: 0;
            width: 100%;
            position: absolute;
            height: 4px;
            background: #D23030;
            border-radius: 3px;
          }
        }
      }
      .other {
        width: 140px;
        i{
          font-size: 20px;
        }
        .mode {
          padding-right: 10px;
        }
        .word {
          padding-right: 10px;
          color: #888;
          font-size: 25px;
          position: relative;
          top: 2px;
        }
        .listContainer {
          width: 50px;
          border-radius: 10px;
          background: $borderColor;
          padding: none;
          .list {
            font-size: 18px;
            position: relative;
            top: 2px;
          }
          .num {
            font-size: 13px;
            display: block;
            margin-right: 10px;
          }
        }
      }
      .dropListContainer  {
        position: absolute;
        right: 0;
        height: 470px;
        top: -470px;
        width: 580px;
        .bplayContainer {
          width: 100%;
          height: 40px;
          border-bottom: 1px solid $borderColor;
          .bplayItem {
            font-size: 14px;
            padding: 5px 30px;
            border-top: 1px solid $borderColor;
            border-bottom: 1px solid $borderColor;
            color: #555555;
            cursor: pointer;
            &:first-child {
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
              border-right: 1px solid $borderColor;
              border-left: 1px solid $borderColor;
            }
            &:last-child {
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
              border-right: 1px solid $borderColor;
            }
            &.active {
              background: #7C7D85;
              color:#f1f1f1;
            }
          }
        }
        .bDetail {
          width: 100%;
          height: 30px;
          color: #666666;
          font-size: 13px;
          border-bottom: 1px solid #EBECED;
          .bNum {
            padding: 5px 20px;
          }
          .bCollection {
            padding-right: 10px;
            border-right: 1px solid $borderColor;
            .icon-shoucanggedan {
              font-size: 15px;
            }
          }
          .bClear {
            padding-left: 10px;
            padding-right: 20px;
          }
        }
        .albumContainer {
          height:390px; 
          overflow:hidden;
          overflow-y: scroll;
            }
      }
  }
  </style>