<template>
  <label class="lable">
    <div style="width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:100%;
    background:rgba(239,239,239,1);">
      <img style="width:16px;
    height:16px;" src="../assets/images/add-ele.png" />
      <span style="font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    margin-top: 6px;
    color:rgba(51,51,51,1);
    line-height:17px;">{{ismultiple?"添加轮播":isButton? "添加按钮":"添加元素"}}</span>
    </div>
    <input class="input" type="file" @change="fileChange" multiple="true">
  </label>
</template>

<style scoped>
  .lable {
    display: block;
    cursor: pointer;
    width: 45%;
    height: calc(324px *0.45 * 0.73);
  }

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

<script>
  import * as http from '../util/http'
  export default {
    props: {
      themeId: {
        type: String
      },
      isButton: Boolean,
      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,
                  'isButton': that.isButton,
                })
              }
              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>