<template>
  <div class="excel">
    <el-upload class="upload-demo" action="/" ref='upload' :on-change="handleChange" accept=".xlsx" :http-request="httprequest" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList">
      <el-button size="mini" type="primary">添加文档</el-button>
      <div slot="tip" class="el-upload__tip">只能上传excel格式的文档</div>
    </el-upload>
    <br>
    <br>
    <div class="header_flex">
      <span></span>
      <div>
        <el-button size='mini' type="primary" plain @click="cencal( infoDialog = false)">取 消</el-button>
        <el-button size='mini' type="primary" @click="confirm( infoDialog = false)">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      fileData: new FormData(),
      infoDialog: false,
      file: null,
    };
  },
  methods: {
    cencal() {
      this.$emit("infoDialogV", this.infoDialog);
    },

    confirm() {
      this.$refs.upload.submit();
      this.$emit("infoDialogV", this.infoDialog);
      this.$emit("fileData", this.file);
    },

    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
    },
    httprequest(file) {
      this.file = file.file;
      this.fileData.append("file", file.file);
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      //console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return file.name;
    },
  },
  activated() {
    setTimeout(() => {
      this.$refs.upload.clear();
    }, 500);
  },
  created() {
    Object.assign(this.$data, this.$options.data.call(this));
  },
};
</script>

<style>
.excel .upload-demo > li {
  height: 50px;
  font-size: 18px !important;
}
</style>
