<style>
  .upload-iframe {
    display: none;
  }
  .upload-btn {
    display: inline-block;
    position: relative; 
  } 
  .upload-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    /*font-size: 100px;*/
    opacity: 0;
    cursor: pointer;
  }
.roll-bg {
position: fixed;
z-index: 9999;
background: #f5f5f5;
width: 100%;
height: 100%;
left: 0;
top: 0;  
  filter:alpha(opacity=90); 
  -moz-opacity:0.9; 
  -khtml-opacity: 0.9; 
  opacity: 0.9;
}
.roll-bg img {
  width: 60px; 
  height: 60px; 
  margin-top: 350px;
}
</style>
<template> 
  <my-tag :tag-name="tag" v-if="type == 'file'" style="margin-top:0px;" :class="class">
    <iframe :id="iframeName" :name="iframeName" @load="loaded" class="upload-iframe"></iframe>
    <form :id="formId" action="/file/upload/excel/{{exceltype}}" method="post" :target="iframeName" style="
      display: inline;" enctype="multipart/form-data">
      <slot>{{label}}</slot>
      <input type="file" id="uploadFile" name="uploadFile" @change="upload">
      <!-- <input type="hidden" id="billno" name="billno" v-model="billno"> -->
      <div class="roll-bg" v-show="sh">
      <div class="w60" style="margin:0 auto; ">
          <img src="/images/roll.gif"></img>  <b>billno</b>
      </div>
      </div>  
    </form>
  </my-tag>  
</template>

<script>
module.exports = {
  props: {
    billno: '',
    label: {
      type: String,
      default: '选择文件'
    },
    sh:false,
    class: {
      type: Array,
      default: function () {
        return [];
      },
      coerce: function (val) {
        return ['upload-btn'].concat(val || []);
      }
    },
    tag: {
      type: String,
      default: 'div'
    },
    model: {
      type: String,
      require: true,
      twoWay: true
    },
    type: {
      type: String,
      default: 'img'
    },
    multiple: false,
    exceltype:'supplier'
  },
  data: function () {
    return {
      iframeName: 'uploadVue' + Math.random().toString(32).substr(2),
      formId: 'upload-form-' + Math.random().toString(32).substr(2)
    }
  },
  methods: {
    loaded: function (event) {

      var content = "";
      var pre=event.target.contentWindow.document.body.querySelector('pre') || '';
      if(!pre){
        pre = document.getElementById(this.iframeName).contentWindow;       
        content = pre.document.body.innerText || '';
        if(content==''){
          return ;
        }
      }else{
        if(!pre){
          return ;
        }
        content=pre.innerHTML;        
      }

      try {
        var result = JSON.parse(content);
        if (result.errorCode==0) {
          // $('#uploadFile').replaceWith('<input name="uploadFile3" type="file" id="uploadFile"  @change="upload"/>');
          this.$dispatch('file-change', result);
          this.sh = false;
        } else {
          this.$dispatch('file-change', result);
          this.sh = false;
        }
      } catch(e) {
        this.MessageBox.alert(e.message); 
        this.sh = false;
      }
    },
    upload: function (event) {
      document.getElementById(this.formId).submit(); 
       this.sh = true;
       this.billno=this.$route.params.billno;  
       alert(this.billno);
    }
  }
};
</script>