<script>

export default {
  props: {
    uploading: {type: Boolean, default: false},
    downloading: {type: Boolean, default: false},
  },
  data() {
    return {}
  },
  watch: {
    uploading(value, oldValue) {
      if (!value && oldValue) { this.$refs.upload.value = ''; }
    },
  },
  methods: {
    upload(event) {
      let files = [];
      if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) files = event.dataTransfer.files;
      else {
        files = event.target.files;
      }
      if (files.length > 0) this.$emit('upload', files[0]);
    }
  }
}
</script>

<template>
  <div>
    <div tabindex="0" class="el-upload el-upload--text"
         @click="$refs.upload.click()"
         @dragover.prevent.stop @dragleave.prevent.stop @drop.prevent.stop="upload"
    >
      <div class="el-upload-dragger">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em data-v-456458ea="">点击上传</em></div>
      </div>
      <input ref="upload" type="file" name="file" accept=".xlsx, .xls" class="el-upload__input" @change="upload"/>
    </div>
    <div class="el-upload__tip text-center">
      <span>仅允许导入xls、xlsx格式文件。</span>
      <el-button type="link" size="mini" :loading="downloading" @click.stop="$emit('download')">
        下载模板
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
