<template>
  <!--歌单详情-->
  <div class="details">
    <mm-loading v-model="mmLoadShow" />
    <music-list :list="list" @select="selectItem" />
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { getPlaylistDetail } from '@api/music.js'
import MmLoading from '@base/mm-loading/mm-loading'
import MusicList from '@/components/music-list/music-list'
import { loadMixin } from '@/utils/mixin'

export default {
  name: 'Detail-all',
  components: {
    MmLoading,
    MusicList,
  },
  mixins: [loadMixin],
  props: {
    detailId: {
      type: [String, Number],
    },
  },
  data() {
    return {
      list: [], // 列表
    }
  },
  mounted() {
    // 获取歌单详情
    this.$nextTick(() => {
      getPlaylistDetail(this.detailId).then((playlist) => {
        console.log(playlist)
        // document.title = `${playlist.name} - mmPlayer在线音乐播放器`
        this.list = playlist.tracks
        this._hideLoad()
      })
    })
  },
  methods: {
    // 播放暂停事件
    selectItem(item, index) {
      this.selectPlay({
        list: this.list,
        index,
      })
    },
    ...mapActions(['selectPlay']),
  },
}
</script>

<style lang="less" scoped>
.details {
  position: relative;
  width: 100%;
  height: 100%;
  .musicList {
    width: 100%;
    height: 100%;
  }
}
</style>
