<style>
  .upload-iframe {
    display: none;
  }
  .upload-btns {
    /*display: inline-block;*/
    /*position: absolute;*/
    left:0px;
    bottom:0px;
    /*overflow: hidden;*/
  }
  .upload-btns input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    font-size: 18px;
    opacity: 0;
    cursor: pointer;
  }
</style>
<template>
	<!-- <section style="margin-top:0px;"> -->
  <my-tag :tag-name="tag" v-if="type == 'file'" :class="class" 
  :style="style">
  
    <iframe :id="iframeName" :name="iframeName" @load="loaded" class="upload-iframe"></iframe>
    <form :id="formId" action="/file/upload/file" method="post" :target="iframeName" enctype="multipart/form-data">
      <slot>{{label}}</slot>
      <input type="file" name="uploadFile" @change="upload">
    </form>
  </my-tag>
  <my-tag :tag-name="tag" :class="class" v-else>
    <iframe :id="iframeName" :name="iframeName" @load="loaded" class="upload-iframe"></iframe>
    <form :id="formId" action="/file/upload/image" method="post" :target="iframeName" enctype="multipart/form-data">
      <slot>{{label}}</slot>
      {{style}}
      <input type="file" name="uploadFile" @change="upload">
      <input type="hidden" name="type" v-model="type">
    </form>
  </my-tag>
	<!-- </section> -->
</template>

<script>
module.exports = {
  props: {
    style:{
      type:String
    },
    label: {
      type: String,
      default: ''
    },
    class: {
      type: Array,
      default: function () {
        return [];
      },
      coerce: function (val) {
        return ['upload-btns'].concat(val || []);
      }
    },
    tag: {
      type: String,
      default: 'div'
    },
    // 业务属性值，最后会传送回去
    ywtag:{
      type: String,
      default: ''
    },
    model: {
      type: String,
      require: true,
      twoWay: true
    },
    type: {
      type: String,
      default: 'img'
    },
    evtname:{
      type: String,
      default: 'upload'
    },
    multiple: false
  },
  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);


        /**
        返回的是一个对象，然后获得内容就可以
        格式：
            obj.filepath ： 文件路径
            obj.ywtag  : 业务属性值
        **/
        var backObj = {};
        if (result.errorCode==0) {
          // 文件的路径，是数组的方式
          var fileJsonStr = "";
          if(result.data!=null && result.data.length>0){
            fileJsonStr = JSON.stringify(result.data);
          }

          backObj.filepath = fileJsonStr;
          backObj.ywtag = this.ywtag;

          this.model = fileJsonStr;
          // this.$dispatch('file-change', fileJsonStr);
          this.$dispatch('file-change', backObj);
        } else {
          this.MessageBox.alert(result.message); 
        }
      } catch(e) {
          this.MessageBox.alert(e.message); 
      }
    },
    upload: function (event) {
      document.getElementById(this.formId).submit();
    }
  }
};
</script>