<template>
  <el-dialog
    title="导入Excel文件"
    append-to-body
    :visible.sync="dialogVisible"
    destroy-on-close
    width="400px"
    :show-close="true"
    @close="close"
    @open="open"
  >
    <el-upload
      ref="upload"
      class="upload-demo"
      action=""
      drag
      :on-exceed="is_one"
      :limit="1"
      :auto-upload="false"
      :multiple="false"
      :show-file-list="true"
      :on-change="uploadByJsqd"
      :file-list="fileList"
      accept=".xlsx,.xls"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传Excel文件，且不超过10MB</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import checkoutbill from '@/views/wms/st/outbill/checkoutbill'
import CRUD, { crud } from '@crud/crud'

export default {
  name: 'UploadDialog',
  mixins: [crud()],
  components: {},
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    openParam: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      file1: ''
    }
  },
  watch: {
    dialogShow: {
      handler(newValue, oldValue) {
        this.dialogVisible = newValue
      }
    },
    openParam: {
      handler(newValue, oldValue) {
        this.opendtlParam = newValue
      }
    }
  },
  methods: {
    open() {
    },
    close() {
      this.$emit('update:dialogShow', false)
    },
    is_one() {
      this.crud.notify('只能上传一个excel文件！', CRUD.NOTIFICATION_TYPE.WARNING)
    },
    // 文件校验方法
    beforeAvatarUpload(file) {
      // 不能导入大小超过2Mb的文件
      if (file.size > 10 * 1024 * 1024) {
        return false
      }
      return true
    },
    // 文件发生改变就会触发的事件
    uploadByJsqd(file) {
      this.file1 = file
    },
    submit() {
      // debugger
      if (this.beforeAvatarUpload(this.file1)) {
        this.fileList.name = this.file1.name
        this.fileList.url = ''
        var formdata = new FormData()
        formdata.append('file', this.file1.raw)
        // excelImport：请求接口 formdata：传递参数
        checkoutbill.excelImport(formdata).then((res) => {
          this.crud.notify('导入成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.$emit('tableChanged', null)
          this.$emit('update:dialogShow', false)
        })
      } else {
        this.crud.notify('文件过大，请上传小于10MB的文件〜', CRUD.NOTIFICATION_TYPE.WARNING)
      }
    }
  }
}
</script>

