<template>
  <el-dialog
    title="导入"
    :visible.sync="dialogVisible"
     width="40%"
    :before-close="handleClose"
    :close-on-click-modal='false'
    @open='open'
    :append-to-body='true'

    >
     <el-upload
        class="upload-demo"
        :drag='false'
        ref='uploadEl'
        action="https://jsonplaceholder.typicode.com/posts/"
        :auto-upload="false"
        :on-change="handleChange"
        :accept='accept'
        :multiple='false'
        :on-remove="handleRemove"
        >
        <!-- <i class="el-icon-upload"></i> -->
        <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
        <el-button size="small" type="primary">选择文件</el-button>
        <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件</div>
      </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button  size='mini' @click="dialogVisible = false">取 消</el-button>
          <el-button size='mini' type="primary" @click="submit">确 定</el-button>
        </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'hsDialogUpload',
  props: {
    value: {
      type: Boolean,
      default: false

    },
    entityConfig: {},
    currentImportItem: {}
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      accept: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    }
  },
  methods: {
    handleRemove(file, fileList) {
      if (!fileList.length) {
        this.fileList = []
      }
    },
    handleChange(file, fileList) {
      const uploadFiles = this.$refs.uploadEl.uploadFiles.pop()
      this.$refs.uploadEl.uploadFiles = [uploadFiles]
      const file_ = [file]
      this.fileList = file_
    },
    open() {
      const r = this.$refs.uploadEl
      this.fileList = []
      if (r) { // 清空上传列表
        r.clearFiles()
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    submit() {
      if (!this.fileList.length) {
        this.$message.error('请选择文件')
        return
      }
      this.$emit('submit', this.fileList)
    }
  }
}
</script>
<style scoped>
.upload-demo{
  text-align: center
}
</style>