<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="title">
        <i class="el-icon-upload" style="color: #409EFF;font-size: 60px"></i>
        <div class="title_span">
          {{title}}
        </div>
      </div>
    <el-form label-width="130px" label-position="right" style="width: 40%;margin:10px auto">
      <el-form-item label="订单名称">
        <el-input readonly v-model="orderName"></el-input>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input readonly v-model="upOrderCode"></el-input>
      </el-form-item>
      <el-form-item v-if="type==1" label="上传文件">
        <plupload
          v-if="showUpload"
          ref="pluploadBtn"
          :file-list="files"
          :limit="1"
          :upUrl="'apis/upload/orderFile'"
          :upType="2"
          :idOrder="upIdOrder"
          :order-code="upOrderCode"
          biz-type="trainModule"
          accept-files=".cdr,.ai,.ps,.eps,.zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp"
          @onChange="handleFileChange"
          @onUp='percentChange'
        />
      </el-form-item>
      <el-form-item v-if="type==4" label="上传资质文件">
        <plupload
          v-if="showUpload"
          ref="pluploadBtn"
          :file-list="files"
          :limit="1"
          :upUrl="'apis/upload/orderAttachFile'"
          :upType="2"
          :idOrder="upIdOrder"
          :order-code="upOrderCode"
          biz-type="trainModule"
          accept-files=".cdr,.ai,.ps,.eps,.zip,.rar,.xml,.txt,.pdf,.docx,.doc,.xlsx,.xls,.ppt,.pptx,.mp4,.mp3,.gif,.png,.jpg,.jpeg,.bmp"
          @onChange="handleFileChange"
          @onUp= 'percentChange'
        />
      </el-form-item>
    </el-form>
  </div>
  </div>

</template>

<script>
import plupload from '@/components/plupload/plupload.vue'
export default {
  name: 'Upload',
  components: {
    plupload
  },
  data() {
    return {
      title:"",
      showUpload: true,
      files: [],
      type:0,
      upIdOrder: '',
      upOrderCode: '',
      orderName: ''
    }
  },
  created() {
    var _that = this
    console.log(_that.$route.query)
    _that.upIdOrder = _that.$route.query.id
    _that.upOrderCode = _that.$route.query.orderCode
    _that.orderName = _that.$route.query.orderName
    _that.type = _that.$route.query.type;
    console.log(_that.type);
    if(_that.type==1){
      _that.title = "上传文件";
    }else if(_that.type==4){
      _that.title = "上传资质文件";
    }
    _that.$nextTick(() => {
      setTimeout(() => {
        console.log(_that.$refs.pluploadBtn.$refs.browseButton.$parent.$el.childNodes[5].childNodes[0].click())
        // _that.$refs.pluploadBtn.$refs.browseButton.$parent.$el.childNodes[5].childNodes[0].click()
      }, 1000)
    })
  },
  methods: {
    handleFileChange() {
      var userAgent = navigator.userAgent
      if (userAgent.indexOf('DnyERPBrowser') > 0) {
      } else {
        window.close()
      }
    },
    percentChange(percent) {
      console.log(percent)
      document.title = percent + '%-' + this.upOrderCode
    }
  }
}
</script>

<style scoped>
 .title{
   width: 100%;
   text-align: center;
 }
 .title .title_span{
   font-size: 24px;
   color: rgba(0,0,0,.85);
   font-weight: 500;
   line-height: 32px;
   margin-bottom: 16px;
   margin-top: 16px;
 }
</style>
