<template>
  <div>
    <el-upload
      ref="audioUpload"
      :action="action"
      :headers="{token:token}"
      :limit="limit"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
      :before-upload="beforeUpload"
      multiple
      class="upload-demo">
      <el-button slot="trigger" :disabled="fileList.length >= limit" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">最多上传{{ limit }}段音频，每段大小不超过5M</div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="600px" title="音频预览" class="audio-dialog" @close="closeSound">
      <audio-player ref="audio" :url="playUrl" :name="playName" :the-control-list="controlList" />
    </el-dialog>
  </div>
</template>

<script>
import AudioPlayer from '@/components/AudioPlayer/AudioPlayer'
export default {
  name: 'AudioUpload',
  components: { AudioPlayer },
  props: {
    limit: {
      type: Number,
      default: 2
    },
    action: {
      type: String,
      default: '#'
    },
    token: {
      type: String,
      default: ''
    },
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      playUrl: '',
      playName: '',
      controlList: 'noDownload onlyOnePlaying noMuted noVolume'
    }
  },
  methods: {
    // 将图片文件传回给父组件
    submitFile() {
      this.$emit('submitAudio', this.fileList)
    },
    // 上传完成
    handleSuccess(response, file, fileList) {
      console.log('handleSuccess', fileList)
      if (response.code !== 200) {
        fileList.splice(fileList.length - 1, 1)
        this.fileList.splice(this.fileList.length - 1, 1)
        this.$message.error('上传失败')
      } else {
        this.$message.success('上传成功')
        console.log('file', file)
        console.log('response', response)
        const obj = {
          name: file.name,
          status: 'success',
          uid: file.uid,
          url: this.baseConfig.baseUrl + '/static/' + response.data
        }
        this.fileList.push(obj)
        this.submitFile()
      }
    },
    // 移除
    handleRemove(file, fileList) {
      for (const i in this.fileList) {
        if (this.fileList[i].uid === file.uid) {
          this.fileList.splice(i, 1)
        }
      }
      this.submitFile()
    },
    // 预览
    handlePreview(file) {
      console.log('preview', file)
      this.playUrl = this.baseConfig.baseUrl + '/static/' + file.response.data
      this.playName = file.name
      this.dialogVisible = true
    },
    // 上传前检查音频格式和大小
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (['audio/mpeg', 'audio/ogg', 'audio/mp3'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的音频格式')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传视频大小不能超过5MB!')
        return false
      }
    },
    // 限制提示
    handleExceed(files, fileList) {
      console.log('handleExceed', this.limit)
      const limit = this.limit
      this.$message.warning(`限制选择` + limit + `段音频，本次选择了 ${files.length} 段音频，共选择了 ${files.length + fileList.length} 段音频`)
    },
    // 关闭播放弹窗
    closeSound() {
      console.log('close')
      this.$refs.audio.pausePlay()
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-demo{
  width: fit-content;
}
/deep/ .el-dialog__body{
    padding-top: 10px;
}
</style>