<template>
  <div>
    <label class="lable"><input class="input" type="file" @change="upload"></label>
    <el-button type="primary" plain size="small" @click="$store.state.editor.editorTheme.backgroundAudio=''" v-if="$store.state.editor.editorTheme.backgroundAudio" >移除背景音乐</el-button>
  </div>
</template>

<style scoped>
  .lable {
    display: block;
    cursor: pointer;
    width: 3em;
    height: 3em;
    background: url("../assets/addpic_large.png") no-repeat;
    background-size: cover;
  }

  .input {
    display: none;
  }
</style>

<script>
  import * as http from '../util/http'
  export default {
    props: {
      themeId: {
        type: String
      }
    },
    methods: {
      upload (event) {
        var that =this
        let file = event.target.files[0]
        if (file) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.8)'
          });
          http.uploadMaterielFile(file,function (res) {
            loading.close();
            that.$store.state.editor.editorTheme.backgroundAudio = res;
            // let audio = document.createElement('audio')
            // audio.onload = () => {
            //   that.$emit('uploaded', {
            //     'id': 'audio',
            //     'autoplay': 'autoplay',
            //     'loop': true,
            //     'preload': 'auto',
            //     'audioSrc': res,
            //     'width': audio.width,
            //     'height': audio.height
            //   })
            // }
            // audio.src = res
            // var eles=that.$store.state.editor.editorPage.elements;
            // var flag=false
            // eles.forEach(function (value) {
            //   if(value.type=='audio'){
            //     value.audioSrc=res;
            //     flag=true
            //   }
            // })
            // if(flag){
            //   return false;
            // }
            // that.$store.dispatch('addElement', {
            //   type:'audio',
            //   audioSrc:res,
            //   width:50,
            //   height:50,
            //   left:700,
            //   top:0
            // })
          }, function(res) {
            if (res.total.percent == 100) {
              loading.close();
            }
          })
        }
      },
    }
  }
</script>
