<template>
  <label class="lable"><input class="input" type="file" @change="fileChange" multiple="true"></label>
</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
      },
      ismultiple: Boolean
    },
    methods: {
      fileChange (event) {
        if (this.ismultiple) {
          this.multipleUpload(event)
        } else {
          this.upload(event)
        }
      },
      async upload (event) {
        var that=this;
        let files = event.target.files
        if (!files.length) {
          return false
        }

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        for (var i = 0; i < files.length; i++) {
          var file = files[i]
          if (file) {
            http.uploadMaterielFile(file,function (res) {
              loading.close();
              let img = document.createElement('img')

              img.onload = () => {
                that.$emit('uploaded', {
                          'filePath': res,
                          'width': img.width,
                          'height': img.height
                        })
                      }
                      img.src = res
            }, function(res) {
              if (res.total.percent == 100 && (files.length == i+1)) {
                loading.close();
              }
            })
          }
        }
        // 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();
        //     let img = document.createElement('img')
        //     img.onload = () => {
        //       that.$emit('uploaded', {
        //         'filePath': res,
        //         'width': img.width,
        //         'height': img.height
        //       })
        //     }
        //     img.src = res
        //   }, function(res) {
        //     if (res.total.percent == 100) {
        //       loading.close();
        //     }
        //   })
        // }
      },
      multipleUpload (event) {
        let files = event.target.files
        if (!files.length) {
          return false
        }

        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        var morePic = []
        for (var i = 0; i < files.length; i++) {
          var file = files[i]
          if (file) {
            http.uploadMaterielFile(file,function (res) {
              loading.close();
              let img = document.createElement('img')

              img.onload = () => {
                morePic.push({
                  'filePath': res,
                  'width': img.width,
                  'height': img.height
                })
              }
              img.src = res
            }, function(res) {
              if (res.total.percent == 100 && (files.length == i+1)) {
                loading.close();
              }
            })
          }
        }
        this.$emit('uploaded', {
          morePic
        })
      }
    }
  }
</script>
