<template>
  <div :closable="true">
    <div :model="file">
      <Button id="upload-btn" type="ghost" style="margin-left:10px;">{{$t("module.userManage.selectFile")}}</Button>
      <Input  style="width: 240px" type="text" v-model="file.excelFile"  /> 
    </div>
    <br>
    <div slot="footer">
      <Button type="primary" style="margin-left:10px;" @click.native="downloadTemplate">{{$t("module.userManage.downloadTemplate")}}</Button>
      <Button type="ghost" @click.native="onOk">{{$t("module.userManage.confirmImport")}}</Button>
      <Button type="ghost" @click.native="onCancel">{{$t("module.userManage.cancelImport")}}</Button>
    </div>     
  </div>
</template>
<script>
export default {
  data(){
    return{
      file:{
        excelFile:""
      },
      uploader: undefined,
    }
  },
  created(){
    this.$emit('SetPageSize', 400);   
    this.$emit('SetTitle', this.$t("module.userManage.importUsers"));
  },
  mounted(){
    this.uploader = new plupload.Uploader({
      //实例化一个plupload上传对象
      browse_button: "upload-btn",
      url: `${location.origin}/${process.env.API.baseURL}/sys/account/excel/import`,
      multi_selection: false,
      headers: {
        crctoken: sessionStorage.crctoken
      },
      multipart_params: {
        name: "file"
      },
      filters: {
      }
    });
    this.uploader.bind("UploadComplete", (uploader, files) => {
      this.file.excelFile = undefined;
      this.$emit('Close');    
      });
    this.uploader.bind("FilesAdded",(uploader,files)=>{
      this.file.excelFile = files[0].name;      
      
    })
    this.uploader.bind("FileUploaded", (uploader, file, responseObject) => {
      let response= eval('(' + responseObject.response + ')');
      if(response.statusCode == "0"){
        this.$Message.success({
          content: response.msg,
          duration: 3
        })
      }else{
        this.$Message.warning({
          content: response.msg,
          duration: 3
        })
      }
    })
    this.uploader.init();
  },

  methods:{
    downloadTemplate(){
      // this.DownloadFile({
      //   url:'/sys/account/excel/export/template',
      //   method:'post',
      // },this);

      // this.DownloadFile("DownLoadTemplate", {}).then(response => {
      // })
      window.location = "/static/files/用户导入模板.xlsx"; 
    },
    onOk() {
      //判断文件格式
      let _fileName = this.file.excelFile;
      let fileType = "";
      let reverseName = _fileName.split("").reverse().join("");
      if(reverseName.indexOf(".") > 0){
         fileType = reverseName.split(".")[0];
      }else{
          this.$Message.warning({
          content: this.$t("module.userManage.warning.fileFormat"),
          duration: 3
        });
        return ;
      }
      if(fileType != "xslx" && fileType != "slx"){
        this.$Message.warning({
          content: this.$t("module.userManage.warning.fileFormat"),
          duration: 3
        });
        return ;
      }
      if(!this.file.excelFile){
        this.$Message.warning({
          content: this.$t("module.userManage.warning.selectFiles"),
          duration: 3
        })
        return ;
      }
      this.uploader.start();          
    },
    onCancel() {
      this.$emit('Close');
    },

  },
}
</script>


