
<template>
  <div>
    <div class="audio_player">
      <!-- <audio style="width: 100%;" :src='recFiles'
			controls="controls"></audio> -->
      <aplayer
        :music="musicList"
        autoplay
        theme="#41b883"
      />
      <el-button class="audio_btn" size="mini" plain type="primary" @click="btn_downlaod()">下载</el-button>
    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import VueAplayer from 'vue-aplayer'
import download from 'downloadjs'

export default {
  name: 'AudioPlayer',
  components: {
    // 别忘了引入组件
    'aplayer': VueAplayer
  },
  props: {
    recFiles: {
      type: String,
      default: ''
    },
    artists: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      musicList: {
        title: '坐席', // 歌曲名称
        artist: ' ', // 演唱者
        src: '', // 音频文件的 URL
        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg'// 封面图片 URL
      }
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  beforeCreate() {
    // 禁用在控制台打印出当前的版本标识
    const vaplayer = VueAplayer
    vaplayer.disableVersionBadge = true
  },
  created() {
    this.musicList.artist = this.artists
    this.musicList.src = this.recFiles
    this.musicList.pic = this.avatar
    console.log(this.musicList.src)
  },
  methods: {
    btn_downlaod() {
      const strFileName = this.recFiles.substring((this.recFiles.lastIndexOf('/') + 1))
      this.downloadUrl(this.recFiles, strFileName)
    },
    // 下载文件
    downloadUrl(audioUrl, strFileName) {
      // console.log(audioUrl);
      // console.log(strFileName);
      const x = new XMLHttpRequest()
      x.open('GET', audioUrl, true)
      x.responseType = 'blob'
      x.onload = function(e) {
        download(x.response, strFileName)
      }
      x.send()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.audio_player{
		padding:10px 0;
		text-align: center;
		.audio_btn{
			margin-top: 16px;
			width: 120px;
		}
		.aplayer-controller .aplayer-time .aplayer-volume-wrap+.aplayer-icon{
			display: none;
		}
	}
</style>
