<template>
  <!--正在播放-->
  <div class="playList">
    <music-list :list="playlist" list-type="duration" @select="selectItem" @del="deleteItem">
      <div slot="listBtn" class="list-btn">
        <span @click="$refs.dialog.show()">清空列表</span>
      </div>
    </music-list>
    <wyy-dialog
      ref="dialog"
      body-text="是否清空正在播放列表"
      confirm-btn-text="清空"
      @confirm="clearList"
    />
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import MusicList from 'components/music-list/music-list'
import WyyDialog from 'base/wyy-dialog/wyy-dialog'

export default {
  name: 'PlayList',
  components: {
    MusicList,
    WyyDialog,
  },
  data() {
    return {
      show: false,
    }
  },
  computed: {
    ...mapGetters(['playing', 'playlist', 'currentMusic']),
  },
  methods: {
    // 清空列表事件
    clearList() {
      this.clearPlayList()
      this.$wyyToast('列表清空成功')
    },
    // 播放暂停事件
    selectItem(item, index) {
      if (item.id !== this.currentMusic.id) {
        this.setCurrentIndex(index)
        this.setPlaying(true)
      }
    },
    // 删除事件
    deleteItem(index) {
      let list = [...this.playlist]
      list.splice(index, 1)
      this.removerPlayListItem({ list, index })
      this.$wyyToast('删除成功')
    },
    ...mapMutations({
      setPlaying: 'SET_PLAYING',
      setCurrentIndex: 'SET_CURRENTINDEX',
      clearPlaylist: 'CLEAR_PLAYLIST',
    }),
    ...mapActions(['removerPlayListItem', 'clearPlayList']),
  },
}
</script>
