<template>
  <div>
    <div class="update-img" id="update-img">
      <button type="button" class="el-button el-button--primary el-button--small"><span>点击上传</span></button>
    </div>
    <div class="update-mp4" style="color: red;font-size: 12px;">{{ update_txt }}</div>
    <div slot="tip" class="el-upload__tip">{{tip}}</div>


    <div class="pop-win" v-if="isPop">
        <div class="bg"></div>
        <div class="pop-body">
          <el-progress style="width: 100px;" :percentage="percentage"></el-progress>
          <div class="content">
            {{ content }}
          </div>
        </div>
    </div>

  </div>


</template>


<script>
  import $ from 'jquery';
  import WebUploader from 'webuploader';
  var uploader = {};
    export default {
        name: "ui-uploadmp4",
        computed: {},
        props:{
            upUrl:{
                default:'',
                type:String
            },
            headers:{
                default: ()=> { return {};},
                type:Object
            },
            /**
             * 上传其他数据
             */
            updata:{
                default:()=>{ return {};},
                type:Object
            },
             tip:{
               default : "上传视频大小不能超过 200MB!",
               type:String
             },
            onSuccess:{
                default:(type,fileList)=>{},
                type:Function
            }
        },
        data() {
            return {
              isPop : false,
              chunkMax : 0,
                gid : "",
                chunkSize : 0,
                percentage : 0,
                content : "上传中..",
                update_txt : ""
            }
        },
        created() {

        },
        methods: {
             upWeb:function () {
               this.update_txt = "";
               var that = this;
               $("#update-img").html('<button type="button" class="el-button el-button--primary el-button--small"><span>点击上传</span></button>');
               uploader = WebUploader.create({
                 auto: true, // 自动上传
                 swf: '/js/webuploader/Uploader.swf', // swf
                 server: this.upUrl, //上传地址
                 pick: "#update-img", //上传demo
                 fileVal:"Filedata",
                 multiple: false,
                 compress: false,
                 chunked: true,
                 chunkSize: 1024 * 800,
                 auto: true,
                   accept: {
                       "title": "上传视频",
                       "extensions": "mp4,mov,avi,3gp,wmv,mkv,mpg,vob,flv",
                       mimeTypes: "video/mp4,video/quicktime,video/x-msvideo,video/3gpp,video/x-ms-wmv,audio/mpeg,video/x-flv"
                   }
               });
               uploader.on('fileQueued', (file)=> {
                      if(this.upStatus == 1) {
                          uploader.cancelFile(file);
                          this.$alert("等视频转化完毕,才能上传!", '系统提示');
                      } else {
                          this.chunkSize = 0;
                          this.isPop = true;
                          this.update_txt = "";
                          this.percentage = 0;
                          this.gid = this.generateUUID();
                      }
               });
               uploader.on('uploadBeforeSend', (obj, data, headers) => {
                  for(var i in that.headers) {
                      headers[i] = that.headers[i];
                  }
                   data.gid = that.gid;
                   that.chunkMax = data.chunks == null ? 0 : data.chunks;
               });

               uploader.on('uploadProgress',  (file, percentage) => {
                 var prInt = parseInt(percentage * 100);
                 this.percentage = prInt;
               });

               uploader.on('uploadAccept',(file, res)=>{
                   if(res.code == 200) {
                       this.upStatus = 1;
                       this.chunkSize ++;
                       //上传完毕
                       if (res.data.status == 2) {
                           this.update_txt = "保存以后，系统胡自动解析视频！";
                           this.upStatus = 0;
                           this.isPop = false;
                           this.$emit('onUpload',res.data);
                       } else {
                           this.upStatus = 0;
                           var prInt = parseInt((this.chunkSize / this.chunkMax) * 100);
                           this.percentage = prInt;
                       }
                   } else {
                       this.upStatus = 0;
                       this.isPop = false;
                       this.$alert(res.msg,'系统提示');
                       uploader.reset();
                   }
               });

               uploader.on('uploadSuccess', function (file,request) {

               });

               uploader.on("uploadError",function(file,reason){

               });

             },

            generateUUID:()=> {
                  var d = new Date().getTime();
                  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                      var r = (d + Math.random()*16)%16 | 0;
                      d = Math.floor(d/16);
                      return (c=='x' ? r : (r&0x3|0x8)).toString(16);
                  });
                  return uuid;
            }
        }
    }
</script>
<style>
    .update-img{font-size: 14px;color: #333;height: 40px;}
    .webuploader-container {
      position: relative;
    }
    .webuploader-element-invisible {
      position: absolute !important;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px,1px,1px,1px);
    }
    .webuploader-pick {
      position: relative;
      display: inline-block;
      cursor: pointer;
      padding: 10px 15px;
      color: #fff;
      border-radius: 3px;
      overflow: hidden;
    }
    .webuploader-pick-hover {

    }

    .webuploader-pick-disable {
      opacity: 0.6;
      pointer-events:none;
    }


</style>

<style scoped>
    .pop-win{ position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 999}
    .pop-win .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:.3;filter:alpha(opacity=30);}
    .pop-win .pop-body{border: 1px solid #f1f1f1;position:absolute;top:calc(50% - 60px);left:calc(50% - 70px);padding:30px;padding-right:50px;padding-left:50px;border-radius:10px;background:#fff;text-align:center}
    .pop-win .rotateIn{animation: rotate 1.5s linear infinite; }
    .content{font-size: 14px;}
    @keyframes rotate{
      from{transform: rotate(0deg)}
      to{transform: rotate(359deg)}
    }
    @keyframes posterScale{
      0% {transform: scale(0.9);}
      100% {transform: scale(1.2);}
    }
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
</style>
