<template>
  <a-upload :action="uploadUrl" :headers="header" :name="name" :data="data" :beforeUpload="beforeUpload" :showUploadList="false" @change="fileChange">
    <slot>
      <a-button>
        <a-icon type="upload" /> 导入
      </a-button>
    </slot>
  </a-upload>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"

export default {
  name: "ImportBtn",
  props:{
    url:String,
    name:{
      type:String,
      default:'file'
    },
    data:Object,
    responseFun:{
      type:Function,
      default: function () {
        return function () {

        }
      }
    }
  },
  data(){
    return {
      header:{
        "Authorization":Vue.ls.get(ACCESS_TOKEN)
      }
    }
  },
  methods:{
    beforeUpload(file) {
      return new Promise((resolve,reject) => {
        this.$confirm({
          title: '提示',
          content:'请确认是否上传文件',
          onOk() {
            resolve(file)
            //return true;
          },
          onCancel() {
            reject()
            //return false;
          },
          class: 'test',
        });
      })
    },
    //文件状态监控
    fileChange(obj){
      if(obj.file.status === 'done'){
        this.responseFun(obj.file);
      }
    }
  },
  computed:{
    uploadUrl(){
      const env = process.env.NODE_ENV; //获取当前环境
      let apis = "/";
      if(env === 'development'){     //测试环境默认添加前缀
        apis = '/api/';
      }
      return apis + this.url
    }
  }
}
</script>

<style scoped>

</style>
