<template>
  <div>
    <div class="file is-primary" id="ignore" v-if="position==='left'">
      <label class="file-label">
        <input class="file-input" type="file" :id="docid" multiple name="resume" @change="doChange">
        <span class="file-cta px-2">
        <span class="icon-text is-clickable">
          <SvgIcon v-bind="{name: 'attach-file.svg', type: 'white', size: 22}"></SvgIcon>
          <!--<span class="has-text-white">File</span>-->
        </span>
        </span>
      </label>
    </div>
    <div class="field is-grouped is-grouped-right" id="ignore" v-else>
    <div class="control">
    <div class="file is-primary">
      <label class="file-label">
        <input class="file-input" type="file" :id="docid" multiple name="resume" @change="doChange">
        <span class="file-cta px-1">
        <span class="icon-text is-clickable">
          <SvgIcon v-bind="{name: 'attach-file.svg', type: 'white', size: 22}"></SvgIcon>
          <!--<span class="has-text-white">File</span>-->
        </span>
        </span>
      </label>
    </div>
  </div>
  </div>
    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @files="getFiles"></Modal>
  </div>
</template>
<script>
export default {
  props: ['type', 'position'],
  data() {
    return {
      loading: false,
      files: undefined,
      dataFiles: [],
      vtype: this.type || 'image',
      showmodal: undefined,
      docid: this.$id()
    }
  },
  methods: {
    doChange() {
      this.dataFiles = []
      let fileList = document.getElementById(this.docid).files
      this.files = Array.from(fileList)
      if(this.files.length===0) return
      this.files.map(v=>{
        let file = this.$upload(v, this.vtype, 1, '0') //this.$store.state.login.id
        this.dataFiles.push(file)
      })
      this.showmodal = {component: 'media/UploadProgress', title: 'Upload files', width: '700px', height: '200px', vbind: {files: this.dataFiles}}
      this.clearFileList()
    },
    clearFileList() {
      const fileInput = document.getElementById(this.docid);
      const dt = new DataTransfer()
      fileInput.files = dt.files
    },
    getFiles(files) {
      this.$emit('files', files)
      setTimeout(()=>this.showmodal=undefined, 3000)
    }
  }
}
</script>