<template>
  <div
    v-loading="loading"
    class="music-wrap"
  >
    <el-upload
      class="upload-demo"
      :disabled="isDisable"
      :before-upload="beforeMusicUpload"
      :action="actionurl"
      :headers="headers"
      :on-remove="handleRemove"
      :on-success="sucess"
      :file-list="musicArr || []"
      :on-error="errfn"
      :before-remove="beforeRemove"
      :accept="accept"
    >
      <el-button
        size="small"
        type="primary"
      >
        点击上传
      </el-button>
      <p
        slot="tip"
        class="el-upload__tip"
      >
        音频格式：mp3
      </p>
      <ul
        slot="tip"
        class="el-upload__tip music-box"
      >
        <audio
          v-for="(item) of musicArr"
          :key="item.uid"
          ref="audioWrap"
          class="audio"
          controls
          :src="musicUrl(item)"
        >您的浏览器不支持mp3播放</audio>
      </ul>
    </el-upload>
  </div>
</template>

<script>
  import { getBaseUrl } from '@/utils/index';
  import refundDetailVue from '../../views/IM/diagnosis-admin/refund-detail.vue';
  export default {
    props: {
      isDisable: {
        type: Boolean,
        default: false
      },
      musicList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        musicArr: [],
        actionUrl: '',
        headers: {
          token: localStorage.getItem('token'),
        },
        loading: false,
        accept: '.mp3,.mpeg'
      };
    },
    watch:{
      musicList(newv, oldv) {
        this.musicArr = newv || [];
      }
    },
    created() {
      this.musicArr = this.musicList;
      console.log(console.log('this.musicList', this.musicArr));
      this.actionurl = getBaseUrl('/diagnose/illness/audio/upload');
    },
    methods: {
      musicUrl(item) {
        if (item.url) {
          return item.url;
        }
        return item.response.data.domainPath + item.response.data.path;
      },
      beforeRemove() {
        this.loading = true;
      },
      handleRemove(file, fileList) {
        this.loading = true;
        this.musicArr = fileList;
        const time = setTimeout(() => {
          this.loading = false;
          clearTimeout(time);
        }, 1000);

      },
      sucess(response, file, fileList) {
        this.musicArr = fileList;
        this.loading = false;
      },
      errfn(response, file, fileList) {
        this.loading = false;
      },
      // 上传mp3
      beforeMusicUpload(file) {

      },
      setNewArr() {
        const newArr = [];
        if (this.musicArr && this.musicArr.length) {
          this.musicArr.forEach(item => {
            if (item.response) {
              newArr.push(item.response.data.domainPath + item.response.data.path);
            } else if(item.url && item.from) {
              newArr.push(item.url);
            }
          });
        }
        return newArr;
      },

    },
  };
</script>

<style lang="scss">
.music-wrap {
  position: relative;
  .wrap {
    position: absolute;
    left: 90px;
    top: 10px;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: .3;
  }
  .audio {
    display: block;
    height: 40px;
    margin-top: 8px;
  }
  .music-box {
    display: inline-block;
    overflow: hidden;
  }
  .el-upload-list__item {
    line-height: 40px;
    // margin: 20px 0;
  }
  .el-icon-close {
    top: 15px;
  }
  .el-upload-list {
    display: inline-block;
}
}
</style>
