<template>
  <el-dialog
    title="上传文件"
    :visible.sync="dialogVisible"
    :before-close="beforeClose"
    append-to-body
  >
    <el-upload
      :http-request="handleImport"
      accept=".zip"
      :file-list="fileList"
      :limit="1"
      :on-exceed="onExceed"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
    </el-upload>
  </el-dialog>
</template>

<script>
import req from '@/request'
export default {
  name: 'FileUploadDialog',
  props: {},
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      importUrl: '',
    }
  },
  methods: {
    open(importUrl) {
      this.dialogVisible = true
      this.importUrl = importUrl
    },
    beforeClose() {
      this.dialogVisible = false
      this.fileList = []
    },
    handleImport(param) {
      let formData = new FormData()
      formData.append('file', param.file)
      req.post(this.importUrl, formData).then((resp) => {
        if (resp.data.state) {
          this.$message({type: 'success', message: '导入成功'})
          this.dialogVisible = false
          this.fileList = []
          this.$emit('refresh')
        } else {
          this.beforeClose()
        }
      })
    },
    onExceed() {
      this.$message.warning('只能选择一个zip文件!')
    },
  },
}
</script>

<style scoped></style>