☰

acfunlivedanmake

acfunlivedanmaku

// ==UserScript==
// @name     acfunlivedanmake
// @description acfunlivedanmaku
// @namespace syachiku
// @author       syachiku
// @match        https://live.acfun.cn/live/*
// @run-at document-end
// @grant   GM_addStyle
// @grant GM_getResourceURL
// @grant   GM_xmlhttpRequest
// @grant       GM_getValue
// @grant       GM_setValue
// @version  1.1.0
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/qs.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/uuidv4.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/min/moment.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/exceljs.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/build/clipboard-polyfill.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/keymaster.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/demo/easy-Danmaku.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.countdown.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/hotkeys.min.js
// ==/UserScript==



;(async function(){

    const config = {
      UID : parseInt(window.location.href.split('/').pop()),
      TOKEN : null,
      ACFUN_SERVER : 'https://www.acfun.cn',
      ACFUNLIVE_SERVER : 'https://live.acfun.cn',
      URLS : {
        USER : {
          INFO : '/user/info',
        },
        ACFUN_USER : {
          VUP : '/user/acfun_user_info_simplified',
          INFO : '/rest/pc-direct/user/userInfo',
          SPACE : '/u'
        },
        DOUGA : {
          COMMENT : '/rest/pc-direct/comment/list',
          VIDEO : '/v',
          ARTICLE : '/a',
          BANGUMI : '/bangumi'
        },
      },
      RESPONSE : {
        FIELD : {
          STATUS : 'code',
          MSG : 'message',
          DATA : 'data',
        },
        STATUS : {
          SUCCESS : 200,
        }
      }
    };
  
    const css = `
      /* base html */
      #header,#footer,
      .main>.list-container.outer-wrapper,
      .main>.list-container.outer-wrapper:before,
      .container-live>.left,
      .live-feed-watching,
      .container-live-feed-messages:before
      {display:none!important}
      #app>.main,
      .player-outer-wrapper,
      .player-outer-wrapper>.container-live,
      .player-outer-wrapper>.container-live>.container-live-feed.right,
      .player-outer-wrapper>.container-live>.container-live-feed.right>.live-feed,
      .player-outer-wrapper>.container-live>.container-live-feed.right>.live-feed>.container-live-feed-messages,
      .player-outer-wrapper>.container-live>.container-live-feed.right>.live-feed>.container-live-feed-messages>.live-feed-messages
      {
        display:block!important;
        position:fixed!important;
        width:100%!important;
        height:100%!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        top:0!important;
        bottom:0!important;
        word-break:break-all!important;
      }
      .live-feed-input{
        display : none !important;
      }
  
      @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
              0%{
                  transform: scale(1);  /*开始为原始大小*/
              }
              25%{
                  transform: scale(1.5); /*放大1.1倍*/
              }
              50%{
                  transform: scale(1);
              }
              75%{
                  transform: scale(1.5);
              }
          }
        .scale-anime{
              -webkit-animation: scaleDraw 5s ease-in-out;
          }
  
      .container-live-feed-messages-acfunlive:before{
        display:none!important;
      }
      .container-live-feed-messages-acfunlive{
        display:block!important;
        position:fixed!important;
        width:100%!important;
        height:100%!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        top:0!important;
        bottom:0!important;
        word-break:break-all!important;
      }
  
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical{
        height: 100%;
        overflow-y: auto;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal{
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        display : flex;
        flex-direction: column;
        flex-wrap: wrap;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical.active::-webkit-scrollbar{
        width: 10px;
        height: 1px;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical.inactive::-webkit-scrollbar{
        display:none;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-vertical::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
      }
  
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal.active::-webkit-scrollbar{
        height: 10px;
        width: 1px;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal.inactive::-webkit-scrollbar{
        display:none;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
      }
      .container-live-feed-messages-acfunlive .live-message-container.live-message-container-horizontal::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
      }
  
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup{
        display:flex;
        padding: 7px;
        width: 100%;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-popup-right{
        margin-left : 5px;
        width: 90%;
      }
  
      @keyframes clippath{
        0%, 100% {clip-path: inset(0 0 100% 0);}
        25% {clip-path: inset(0 100% 0 0);}
        50% {clip-path: inset(100% 0 0 0);}
        75% {clip-path: inset(0 0 0 100%);}
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-border-flow{
        position: relative;
      }
  
  
      .live-message-border-flow .border-flow-item::before,.live-message-border-flow .border-flow-item::after{
        content: "";
        position: absolute;
        transition: all .5s;
        animation: clippath 3s infinite linear;
      }
      .live-message-border-flow .border-flow-item::after{
        animation: clippath 3s -1.5s infinite linear;
      }
  
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku{
        margin-top: 3px;
        padding: 5px 12px 5px 12px;
        box-sizing: border-box;
        word-break: break-all;
        cursor: pointer;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga{
        margin-top: 10px;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .el-card{
        background: transparent;
        border: transparent;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 30%);
        border-radius: 0px;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .el-card__body{
        padding: 10px;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info{
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .douga-info-right{
        height : 100%;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .cover{
        display:inline-block;
        border-radius : 4px;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .cover >img{
        object-fit:cover;
          display: block;
          height: 100%;
          vertical-align: middle;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .title-container{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info.article .title{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info.article .description{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        filter : invert(100%);
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .up{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-danmaku .live-message-douga .douga-info .play-count{
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-gift{
        width: max-content;
        display: table-cell;
          margin-top: 3px;
          padding: 5px 12px 5px 12px;
          box-sizing: border-box;
          word-break: break-all;
      }
      .container-live-feed-messages-acfunlive .live-message-container .live-message-popup .live-message-gift .live-message-gift-count{
          pointer-events: none;
          display: inline-block;
      }
  
      .user-info-badge{
          border-radius: 4px;
          padding-left: 4px;
          padding-right: 4px;
          color: white;
      }
      .user-info-badge-green{
          background-image: linear-gradient(30deg, #14bd5a, #40E584, #01b54c);
      }
      .user-info-badge-blue{
          background-image: linear-gradient(30deg, #32A9DE, #4fbdef, #0e9ada);
      }
      .user-info-badge-orange{
          background-image: linear-gradient(30deg, #eb9f19, #e6a01b, #f19b00);
      }
      .user-info-badge-red{
          background-image: linear-gradient(30deg, #d43535, #e25537, #e94a47);
      }
      .user-info-badge-purple{
          background-image: linear-gradient(30deg, #4801FF, #7918F2, #AC32E4);
      }
      .user-info-badge-black{
          background-image: linear-gradient(30deg, #5e659d, #5e659d, #3c4270);
      }
      .user-info-badge-vup{
          background-image: linear-gradient(30deg, #32A9DE, #4fbdef, #0e9ada);
      }
      .user-info-username{
      }
  
  
      .container-live-feed-messages-acfunlive .live-message-container .live-message-inline{
        text-align : center;
        display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
      }
  
      .container-live-feed-messages-acfunlive .live-feed-dropmenu.live-feed-dropmenu-horizontal{
        display:block;
        position:absolute;
        top : 50px;
        left : 50px;
        z-index : 999999;
      }
      .container-live-feed-messages-acfunlive .live-feed-dropmenu.live-feed-dropmenu-vertical{
        display:block;
        position:absolute;
        top : 50px;
        right : 50px;
        z-index : 999999;
      }
  
      /*.live-feed-input:hover{
          opacity : 1;
      }*/
  
      @font-face{
        font-family:element-icons;
        src:url('https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/fonts/element-icons.ttf');
      }
  
      .lottery-form-dialog {
        z-index : 999999;
        height: 400px;
      }
  
      .lottery-form-dialog .el-dialog__body{
        height : 80%;
        overflow-y: auto;
      }
  
      .lottery-form .gift-selector .el-select-dropdown__item{
        height : 40px;
        line-height : 40px;
      }
  
      .lottery-form .el-divider{
        margin-top : 40px;
      }
      .lottery-form .el-divider .el-divider__text{
        color : #409EFF;
      }
      .lottery-form .douga-list-wrapper{
        overflow:auto;
        height:200px;
      }
  
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item.video .douga-info{
        height : 100px;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item.article .douga-info{
        height : 60px;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item .douga-info .douga-info-right{
        height : 100%;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item .cover{
        display:inline-block;
        height:100px;
        width:177px;
        line-height:100px;
        border-radius : 4px;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item .cover >img{
        object-fit:cover;
          display: block;
          height: 100%;
          vertical-align: middle;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item.video .title{
        height:60px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-weight : bold;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item.article .title{
        height:40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-decoration : underline;
        font-weight : bold;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item .el-card:hover{
        background-color : #409effb0;
        cursor:pointer;
        color : white;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item.active .el-timeline-item__tail{
        border-left: 2px solid #409EFF;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item.active .el-timeline-item__node{
        background-color : #409EFF;
      }
      .lottery-form .douga-list-wrapper .douga-list .douga-list-item.active .el-card{
        color : white;
        background-color : #409eff;
      }
  
      .lottery-table .lottery-status-finish{
        background: #8aec53;
      }
  
      .lottery-table-dialog{
        z-index : 999999;
      }
  
      .lottery-table-dialog .el-dialog__body{
        height : 80%;
        overflow-y: auto;
      }
  
      .user-table-dialog{
        z-index : 999999;
      }
  
      .user-table-dialog .el-dialog__body{
        height : 80%;
        overflow-y: auto;
      }
  
  
      .lottery-countdown-dialog{
        z-index : 999999;
        background-color : rgba(0,0,0,0) !important;
        box-shadow : none !important;
      }
      .lottery-countdown-dialog button[data-setter] {
          outline: none;
          background: transparent;
          border: none;
          font-family: 'Roboto';
          font-weight: 300;
          font-size: 18px;
          width: 25px;
          height: 30px;
          color: #409EFF;
          cursor: pointer;
      }
      .lottery-countdown-dialog button[data-setter]:hover {
          opacity: 0.5;
      }
      .lottery-countdown-dialog .container {
          position: relative;
          top: 30px;
          width: 300px;
          margin: 0 auto;
      }
      .lottery-countdown-dialog .setters {
          position: absolute;
          left: 85px;
          top: 75px;
      }
      .lottery-countdown-dialog .minutes-set {
          float: left;
          margin-right: 28px;
      }
      .lottery-countdown-dialog .seconds-set {
          float: right;
      }
      .lottery-countdown-dialog .controlls {
          position: absolute;
          left: 75px;
          top: 105px;
          text-align: center;
      }
      .lottery-countdown-dialog .display-remain-time {
          font-family: 'Roboto';
          font-weight: bold;
          font-size: 65px;
          color: #409EFF;
      }
      .lottery-countdown-dialog #pause {
          outline: none;
          background: transparent;
          border: none;
          margin-top: 10px;
          width: 50px;
          height: 50px;
          position: relative;
      }
      .lottery-countdown-dialog .play::before {
          display: block;
          content: "";
          position: absolute;
          top: 8px;
          left: 16px;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-left: 22px solid #409EFF;
      }
      .lottery-countdown-dialog .pause::after {
          content: "";
          position: absolute;
          top: 8px;
          left: 12px;
          width: 15px;
          height: 30px;
          background-color: transparent;
          border-radius: 1px;
          border: 5px solid #409EFF;
          border-top: none;
          border-bottom: none;
      }
      .lottery-countdown-dialog #pause:hover {
          opacity: 0.8;
      }
      .lottery-countdown-dialog .e-c-base {
          fill: none;
          stroke: #B6B6B6;
          stroke-width: 15px;
      }
      .lottery-countdown-dialog .e-c-progress {
          fill: none;
          stroke: #409EFF;
          stroke-width: 15px;
          transition: stroke-dashoffset 0.7s;
      }
      .lottery-countdown-dialog .e-c-pointer {
          fill: #FFF;
          stroke: #409EFF;
          stroke-width: 2px;
      }
      .lottery-countdown-dialog #e-pointer {
          transition: transform 0.7s;
      }
  
      .lottery-start-dialog{
        z-index : 999999;
      }
      .lottery-start-dialog .el-carousel__item{
        background-color: #99a9bf;
        opacity: 0.75;
        margin: 0;
        display:flex;
        width : 250px;
        justify-content:center;
        align-items:center;
        flex-direction:column;
      }
  
      .lottery-start-dialog .el-dialog__header{
        display:none;
      }
      .lottery-start-dialog .el-carousel__item.highlight{
        background-color: gold;
      }
      .lottery-start-dialog .el-carousel__item .nickname{
        font-size : 20px;
        color : white;
        text-shadow : 0px 2px 2px black, 0px -2px 2px black, 2px 0px 2px black, -2px 0px 2px black, 2px 2px 2px black, -2px -2px 2px black, 2px -2px 2px black, -2px 2px 2px black;
        font-weight: bold;
      }
  
      .login-form-dialog {
        z-index : 999999;
        height: 400px;
      }
  
      .audio-form-dialog {
        z-index : 999999;
        height: 400px;
      }
  
      .audio-form-dialog .el-dialog__body{
        height : 80%;
        overflow-y: auto;
      }
  
      .interaction-form-dialog {
        z-index : 999999;
        height: 400px;
      }
  
      .interaction-form-dialog .el-dialog__body{
        height : 80%;
        overflow-y: auto;
      }
  
      .interaction-form .el-divider .el-divider__text{
        color : #409EFF;
      }
  
  
      .guess-form-dialog {
        z-index : 999999;
        height: 400px;
      }
  
      .guess-form-dialog .el-dialog__body{
        height : 100%;
        overflow-y: auto;
      }
  
      .guess-start-dialog {
        z-index : 999999;
        height: 400px;
      }
  
      .guess-start-dialog .el-dialog__body{
        height : 100%;
        overflow-y: auto;
      }
  
      .guess-danmaku-dialog {
        z-index : 999999;
        height: 400px;
      }
  
      .guess-danmaku-dialog .el-dialog__body{
        height : 100%;
        overflow-y: auto;
      }
  
      .guess-danmaku-dialog .guess-danmaku-container{
        height : 100%;
        width : 100%;
      }
  
      .guess-danmaku-dialog .guess-danmaku-danmu{
        display : flex;
        color: rgb(255, 255, 255);
          font-size: 25px;
          font-family: buding;
          text-shadow: rgb(0 0 0) 0px 1px 1px, rgb(0 0 0) 0px -1px 1px, rgb(0 0 0) 1px 0px 1px, rgb(0 0 0) -1px 0px 1px, rgb(0 0 0) 1px 1px 1px, rgb(0 0 0) -1px -1px 1px, rgb(0 0 0) 1px -1px 1px, rgb(0 0 0) -1px 1px 1px;
        cursor : pointer;
      }
  
      .guess-danmaku-dialog .guess-danmaku-danmu.is-select{
        border : 1px solid red;
      }
  
      .guess-danmaku-dialog .guess-danmaku-danmu >img{
        width : 20px;
        height : 20px;
        border-radius : 10px;
      }
  
  
      .guess-table-dialog {
        z-index : 999999;
        height: 400px;
      }
      .guess-table-dialog .el-dialog__body{
        height : 100%;
        overflow-y: auto;
      }
  
    `;
  
    GM_addStyle(css);
    var audio = null;
  
  
  
    // 检查token是否存在
    var token = await GM_getValue("token");
    if(token){
      config.TOKEN = token;
    }
  
  
    // 禁止播放视频
    function disableVideos(){
      window.setInterval(function(){
        let videoEles = document.querySelectorAll('video');
        for(let videoEle of videoEles){
          videoEle.src = null;
        }
      }, 500);
  
    }
  
    // 是否为空
    function isNullOrEmpty(val){
      return _.isUndefined(val) || _.isNull(val) || _.isNaN(val) || (((_.isObject(val) && !_.isDate(val)) || _.isArray(val) || _.isString(val)) && _.isEmpty(val))
    }
  
    // 通用请求
    function commonRequrest(url, method, form, raw, callback, headers){
      var isSuccess = false;
      var data = null;
      if(!headers){
        headers = {};
      }
  
      if(!raw){
  
        if(method == 'post'){
  
          headers['Content-Type'] = 'application/x-www-form-urlencoded';
          if(form){
            form = Qs.stringify(form);
          }
  
        }
  
      }
  
      if(method == 'get' && form){
        form = Qs.stringify(form);
        url += '?' + form;
      }
  
      // 获取了token
      if(config.TOKEN){
        headers['Authorization'] = `Token ${config.TOKEN}`;
      }
  
      GM_xmlhttpRequest({
        synchronous : !_.isFunction(callback),
        method : method,
        url : url,
        data : form,
        headers : headers,
        onload : function(res){
  
          // 200
          if(res.status==200){
            if(raw){
              callback(true, res.responseText);
            }
            else{
              res = JSON.parse(res.responseText);
              isSuccess = res[config.RESPONSE.FIELD.STATUS] == config.RESPONSE.STATUS.SUCCESS;
              data = res[config.RESPONSE.FIELD.DATA];
  
              if(_.isFunction(callback)){
                callback(isSuccess, data);
              }
            }
          }
          else{
            if(_.isFunction(callback)){
              callback(isSuccess, data);
            }
          }
        },
        onerror : function(){
          if(_.isFunction(callback)){
            callback(isSuccess, data);
          }
        },
        onabort : function(){
          if(_.isFunction(callback)){
            callback(isSuccess, data);
          }
        },
      });
  
      return [isSuccess, data];
    }
  
    function formatText(text, params){
  
      for(var key in params){
        text = text.replace(new RegExp('\\$\\{'+ key +'\\}', 'g'), params[key]);
      }
  
      return text;
  
    }
  
    function addCssResource(url){
  
      commonRequrest(url, 'get', null, true, function(isSuccess, css){
        if(isSuccess){
          GM_addStyle(css);
        }
      })
    }
  
    // 添加element-ui样式
    addCssResource('https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css');
  
  
    class CallbackManager{
      constructor(feedback){
        this.callbacks = {};
        this.callbackGroupMapper = {};
      }
  
      register(group, func, params, first){
        if(!(group in this.callbacks)){
          this.callbacks[group] = [];
        }
  
        var callback = {
          id : uuidv4(),
          func : func,
          params : params
        };
  
        // 添加到最前
        if(first){
          this.callbacks[group].splice(0, 0, callback);
        }
        else{
          this.callbacks[group].push(callback);
        }
        this.callbackGroupMapper[callback.id] = group;
  
        return callback.id;
  
      }
  
      cancel(handler){
  
        if(!(handler in this.callbackGroupMapper) || !(this.callbackGroupMapper[handler] in this.callbacks)){
          return;
        }
  
        var findIndex = _.findIndex(this.callbacks[this.callbackGroupMapper[handler]], {id:handler});
        if(findIndex==-1){
          return;
        }
  
        this.callbacks[this.callbackGroupMapper[handler]].splice(findIndex, 1);
        delete this.callbackGroupMapper[handler];
  
      }
  
      feed(group, data){
  
        if(!(group in this.callbacks)){
          return;
        }
  
  
  
        this.callbacks[group].forEach(function(callback){
  
          callback.func(data, callback.params);
  
        });
  
  
      }
  
    }
  
    var callbackManager = new CallbackManager();
  
  
    const acSeriesPattern = /[aA][aAbBcC][=号]?\s*(\d+)/;
    function extractAcSeries(text){
      var match = text.match(acSeriesPattern);
      if(match){
        return parseInt(match[match.length-1]);
      }
      else{
        return null;
      }
    }
    const giftPattern = /送出((?<count>\d+)个)?(?<name>.+)/;
    function extractGift(text){
      var match = text.match(giftPattern);
      if(match){
        return {
          name : match.groups.name,
          count : match.groups.count?parseInt(match.groups.count):1,
        };
      }
      else{
        return null;
      }
    }
    const modalClassNamePattern = /medal-lv-(?<level>\d+)/;
    function extractLevel(text){
      var match = text.match(modalClassNamePattern);
      if(match){
        return parseInt(match.groups.level);
      }
      else{
        return null;
      }
    }
    const commandPattern = /^\/(?<command>[^s]+)\s+(?<text>[^s]+)$/;
    function extractCommand(text){
      var match = text.match(commandPattern);
      if(match){
        return match.groups;
      }
      else{
        return null;
      }
    }
  
  
    var userInfo = {};
  
    var vupInfo = {};
  
    var refreshTimeoutHandler = null;
  
    // 开始
    function start(){
  
    
        // 监听弹幕添加
        var messageContainer = document.querySelector('.live-feed-messages');
        var observer = new MutationObserver(function(mutations, observer){
  
  
          // 遍历改变
          mutations.forEach(function(mutation){
            // 子节点发生变化
            if(mutation.type == 'childList'){
  
              if(refreshTimeoutHandler){
                window.clearTimeout(refreshTimeoutHandler);
              }
  
              // 3分钟内没接收到信息，刷新
              refreshTimeoutHandler = window.setTimeout(()=>window.location.reload(), 3 * 60 * 1000);
  
              // 遍历新增节点
              mutation.addedNodes.forEach(function(node){
  
                // 获取用户名元素
                var userEle = node.querySelector('.nickname');
                var userName = userEle.innerText;
                var uid = null;
                var badgeName = null;
                var badgeLevel = null;
                var badgeColor = null;
  
                // 查看是否有徽章
                var badgeContainerEle = node.querySelector('.medal-wrapper');
                if(badgeContainerEle){
  
                  badgeName = badgeContainerEle.querySelector('.medal-name').innerText;
  
                  badgeContainerEle.classList.forEach(function(className){
  
                    if(extractLevel(className)!=null){
                      badgeLevel = extractLevel(className);
                    }
  
                  });
  
                  if(badgeLevel >= 1 && badgeLevel <= 3){
                    badgeColor = 'green';
                  }
                  else if(badgeLevel >= 4 && badgeLevel <= 6){
                    badgeColor = 'blue';
                  }
                  else if(badgeLevel >= 7 && badgeLevel <= 9){
                    badgeColor = 'orange';
                  }
                  else if(badgeLevel >= 10 && badgeLevel <= 12){
                    badgeColor = 'red';
                  }
                  else if(badgeLevel >= 13 && badgeLevel <= 15){
                    badgeColor = 'purple';
                  }
                  else if(badgeLevel >= 16 && badgeLevel <= 20){
                    badgeColor = 'black';
                  }
  
  
                }
  
                if(userEle && userEle.attributes['data-user-id']){
                  uid = parseInt(userEle.attributes['data-user-id'].value);
                }
  
                var interaction = {
                  id : uuidv4(),
                  sendTime : new Date(),
                };
                // 弹幕
                if(node.classList.contains('comment')){
                  interaction.type = 'danmaku';
                  interaction.content = _.trimStart(node.querySelector('.comment-text').innerText, '：');
                }
                // 送礼
                else if(node.classList.contains('gift')){
                  var giftText = userEle.nextElementSibling.innerText;
                  var gift = extractGift(giftText);
  
                  interaction.type = 'gift';
                  interaction.giftName = gift.name;
                  interaction.giftCount = gift.count;
                }
                // 点赞
                else if(node.classList.contains('like')){
                  interaction.type = 'like';
                }
                // 进入直播间
                else if(node.classList.contains('user-enter')){
                  interaction.type = 'enterroom';
                }
                // 关注了主播
                else if(node.classList.contains('follow')){
                  interaction.type = 'follow';
                }
                // 加入守护团
                else if(node.classList.contains('join-club')){
                  interaction.type = 'joinclub';
                }
  
                // vup
                if(uid in vupInfo){
                  addBadgeToUser(userEle);
                }
  
                if(uid in userInfo){
                  callbackManager.feed('message', {
                    uid : uid,
                    vup : uid in vupInfo,
                    userName : userName,
                    badgeName : badgeName,
                    badgeLevel : badgeLevel,
                    badgeColor : badgeColor,
                    photo : userInfo[uid].photo,
                    interaction : interaction,
                  });
  
                }
                else{
                  // 获取用户信息
                  commonRequrest(config.ACFUNLIVE_SERVER + config.URLS.ACFUN_USER.INFO + `?userId=${uid}`, 'get', null, true, function(isSuccess, data){
  
                    var photo = null;
                    if(data){
                      data = JSON.parse(data);
                      if(data.result == 0){
                        photo = data.profile.headUrl;
                      }
                    }
                    userInfo[uid] = {
                      userName : userName,
                      photo : photo,
                    };
  
                    callbackManager.feed('message', {
                      uid : uid,
                      vup : uid in vupInfo,
                      userName : userName,
                      photo : userInfo[uid].photo,
                      badgeName : badgeName,
                      badgeLevel : badgeLevel,
                      badgeColor : badgeColor,
                      interaction : interaction,
                    });
  
                  });
                }
  
              });
            }
          });
        });
        observer.observe(messageContainer, {childList:true});
  
    }
  
  
    // 加载Vue实例
    function loadVue(){
  
      var vue = null;
  
      // 获取礼物列表
      var giftList = [];
      var giftContainerEles = document.querySelectorAll('.item-gift');
      giftContainerEles.forEach(function(giftContainerEle, giftIndex){
        var gift = {
          index : giftIndex,
          id : giftContainerEle.attributes['data-gift-id'].value,
          name : giftContainerEle.querySelector('.name').textContent,
          price : _.parseInt(giftContainerEle.attributes['data-gift-price'].value),
          img : giftContainerEle.querySelector('img').attributes['src'].value,
        };
  
        // 设置香蕉的价格为0
        if(gift.name == '香蕉'){
          gift.price = 0;
        }
  
        giftList.push(gift);
  
      });
  
      // 无法获取礼物列表
      if(giftList.length==0){
        return;
      }
  
      // 将礼物按照AC币排序
      giftList = _.sortBy(giftList, ['price', 'index']);
      // 隐藏原有弹幕
      document.querySelector('.container-live-feed-messages').style.setProperty('display', 'none', 'important');
  
  
      // 添加悬浮菜单
      // 容器
      var containerEle = document.querySelector('.container-live-feed .live-feed');
      // 悬浮菜单元素
      var menuEle = document.createElement('div');
  
      menuEle.className = 'container-live-feed-messages-acfunlive';
      menuEle.innerHTML = `
  
        <div :class="{'live-message-container':true, 'active':mouseOn, 'inactive':!mouseOn, 'live-message-container-horizontal':interactionFormData.direction=='horizontal', 'live-message-container-vertical':interactionFormData.direction!='horizontal'}" :style="backgroundStyle">
  
          <template v-for="message in messageData">
  
            <!--弹幕-->
            <template v-if="message.interaction.type=='danmaku' && message.interaction.content">
              <div class="live-message-popup" :style="danmakuMessageContainerStyle" :key="message.interaction.id">
                <div class="live-message-popup-left">
                  <el-avatar shape="circle" fit="fill" :size="userPhotoSize" :src="message.photo"></el-avatar>
                </div>
                <div class="live-message-popup-right">
                  <div class="user-info-container">
                    <span class="user-info-badge user-info-badge-vup" :style="userBadgeStyle" v-if="message.vup">VUP</span>
                    <span :style="userBadgeStyle" :class="{'user-info-badge':true,'user-info-badge-black':message.badgeColor=='black','user-info-badge-purple':message.badgeColor=='purple','user-info-badge-red':message.badgeColor=='red','user-info-badge-orange':message.badgeColor=='orange','user-info-badge-blue':message.badgeColor=='blue','user-info-badge-green':message.badgeColor=='green'}" v-if="message.badgeName">LV.{{message.badgeLevel}} {{message.badgeName}}</span>
                    <span class="user-info-username" :style="userNameMessageStyle">{{message.userName}}</span>
                  </div>
                  <div :class="danmakuMessageClass.concat([!lastDanmakuMessage || message.interaction.id == lastDanmakuMessage.interaction.id?'active':'inactive'])" :style="danmakuMessageStyle">
                    <div class="border-flow-item" :style="borderFlowItemStyle"></div>
                    <span @click="clickMessage(message)">{{message.interaction.content}}</span>
                    <div class="live-message-douga" @click="clickMessage(message, true)" v-if="message.interaction.douga">
                      <el-card  :title="message.interaction.douga.title" :style="danmakuDougaMessageStyle">
                        <el-row :class="{'douga-info':true, 'article':message.interaction.douga.type == 'article', 'video':['video', 'bangumi'].indexOf(message.interaction.douga.type) != -1}" :style="danmakuDougaContainerStyle">
  
                          <template v-if="message.interaction.douga.type == 'video'">
                            <div class="douga-info-left" :style="danmakuDougaLeftColStyle">
                              <span class="cover" :style="danmakuDougaCoverStyle">
                                <img :src="message.interaction.douga.cover">
                              </span>
                            </div>
                            <div class="douga-info-right" :style="danmakuDougaRightColStyle">
                              <div class="title-container" :style="danmakuDougaTitleStyle"><span>{{message.interaction.douga.title}}</span></div>
                              <div class="info" :style="danmakuDougaInfoStyle">
                                <p class="up"><span>up主：</span><span>{{message.interaction.douga.userName}}</span></p>
                                <p class="play-count" :style="danmakuDougaInfoStyle">播放量：<span>{{message.interaction.douga.playCountText}}</span></p>
                              </div>
                            </div>
                          </template>
  
                          <template v-if="message.interaction.douga.type == 'article'">
                            <div class="title-container" :style="danmakuDougaTitleStyle">
                              <p class="title">{{message.interaction.douga.title}}</p>
                              <p class="description" :style="danmakuDougaDescriptionStyle">{{message.interaction.douga.description}}</p>
                            </div>
  
                            <div class="info" :style="danmakuDougaInfoStyle">
                              <p class="up"><span>up主：</span><span>{{message.interaction.douga.userName}}</span></p>
                              <p class="play-count" :style="danmakuDougaInfoStyle">访问量：<span>{{message.interaction.douga.playCountText}}</span></p>
                            </div>
                          </template>
  
                          <template v-if="message.interaction.douga.type == 'bangumi'">
                            <div class="douga-info-left" :style="danmakuDougaLeftColStyle">
                              <span class="cover" :style="danmakuDougaCoverStyle">
                                <img :src="message.interaction.douga.cover">
                              </span>
                            </div>
                            <div class="douga-info-right" :style="danmakuDougaRightColStyle">
                              <div class="title-container" :style="danmakuDougaTitleStyle">
                                <el-tag effect="dark" type="danger" v-if="message.interaction.douga.acfunOnly">A站独播</el-tag>
                                <span>{{message.interaction.douga.title}}</span>
                              </div>
                              <div class="info" :style="danmakuDougaInfoStyle">
                                <p class="stow-count" :style="danmakuDougaInfoStyle">追番人数：<span>{{message.interaction.douga.stowCountText}}</span></p>
                                <p class="play-count" :style="danmakuDougaInfoStyle">播放量：<span>{{message.interaction.douga.playCountText}}</span></p>
                              </div>
                            </div>
                          </template>
                        </el-row>
                      </el-card>
  
                    </div>
                  </div>
  
                </div>
              </div>
  
            </template>
  
            <!--点赞-->
            <template v-if="message.interaction.type=='like' && message.interaction.content">
              <div class="live-message-inline" :style="likeMessageContainerStyle" :key="message.interaction.id">
                <span :style="likeMessageStyle">
                  <span v-if="message.vup">【VUP】</span>
                  <span class="user-info-username">{{message.userName}}</span>
                  <span>{{message.interaction.content}}</span>
                </span>
              </div>
  
            </template>
  
            <!--礼物-->
            <template v-if="message.interaction.type=='gift' && message.interaction.content">
              <div class="live-message-popup" :style="giftMessageContainerStyle" :key="message.interaction.id">
                <div class="live-message-popup-left">
                  <el-avatar shape="circle" fit="fill" :size="userPhotoSize" :src="message.photo"></el-avatar>
                </div>
                <div class="live-message-popup-right">
                  <div class="user-info-container">
                    <span :style="userBadgeStyle" class="user-info-badge user-info-badge-vup" v-if="message.vup">VUP</span>
                    <span :style="userBadgeStyle" :class="{'user-info-badge':true,'user-info-badge-black':message.badgeColor=='black','user-info-badge-purple':message.badgeColor=='purple','user-info-badge-red':message.badgeColor=='red','user-info-badge-orange':message.badgeColor=='orange','user-info-badge-blue':message.badgeColor=='blue','user-info-badge-green':message.badgeColor=='green'}" v-if="message.badgeName">LV.{{message.badgeLevel}} {{message.badgeName}}</span>
                    <span class="user-info-username" :style="userNameMessageStyle">{{message.userName}}</span>
                  </div>
                  <div class="live-message-gift" :style="giftMessageStyle">
                    <span >{{message.interaction.content}}</span>
                    <el-avatar shape="square" :size="giftImageSize" fit="fill" :src="giftNameMapper[message.interaction.giftName].img" style="background-color:transparent;vertical-align:bottom;"></el-avatar>
                    <span :class="{'live-message-gift-count':true, 'scale-anime':message.interaction.doAnime}" v-if="message.interaction.giftCount>0" :style="giftCountStyle">
                      x{{message.interaction.giftCount}}
                    </span>
                  </div>
                </div>
              </div>
  
            </template>
  
            <!--进入直播间-->
            <template v-if="message.interaction.type=='enterroom' && message.interaction.content">
              <div class="live-message-inline" :style="enterroomMessageContainerStyle" :key="message.interaction.id">
                <span :style="enterroomMessageStyle">
                  <span v-if="message.vup">【VUP】</span>
                  <span class="user-info-username">{{message.userName}}</span>
                  <span class="live-message-enterroom">{{message.interaction.content}}</span>
                </span>
              </div>
  
            </template>
  
            <!--关注-->
            <template v-if="message.interaction.type=='follow' && message.interaction.content">
              <div class="live-message-inline" :style="followMessageContainerStyle" :key="message.interaction.id">
                <span :style="followMessageStyle">
                  <span v-if="message.vup">【VUP】</span>
                  <span class="user-info-username">{{message.userName}}</span>
                  <span class="live-message-follow">{{message.interaction.content}}</span>
                </span>
              </div>
  
            </template>
  
            <!--加入守护团-->
            <template v-if="message.interaction.type=='joinclub' && message.interaction.content">
              <div class="live-message-inline" :style="joinclubMessageContainerStyle" :key="message.interaction.id">
                <span :style="joinclubMessageStyle">
                  <span v-if="message.vup">【VUP】</span>
                  <span class="user-info-username">{{message.userName}}</span>
                  <span class="live-message-joinclub">{{message.interaction.content}}</span>
                </span>
              </div>
  
            </template>
  
          </template>
  
  
        </div>
  
        <div :class="{'live-feed-dropmenu':true, 'live-feed-dropmenu-horizontal':interactionFormData.direction=='horizontal','live-feed-dropmenu-vertical':interactionFormData.direction!='horizontal'}">
          <el-dropdown trigger="click" @command="handleDropdownMenuClick">
            <span class="el-dropdown-link" style="font-size:32px;">
              <i class="el-icon-menu"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit" command="editInteraction">弹幕编辑</el-dropdown-item>
              <el-dropdown-item>
                <el-dropdown trigger="hover" placement="right-start"  trigger="click" @command="handleDropdownMenuClick">
                  <span class="el-icon-lollipop">
                    直播抽奖<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-circle-plus" command="newLottery">添加抽奖</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-info" command="lotteryTable">查看抽奖</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-download" command="exportLottery">导出名单</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-dropdown-item>
              <!-- 
              <el-dropdown-item>
                <el-dropdown trigger="hover" placement="right-start"  trigger="click" @command="handleDropdownMenuClick">
                  <span class="el-icon-chat-dot-round">
                    直播竞猜<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-circle-plus" command="newGuess">添加竞猜</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-info" command="guessTable">查看竞猜</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-download" command="exportGuess">导出名单</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-dropdown-item>
              -->
              <el-dropdown-item icon="el-icon-notebook-1" command="help">帮助文档</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
  
          <el-dialog v-dialog-drag title="查看抽奖" :visible.sync="lotteryTableDialogVisible" :modal="false" width="550px" custom-class="lottery-table-dialog" :close-on-click-modal="false">
            <el-table :data="lotteryTableData" style="width: 100%" class="lottery-table" :row-class-name="lotteryTableRowClassName">
              <el-table-column prop="name" label="奖品名称" :width="150">
              </el-table-column>
              <el-table-column prop="startTimeText" label="开奖时间" :width="100">
              </el-table-column>
              <el-table-column label="操作" :width="250">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleLotteryModify(scope.row)">编辑</el-button>
                  <el-button type="text" @click="handleLotteryCopy(scope.row)">复制</el-button>
                  <el-button type="text" @click="handleLotteryCandidatesCheck(scope.row)" v-if="scope.row.status == '未开始'">查看候选名单</el-button>
                  <el-button type="text" @click="handleLotteryWinnersCheck(scope.row)" v-if="scope.row.status == '已结束'">查看中奖名单</el-button>
                </template>
              </el-table-column>
  
            </el-table>
  
          </el-dialog>
  
          <el-dialog v-dialog-drag :title="lotteryFormDialogTitle" :visible.sync="lotteryFormDialogVisible" :modal="false" width="550px" custom-class="lottery-form-dialog" :close-on-click-modal="false">
            <el-form :model="lotteryFormData" class="lottery-form" ref="form" :rules="lotteryFormRules" @submit.native.prevent  v-loading="lotteryFormData.loading" :element-loading-text="lotteryFormData.loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <el-form-item label="奖品名称" label-width="130px" prop="name">
                <el-input v-model="lotteryFormData.name" autocomplete="off" style="width:100%;"></el-input>
              </el-form-item>
              <el-form-item>
                <el-col :span="11">
                  <el-form-item label="抽奖倒计时（秒）" label-width="130px" prop="countdown">
                    <el-input-number size="medium" v-model="lotteryFormData.countdown" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="13">
                  <el-form-item label="开奖时间" label-width="100px" prop="startTime">
                    <el-time-picker v-model="lotteryFormData.startTime" :picker-options="timePickerOptions" style="width:100%;">
                    </el-time-picker>
                  </el-form-item>
                </el-row>
              </el-form-item>
              <el-form-item label="互斥抽奖" label-width="130px" prop="mutualLotteryList">
                <el-select v-model="lotteryFormData.mutualLotteryList" multiple placeholder="请选择互斥的抽奖" style="width:100%;">
                  <el-option
                    :value="lottery.id"
                    :label="lottery.name"
                    :key="lottery.id"
                    v-if="lottery.id != lotteryFormData.id"
                    v-for="lottery in lotteryTableData"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!--
              <el-form-item label="抽奖权重" label-width="130px" prop="weight">
                <el-switch v-model="lotteryFormData.weight" active-text="加权" inactive-text="等权">
                </el-switch>
              </el-form-item>
              -->
  
              <el-form-item>
                <el-col :span="13">
                  <el-form-item label="牌子名称" label-width="130px" prop="medalName">
                    <el-input v-model="lotteryFormData.medalName" autocomplete="off" style="width:100%;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="牌子等级" label-width="130px" prop="medalLevel">
                    <el-input-number v-model="lotteryFormData.medalLevel" autocomplete="off"  :min="0" controls-position="right" style="width:100%;"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-form-item>
  
              <el-form-item label="抽奖来源" label-width="130px" prop="source">
                <el-radio-group v-model="lotteryFormData.source" style="width:100%;">
                  <el-radio label="livestream">直播间抽奖</el-radio>
                  <el-radio label="douga">稿件抽奖</el-radio>
                </el-radio-group>
              </el-form-item>
  
  
              <template v-if="lotteryFormData.source == 'livestream'">
  
                <el-form-item label="抽奖参与方式" label-width="130px" prop="joinMethod">
                  <el-checkbox-group v-model="lotteryFormData.joinMethod" style="width:100%;">
                    <el-checkbox label="danmaku">弹幕</el-checkbox>
                    <el-checkbox label="gift">礼物</el-checkbox>
                    <el-checkbox label="like">点赞</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
  
                <!-- 弹幕 -->
                <template v-if="lotteryFormData.joinMethod.indexOf('danmaku')!=-1">
                  <el-form-item label="抽奖参与关键词" label-width="130px" prop="joinKeyword">
                    <el-input v-model="lotteryFormData.joinKeyword" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
                  </el-form-item>
                </template>
  
                <!-- 礼物 -->
                <template v-if="lotteryFormData.joinMethod.indexOf('gift')!=-1">
                  <el-form-item label="抽奖参与礼物" label-width="130px" prop="joinGiftList">
                    <el-select v-model="lotteryFormData.joinGiftList" multiple placeholder="请选择礼物" popper-class="gift-selector" style="width:100%;">
                      <el-option
                        :label="gift.name"
                        :value="gift.id"
                        :key="gift.id"
                        v-for="gift in giftList"
                      >
                        <el-row>
                          <el-col :span="8">
                            <el-avatar shape="square" :size="40" fit="fill" :src="gift.img" style="background-color:white;"></el-avatar>
                          </el-col>
                          <el-col :span="6" :offset="4">
                            <span>{{gift.name}}</span>
                          </el-col>
                          <el-col :span="6">
                            <span v-if="gift.price>0">（{{gift.price}}AC币）</span>
                          </el-col>
                        </el-row>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </template>
              <template v-else-if="lotteryFormData.source == 'douga'">
  
                <el-form-item label="抽奖稿件类型" label-width="130px" prop="dougaType">
                  <el-radio-group v-model="lotteryFormData.dougaType" style="width:100%;" @change="refreshDougaList">
                    <el-radio label="video">视频投稿</el-radio>
                    <el-radio label="article">文章投稿</el-radio>
                  </el-radio-group>
                </el-form-item>
  
                <!--
                <el-form-item label="抽奖参与方式" label-width="130px" prop="joinMethod">
                  <el-checkbox-group v-model="lotteryFormData.joinMethod" style="width:100%;">
                    <el-checkbox label="comment">评论</el-checkbox>
                    <el-checkbox label="subcomment">楼中楼</el-checkbox>
                    <el-checkbox label="floor">指定楼层</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                 -->
  
                <el-divider>请选取参与抽奖的稿件</el-divider>
  
                <el-row class="douga-list-wrapper">
                  <el-timeline class="douga-list" v-infinite-scroll="getDougaList" :infinite-scroll-disabled="lotteryFormData.dougaListDisabled">
                    <el-timeline-item :class="{'douga-list-item':true,'active':lotteryFormData.dougaListActiveIndex == dougaIndex, 'video':lotteryFormData.dougaType == 'video', 'article' : lotteryFormData.dougaType == 'article'}" :timestamp="douga.uploadDateText" placement="top" v-for="(douga, dougaIndex) in lotteryFormData.dougaList" :key="douga.id">
                      <el-card  :title="douga.title" @click.native="handleDougaListItemClick(dougaIndex)">
                        <el-row class="douga-info">
  
                          <template v-if="lotteryFormData.dougaType == 'video'">
                            <el-col :span="12" class="douga-info-left">
                              <span class="cover">
                                <img :src="douga.cover" @click.stop="handleDougaListItemDetailClick(dougaIndex)">
                              </span>
                            </el-col>
                            <el-col :span="12"  class="douga-info-right">
                              <p class="title"><span>{{douga.title}}</span></p>
                              <p class="play-count">播放量：<span>{{douga.playCountText}}</span></p>
                            </el-col>
                          </template>
  
                          <template v-if="lotteryFormData.dougaType == 'article'">
                            <p class="title"><span @click.stop="handleDougaListItemDetailClick(dougaIndex)">{{douga.title}}</span></p>
                            <p class="play-count">访问量：<span>{{douga.playCountText}}</span></p>
                          </template>
  
                        </el-row>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
  
                  <p v-if="lotteryFormData.dougaListLoading">...正在加载投稿稿件...</p>
                  <p v-if="lotteryFormData.dougaListNoMore">加载完毕</p>
                </el-row>
  
  
  
              </template>
  
              <el-form-item style="display:flex;justify-content:center;">
                <el-button type="primary" @click="handleLotteryFormSubmit">立即创建</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
  
  
          <el-dialog v-dialog-drag :title="userTableDialogTitle" :visible.sync="userTableDialogVisible" :modal="false" width="550px" custom-class="user-table-dialog" :close-on-click-modal="false">
            <el-table :data="userTableData" style="width: 100%" class="user-table">
              <el-table-column prop="userName" label="用户名" :width="300">
                <template slot-scope="scope">
                  <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.photo"></el-avatar>
                  <span>{{scope.row.userName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="uid" label="用户uid" :width="150">
              </el-table-column>
  
  
            </el-table>
  
          </el-dialog>
  
          <el-dialog v-dialog-drag :visible.sync="lotteryCountdownDialogVisible" :modal="false" width="550px" custom-class="lottery-countdown-dialog" :close-on-click-modal="false" :show-close="false">
            <div class="container">
               <div class="circle">
                  <svg width="300" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
                     <g transform="translate(110,110)">
                        <circle r="100" class="e-c-base"/>
                        <g transform="rotate(-90)">
                           <circle r="100" class="e-c-progress"/>
                           <g id="e-pointer">
                              <circle cx="100" cy="0" r="15" class="e-c-pointer"/>
                           </g>
                        </g>
                     </g>
                  </svg>
               </div>
               <div class="controlls">
                  <div class="display-remain-time">{{activeLottery.countdownText}}</div>
               </div>
            </div>
          </el-dialog>
  
          <el-dialog v-dialog-drag :visible.sync="lotteryStartDialogVisible" :modal="false" width="550px" custom-class="lottery-start-dialog" :close-on-click-modal="false" :destroy-on-close="true" :show-close="false">
            <el-row v-if="activeLottery!=null && activeLottery.name" style="text-align:center;margin-bottom:20px;">
              <p style="font-size:30px;font-weight:bold;">{{activeLottery.name}}</p>
              <p>
                <span>已中奖人数：<span style="color:#409EFF;font-weight:bold;">{{activeLottery.winnerCount}}</span>名</span>
                <span style="margin-left:20px;">候选人数：<span style="color:#409EFF;font-weight:bold;">{{activeLottery.startCandidates.length}}</span>人</span>
              </p>
            </el-row>
            <el-row class="carousel-container" v-if="activeLottery!=null && activeLottery.name">
              <el-carousel ref="carousel" type="card" height="200px" indicator-position="none" arrow="never" :autoplay="false">
                <el-carousel-item v-for="candidate in activeLottery.startCandidates" :class="candidate.highlight?'highlight':''">
                    <el-row>
                      <el-avatar shape="square" :size="120" fit="fill" :src="candidate.photo"></el-avatar>
                    </el-row>
                    <el-row>
                      <span class="nickname" style="cursor:pointer;">{{candidate.userName}}</span>
                    </el-row>
                    <el-row>
                      <span :style="userBadgeStyle" :class="{'user-info-badge':true,'user-info-badge-black':candidate.medalColor=='black','user-info-badge-purple':candidate.medalColor=='purple','user-info-badge-red':candidate.medalColor=='red','user-info-badge-orange':candidate.medalColor=='orange','user-info-badge-blue':candidate.medalColor=='blue','user-info-badge-green':candidate.medalColor=='green'}" v-if="candidate.medalName">LV.{{candidate.medalLevel}} {{candidate.medalName}}</span>
                    </el-row>
                </el-carousel-item>
              </el-carousel>
            </el-row>
            <el-row style="text-align:center;margin-top:20px;" v-if="!activeLottery.rolling && activeLottery.activeIndex!=null && activeLottery.activeIndex!=-1">
              <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasEnterroom">进入直播间</el-tag>
              <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasLike">点赞</el-tag>
              <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasDanmaku">弹幕</el-tag>
              <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasGift">礼物</el-tag>
              <el-tag type="warning" effect="dark" v-if="userInfo[activeLottery.startCandidates[activeLottery.activeIndex].uid].hasFollow">关注</el-tag>
            </el-row>
            <el-row style="text-align:center;margin-top:20px;">
              <el-button-group v-if="!activeLottery.rolling">
                <el-button type="primary" icon="el-icon-refresh-left" @click="activeLottery.nextFunc(false)">重新抽选</el-button>
                <el-button type="primary" icon="el-icon-right" @click="activeLottery.nextFunc(true)">继续抽选</el-button>
                <el-button type="primary" icon="el-icon-check" @click="activeLottery.finishFunc()">结束抽选</el-button>
              <el-button-group>
            </el-row>
          </el-dialog>
  
          <el-dialog v-dialog-drag title="弹幕预设" :visible.sync="interactionPresetDialogVisible" :modal="false" width="550px" custom-class="interaction-preset-dialog" :close-on-click-modal="false">
  
            <el-row style="display:flex;justify-content:end;">
              <el-button icon="el-icon-circle-plus-outline" type="primary" @click="handleInteractionFormOpen()">新增预设</el-button>
            </el-row>
            <!-- 预设 -->
            <el-table :data="interactionPreset" style="width: 100%" class="interaction-preset-table" border ref="interactionPresetTable" height="200">
              <el-table-column prop="index" label="序号" min-width="10%">
              </el-table-column>
              <el-table-column prop="name" label="名称" min-width="45%">
              </el-table-column>
              <el-table-column prop="hotkey" label="热键" min-width="20%">
              </el-table-column>
              <el-table-column label="操作" min-width="25%">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleInteractionFormOpen(scope.row)">编辑</el-button>
                  <el-button type="text" @click="removeInteractionPreset(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
          <el-dialog v-dialog-drag title="弹幕编辑" :visible.sync="interactionFormDialogVisible" :modal="false" width="550px" custom-class="interaction-form-dialog" :close-on-click-modal="false" :destroy-on-close="true">
            <el-form :model="interactionFormData" class="interaction-form" ref="interactionForm" :rules="interactionFormRules" @submit.native.prevent>
  
              <!--
              <el-form-item label="是否启动" label-width="130px" prop="enable">
                <el-switch v-model="interactionFormData.enable" active-text="启动" inactive-text="不启动">
                </el-switch>
              </el-form-item>
              -->
  
              <template v-if="interactionFormData.enable">
                <!-- 排版 -->
                <!--<el-divider>排版配置</el-divider>
                <el-form-item label="排版方向" label-width="130px" prop="direction">
                  <el-select v-model="interactionFormData.direction" style="width:100%;">
                    <el-option value="vertical" label="纵版" key="vertical"></el-option>
                    <el-option value="horizontal" label="横版" key="horizontal"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="弹幕/礼物单列显示" label-width="130px" prop="displayNotWrap">
                  <el-switch v-model="interactionFormData.displayNotWrap" active-text="是" inactive-text="否">
                  </el-switch>
                </el-form-item>-->
                <!-- 历史 -->
                <!-- <el-divider>互动历史配置</el-divider>
                -->
                <!-- 全局 -->
                <el-divider>全局配置</el-divider>
                <el-form-item>
                  <el-form-item label="预设名称" label-width="130px" prop="name">
                    <el-input v-model="interactionFormData.name" autocomplete="off" style="width:100%;" placeholder="请输入预设名称"></el-input>
                  </el-form-item>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="背景颜色" label-width="130px" prop="backgroundColor">
                      <el-color-picker v-model="interactionFormData.backgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="互动信息保留" label-width="130px" prop="historyMinutes">
                  <el-input-number size="medium" v-model="interactionFormData.historyMinutes" :min="1" controls-position="right" style="width:30%;"></el-input-number>
                  <span>分钟</span>
                </el-form-item>
                <el-form-item label="互动信息保留" label-width="130px" prop="historyCount">
                  <el-input-number size="medium" v-model="interactionFormData.historyCount" :min="1" controls-position="right" style="width:30%;"></el-input-number>
                  <span>条</span>
                </el-form-item>
                <el-form-item style="display:flex;justify-content:center;">
                  <el-button type="primary" @click="handleInteractionFormInit">重置为默认配置</el-button>
                </el-form-item>
                <!-- 边框 -->
                <el-divider>边框配置</el-divider>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="边框宽度" label-width="130px" prop="borderWidth">
                      <el-select v-model="interactionFormData.borderWidth" style="width:100%;">
                        <el-option value="auto" label="自适应" key="auto"></el-option>
                        <el-option value="fixed" label="定宽" key="fixed"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="边框形状" label-width="100px" prop="borderShape">
                      <el-select v-model="interactionFormData.borderShape" style="width:100%;">
                        <el-option value="rect" label="矩形" key="rect"></el-option>
                        <el-option value="round" label="圆角矩形" key="round"></el-option>
                        <el-option value="flow" label="流动矩形" key="flow"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="边框颜色" label-width="130px" prop="borderColor">
                      <el-color-picker v-model="interactionFormData.borderColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="边框大小" label-width="100px" prop="borderSize">
                      <el-input-number size="medium" v-model="interactionFormData.borderSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <!-- 用户名 -->
                <!-- 字体 -->
                <el-divider>字体配置</el-divider>
                <el-form-item label="字体名称" label-width="130px" prop="fontFamily">
                  <el-cascader v-model="interactionFormData.fontFamily" :options="fontOptions" style="width:100%;" @change="handleFontSelectChange">
                  </elcascader>
                </el-form-item>
                <!-- 用户名 -->
                <el-divider>用户名配置</el-divider>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="字体颜色" label-width="130px" prop="userNameFontColor">
                      <el-color-picker v-model="interactionFormData.userNameFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="字体大小" label-width="100px" prop="userNameFontSize">
                      <el-input-number size="medium" v-model="interactionFormData.userNameFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="阴影颜色" label-width="130px" prop="userNameFontShadowColor">
                      <el-color-picker v-model="interactionFormData.userNameFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="阴影大小" label-width="100px" prop="userNameFontShadowSize">
                      <el-input-number size="medium" v-model="interactionFormData.userNameFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
  
                <!-- 弹幕 -->
                <el-divider>弹幕信息配置</el-divider>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="背景颜色" label-width="130px" prop="danmakuBackgroundColor">
                      <el-color-picker v-model="interactionFormData.danmakuBackgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="渐变为" label-width="100px" prop="danmakuBackgroundGradientColor">
                      <el-color-picker v-model="interactionFormData.danmakuBackgroundGradientColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="字体颜色" label-width="130px" prop="danmakuFontColor">
                      <el-color-picker v-model="interactionFormData.danmakuFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="字体大小" label-width="100px" prop="danmakuFontSize">
                      <el-input-number size="medium" v-model="interactionFormData.danmakuFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="阴影颜色" label-width="130px" prop="danmakuFontShadowColor">
                      <el-color-picker v-model="interactionFormData.danmakuFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="阴影大小" label-width="100px" prop="danmakuFontShadowSize">
                      <el-input-number size="medium" v-model="interactionFormData.danmakuFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="稿件背景颜色" label-width="130px" prop="danmakuDougaBackgroundColor">
                      <el-color-picker v-model="interactionFormData.danmakuDougaBackgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item style="display:flex;justify-content:center;">
                  <el-button type="primary" @click="pushTestDanmakuMessage">测试一下</el-button>
                </el-form-item>
  
                <!-- 礼物 -->
                <el-divider>礼物信息配置</el-divider>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="背景颜色" label-width="130px" prop="giftBackgroundColor">
                      <el-color-picker v-model="interactionFormData.giftBackgroundColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="渐变为" label-width="100px" prop="giftBackgroundGradientColor">
                      <el-color-picker v-model="interactionFormData.giftBackgroundGradientColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="礼物信息" label-width="130px" prop="giftFormat">
                  <el-input v-model="interactionFormData.giftFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="字体颜色" label-width="130px" prop="giftFontColor">
                      <el-color-picker v-model="interactionFormData.giftFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="字体大小" label-width="100px" prop="giftFontSize">
                      <el-input-number size="medium" v-model="interactionFormData.giftFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="阴影颜色" label-width="130px" prop="giftFontShadowColor">
                      <el-color-picker v-model="interactionFormData.giftFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="阴影大小" label-width="100px" prop="giftFontShadowSize">
                      <el-input-number size="medium" v-model="interactionFormData.giftFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item style="display:flex;justify-content:center;">
                  <el-button type="primary" @click="pushTestGiftMessage">测试一下</el-button>
                </el-form-item>
  
                <!-- 点赞 -->
                <el-divider>点赞信息配置</el-divider>
                <el-form-item label="点赞信息" label-width="130px" prop="likeFormat">
                  <el-input v-model="interactionFormData.likeFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="字体颜色" label-width="130px" prop="likeFontColor">
                      <el-color-picker v-model="interactionFormData.likeFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="字体大小" label-width="100px" prop="likeFontSize">
                      <el-input-number size="medium" v-model="interactionFormData.likeFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="阴影颜色" label-width="130px" prop="likeFontShadowColor">
                      <el-color-picker v-model="interactionFormData.likeFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="阴影大小" label-width="100px" prop="likeFontShadowSize">
                      <el-input-number size="medium" v-model="interactionFormData.likeFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item style="display:flex;justify-content:center;">
                  <el-button type="primary" @click="pushTestLikeMessage">测试一下</el-button>
                </el-form-item>
  
  
                <!-- 进入直播间 -->
                <el-divider>进入直播间信息配置</el-divider>
                <el-form-item label="进入直播间信息" label-width="130px" prop="enterroomFormat">
                  <el-input v-model="interactionFormData.enterroomFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="字体颜色" label-width="130px" prop="enterroomFontColor">
                      <el-color-picker v-model="interactionFormData.enterroomFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="字体大小" label-width="100px" prop="enterroomFontSize">
                      <el-input-number size="medium" v-model="interactionFormData.enterroomFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="阴影颜色" label-width="130px" prop="enterroomFontShadowColor">
                      <el-color-picker v-model="interactionFormData.enterroomFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="阴影大小" label-width="100px" prop="enterroomFontShadowSize">
                      <el-input-number size="medium" v-model="interactionFormData.enterroomFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item style="display:flex;justify-content:center;">
                  <el-button type="primary" @click="pushTestEnterRoomMessage">测试一下</el-button>
                </el-form-item>
  
                <!-- 关注 -->
                <el-divider>关注信息配置</el-divider>
                <el-form-item label="关注信息" label-width="130px" prop="followFormat">
                  <el-input v-model="interactionFormData.followFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="字体颜色" label-width="130px" prop="followFontColor">
                      <el-color-picker v-model="interactionFormData.followFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="字体大小" label-width="100px" prop="followFontSize">
                      <el-input-number size="medium" v-model="interactionFormData.followFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="阴影颜色" label-width="130px" prop="followFontShadowColor">
                      <el-color-picker v-model="interactionFormData.followFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="阴影大小" label-width="100px" prop="followFontShadowSize">
                      <el-input-number size="medium" v-model="interactionFormData.followFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item style="display:flex;justify-content:center;">
                  <el-button type="primary" @click="pushTestFollowMessage">测试一下</el-button>
                </el-form-item>
  
                <!-- 加入守护团 -->
                <el-divider>加入守护团信息配置</el-divider>
                <el-form-item label="加入守护团信息" label-width="130px" prop="joinclubFormat">
                  <el-input v-model="interactionFormData.joinclubFormat" autocomplete="off" style="width:100%;" placeholder="请输入参与抽奖的弹幕关键词"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="字体颜色" label-width="130px" prop="joinclubFontColor">
                      <el-color-picker v-model="interactionFormData.joinclubFontColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="字体大小" label-width="100px" prop="joinclubFontSize">
                      <el-input-number size="medium" v-model="interactionFormData.joinclubFontSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-col :span="11">
                    <el-form-item label="阴影颜色" label-width="130px" prop="joinclubFontShadowColor">
                      <el-color-picker v-model="interactionFormData.joinclubFontShadowColor" show-alpha style="width:100%;" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="阴影大小" label-width="100px" prop="joinclubFontShadowSize">
                      <el-input-number size="medium" v-model="interactionFormData.joinclubFontShadowSize" :min="0" controls-position="right" style="width:100%;"></el-input-number>
                    </el-form-item>
                  </el-row>
                </el-form-item>
                <el-form-item style="display:flex;justify-content:center;">
                  <el-button type="primary" @click="pushTestJoinClubMessage">测试一下</el-button>
                </el-form-item>
              </template>
  
  
              <el-form-item style="display:flex;justify-content:center;">
                <el-button type="primary" @click="handleInteractionFormSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
  
  
          <el-dialog v-dialog-drag title="添加竞猜" :visible.sync="guessFormDialogVisible" :modal="false" width="550px" custom-class="guess-form-dialog" :close-on-click-modal="false">
            <el-form :model="guessFormData" class="guess-form" ref="form" :rules="guessFormRules" @submit.native.prevent>
              <el-form-item label="竞猜标题" label-width="150px" prop="title">
                <el-input v-model="guessFormData.title" autocomplete="off" style="width:100%;"></el-input>
              </el-form-item>
              <el-form-item label="竞猜问题挑选方式" label-width="150px" prop="chooseWay">
                <el-radio-group v-model="guessFormData.chooseWay" style="width:100%;">
                  <el-radio label="manual">手动挑选</el-radio>
                  <el-radio label="random">随机挑选</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="竞猜问题挑选倒计时" label-width="150px" prop="countdown">
                <el-input-number size="medium" v-model="guessFormData.countdown" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（秒，0表示不做限制）</span>
              </el-form-item>
              <el-form-item label="总共可竞猜次数" label-width="150px" prop="maxGuess">
                <el-input-number size="medium" v-model="guessFormData.maxGuess" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
              </el-form-item>
              <el-form-item label="每个用户可竞猜次数" label-width="150px" prop="maxGuessPerUser">
                <el-input-number size="medium" v-model="guessFormData.maxGuessPerUser" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
              </el-form-item>
              <el-form-item label="总共可狙击次数" label-width="150px" prop="maxDirectGuess">
                <el-input-number size="medium" v-model="guessFormData.maxDirectGuess" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
              </el-form-item>
              <el-form-item label="每个用户可狙击次数" label-width="150px" prop="maxDirectGuessPerUser">
                <el-input-number size="medium" v-model="guessFormData.maxDirectGuessPerUser" :min="0" controls-position="right" style="width:50%;"></el-input-number><span>（0表示不做限制）</span>
              </el-form-item>
  
              <el-form-item style="display:flex;justify-content:center;">
                <el-button type="primary" @click="handleGuessFormSubmit">立即创建</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
  
          <el-dialog ref="guessStartDialog" v-dialog-drag title="竞猜详情" :visible.sync="guessStartDialogVisible" :modal="false" width="1000px" custom-class="guess-start-dialog" :close-on-click-modal="false" @closed="handleGuessStartDialogClose">
            <template v-if="activeGuess">
              <el-row>
                <span>{{activeGuess.displayDirectGuess?'狙击':'竞猜'}}问题列表</span>
                <el-button type="primary" @click="handleGuessDanmakuSubmit" size="small" v-if="activeGuess.status == '进行中' && (activeGuess.maxGuess==0 || activeGuess.maxGuess > activeGuess.guessList.length)">开始下一个问题</el-button>
                <el-button type="primary" @click="activeGuess.displayDirectGuess = !activeGuess.displayDirectGuess" size="small">{{activeGuess.displayDirectGuess?'隐藏狙击问题':'显示狙击问题'}}</el-button>
                <el-button type="primary" @click="activeGuess.onlyDisplayMatch = !activeGuess.onlyDisplayMatch" size="small">{{activeGuess.onlyDisplayMatch?'显示未命中问题':'隐藏未命中问题'}}</el-button>
              </el-row>
              <el-table :data="activeGuessGuessListData" style="width: 100%" class="guess-list-table" border ref="guessListTable" height="330">
                <el-table-column prop="index" label="序号" min-width="5%">
                </el-table-column>
                <el-table-column prop="userName" label="用户" min-width="25%">
                  <template slot-scope="scope">
                    <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.photo"></el-avatar>
                    <span>{{scope.row.userName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="guess" label="问题" min-width="60%">
                </el-table-column>
                <el-table-column prop="isValid" label="是否命中" min-width="10%">
                  <template slot-scope="scope">
                    <i class="el-icon-check" v-if="scope.row.isValid==true" style="font-size:50px;color:#409EFF;"></i>
                    <i class="el-icon-close" v-if="scope.row.isValid==false" style="font-size:50px;color:#F56C6C;"></i>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-dialog>
  
          <el-dialog ref="guessDanmakuDialog" v-dialog-drag :visible.sync="guessDanmakuDialogVisible" :modal="false" width="550px" custom-class="guess-danmaku-dialog" :close-on-click-modal="false" :destroy-on-close="true" @closed="handleGuessDanmakuDialogClose">
            <template slot="title">
              <el-row type="flex">
                <span class="el-dialog__title">弹幕竞猜</span>
                <span style="font-size:16px;color:#303133" v-show="activeGuess && activeGuess.chooseWay == 'random'">
                  <span>（倒计时</span>
                  <span style="background-color:#66b1ff;color:white;border-radius:5px;font-weight:bold;" id="guess-danmaku-countdown-text"></span>
                  <span>）</span>
                </span>
  
              </el-row>
            </template>
            <el-row class="guess-danmaku-container">
            </el-row>
          </el-dialog>
  
          <el-dialog v-dialog-drag title="查看竞猜" :visible.sync="guessTableDialogVisible" :modal="false" width="1000px" custom-class="guess-table-dialog" :close-on-click-modal="false">
            <el-table :data="guessTableData" style="width: 100%" class="guess-table" >
              <el-table-column prop="title" label="竞猜标题" min-width="50%">
              </el-table-column>
              <el-table-column prop="status" label="状态" min-width="10%">
              </el-table-column>
              <el-table-column prop="winner" label="狙击成功用户" min-width="30%">
                <template slot-scope="scope">
                  <template v-if="scope.row.winner">
                    <el-avatar shape="circle" fit="fill" size="40" :src="scope.row.winner.photo"></el-avatar>
                    <span>{{scope.row.winner.userName}}</span>
                  </template>
                  <span v-else></span>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="10%">
                <template slot-scope="scope">
                  <el-button type="text" @click="openGuessStartDialog(scope.row)">进入竞猜</el-button>
                </template>
              </el-table-column>
  
            </el-table>
  
          </el-dialog>
  
  
          <div id="douga-result" style="display:none;"></div>
        </div>
  
  
  
      `;
      containerEle.append(menuEle);
  
      // 对话框拖动指令
      Vue.directive('dialog-drag', function(el, binding, vnode, oldVnode) {
  
        // 弹框可拉伸最小宽高
        const minWidth = 400
        const minHeight = 300
  
        // 初始非全屏
        let isFullScreen = false
  
        // 当前顶部高度
        let nowMarginTop = 0
  
        // 获取弹框头部（这部分可双击全屏）
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
  
        // 弹窗
        const dragDom = el.querySelector('.el-dialog')
  
        // 给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
        dragDom.style.overflow = 'hidden'
  
        // 清除选择头部文字效果
        // dialogHeaderEl.onselectstart = new Function("return false");
  
        // 头部加上可拖动cursor
        dialogHeaderEl.style.cursor = 'move'
  
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
        const moveDown = e => {
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft
          const disY = e.clientY - dialogHeaderEl.offsetTop
  
          // 获取到的值带px 正则匹配替换
          let styL, styT
  
          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  
          if (sty.left.includes('%')) {
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
          } else {
            styL = +sty.left.replace(/\px/g, '')
            styT = +sty.top.replace(/\px/g, '')
          }
  
          document.onmousemove = function(e) {
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX
            const t = e.clientY - disY
  
            // 移动当前元素
            dragDom.style.left = `${l + styL}px`
            dragDom.style.top = `${t + styT}px`
  
            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
          }
  
          document.onmouseup = function(e) {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
  
        dialogHeaderEl.onmousedown = moveDown
        // 当前宽高
        let nowWidth = 0
        // let nowHight = 0
        // 双击头部全屏效果
        dialogHeaderEl.ondblclick = e => {
          if (isFullScreen === false) {
            // nowHight = dragDom.clientHeight
            nowWidth = dragDom.clientWidth
            nowMarginTop = dragDom.style.marginTop
  
            dragDom.style.left = 0
            dragDom.style.top = 0
            dragDom.style.height = '100VH'
            dragDom.style.width = '100VW'
            dragDom.style.marginTop = 0
  
            isFullScreen = true
  
            dialogHeaderEl.style.cursor = 'initial'
            dialogHeaderEl.onmousedown = null
          } else {
            dragDom.style.height = 'auto'
            dragDom.style.width = nowWidth + 'px'
            dragDom.style.marginTop = nowMarginTop
  
            isFullScreen = false
  
            dialogHeaderEl.style.cursor = 'move'
            dialogHeaderEl.onmousedown = moveDown
          }
        }
  
        dragDom.onmousemove = function(e) {
          // let moveE = e
  
          if (
            e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 ||
            dragDom.offsetLeft + 10 > e.clientX
          ) {
            dragDom.style.cursor = 'w-resize'
          } else if (
            el.scrollTop + e.clientY >
            dragDom.offsetTop + dragDom.clientHeight - 10
          ) {
            dragDom.style.cursor = 's-resize'
          } else {
            dragDom.style.cursor = 'default'
  
            dragDom.onmousedown = null
          }
  
          dragDom.onmousedown = e => {
            const clientX = e.clientX
            const clientY = e.clientY
            const elW = dragDom.clientWidth
            const elH = dragDom.clientHeight
            const EloffsetLeft = dragDom.offsetLeft
            const EloffsetTop = dragDom.offsetTop
  
            dragDom.style.userSelect = 'none'
  
            const ELscrollTop = el.scrollTop
  
            // 判断点击的位置是不是为头部
            if (
              clientX > EloffsetLeft &&
              clientX < EloffsetLeft + elW &&
              clientY > EloffsetTop &&
              clientY < EloffsetTop + 100
            ) {
              // 如果是头部在此就不做任何动作，以上有绑定dialogHeaderEl.onmousedown = moveDown;
            } else {
              document.onmousemove = function(e) {
                // 移动时禁用默认事件
                e.preventDefault()
  
                // 左侧鼠标拖拽位置
                if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
                  // 往左拖拽
                  if (clientX > e.clientX) {
                    dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'
                  }
  
                  // 往右拖拽
                  if (clientX < e.clientX) {
                    if (dragDom.clientWidth < minWidth) {
                    } else {
                      dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'
                    }
                  }
                }
  
                // 右侧鼠标拖拽位置
                if (
                  clientX > EloffsetLeft + elW - 10 &&
                  clientX < EloffsetLeft + elW
                ) {
                  // 往左拖拽
                  if (clientX > e.clientX) {
                    if (dragDom.clientWidth < minWidth) {
                    } else {
                      dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px'
                    }
                  }
  
                  // 往右拖拽
                  if (clientX < e.clientX) {
                    dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'
                  }
                }
  
                // 底部鼠标拖拽位置
                if (
                  ELscrollTop + clientY > EloffsetTop + elH - 20 &&
                  ELscrollTop + clientY < EloffsetTop + elH
                ) {
                  // 往上拖拽
                  if (clientY > e.clientY) {
                    if (dragDom.clientHeight < minHeight) {
                    } else {
                      dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px'
                    }
                  }
  
                  // 往下拖拽
                  if (clientY < e.clientY) {
                    dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px'
                  }
                }
              }
  
              // 拉伸结束
              document.onmouseup = function(e) {
                document.onmousemove = null
  
                document.onmouseup = null
  
                vue.onDialogResize(dragDom);
              }
            }
          }
        }
      });
  
  
      Vue.use(ELEMENT);
      Vue.prototype.$message = ELEMENT.Message;
  
      if(!document.querySelector('.container-live-feed-messages-acfunlive')){
        return false;
      }
  
      // 初始化实例
      vue = new Vue({
          el : '.container-live-feed-messages-acfunlive',
          components : {
          },
          data : function(){
  
            var vue = this;
  
            var lotteryFormDataDefault = {
              joinMethod : [],
              weight : false,
              joinGiftList : [],
              mutualLotteryList : [],
              countdown : 10,
              status : '未开始',
              candidates : {},
              winners : [],
              startCandidates : [],
              medalName : '',
              medalLevel : 0,
              source : 'livestream',
              dougaType : 'video',
              dougaList : [],
              dougaListPage : 1,
              dougaListDisabled : false,
              dougaListLoading : false,
              dougaListNoMore : false,
              dougaListActiveIndex : null,
              loading : false,
              rolling : false,
              loadingText : '',
              winnerCount : 0,
            };
  
            var guessFormDataDefault = {
              title : '',
              countdown : 20,
              chooseWay : 'random',
              status : '进行中',
              maxGuess : 0,
              maxGuessPerUser : 0,
              maxQuestionPerUser : 0,
              maxDirectGuess : 0,
              maxDirectGuessPerUser : 1,
              guessList : [],
              matchGuessList : [],
              directGuessList : [],
              guessIndex : 1,
              displayDirectGuess : false,
              onlyDisplayMatch : false,
            };
  
            var interactionFormDataInit = {
  
              enable : true,
              historyMinutes : 10,
              historyCount : 200,
              direction : 'vertical',
              displayNotWrap : false,
              fontFamily : ['default', 'inherit'],
              userNameFontSize : 18,
              userNameFontColor : 'rgba(255, 69, 0, 1)',
              userNameFontShadowColor : 'rgba(0, 0, 0, 1)',
              userNameFontShadowSize : 1,
              danmakuBackgroundColor : 'rgba(30, 144, 255, 1)',
              danmakuBackgroundGradientColor : 'rgba(30, 144, 255, 1)',
              danmakuFontSize : 25,
              danmakuFontColor : 'rgba(255, 255, 255, 1)',
              danmakuFontShadowColor : 'rgba(0, 0, 0, 1)',
              danmakuFontShadowSize : 1,
              danmakuDougaBackgroundColor: 'rgba(255, 255, 255, 1)',
              giftBackgroundColor: 'rgba(255, 166, 104, 1)',
              giftBackgroundGradientColor: 'rgba(252, 91, 108, 1)',
              giftFormat : '送出了${礼物名称}',
              giftFontSize : 25,
              giftFontColor : 'rgba(255, 176, 35, 1)',
              giftFontShadowColor : 'rgba(0, 0, 0, 1)',
              giftFontShadowSize : 1,
              likeFormat : '点赞了',
              likeFontSize : 18,
              likeFontColor : 'rgba(255, 0, 0, 1)',
              likeFontShadowColor : 'rgba(255, 255, 255, 1)',
              likeFontShadowSize : 2,
              enterroomFormat : '进入直播间',
              enterroomFontSize : 18,
              enterroomFontColor : 'rgba(30, 144, 255, 1)',
              enterroomFontShadowColor : '#FFF',
              enterroomFontShadowSize : 2,
              followFormat : '关注了主播',
              followFontSize : 20,
              followFontColor : 'rgba(199, 21, 133, 1)',
              followFontShadowColor : 'rgba(255, 255, 255, 1)',
              followFontShadowSize : 2,
              joinclubFormat : '加入主播的守护团',
              joinclubFontSize : 20,
              joinclubFontColor : 'rgba(199, 21, 133, 1)',
              joinclubFontShadowColor : 'rgba(255, 255, 255, 1)',
              joinclubFontShadowSize : 2,
  
              backgroundColor: 'rgba(0, 204, 0, 1)',
  
              borderShape: 'round',
              borderWidth: 'auto',
              borderSize: 2,
              borderColor: 'rgba(30, 144, 255, 1)',
            };
  
            return {
  
              messageData : [],
              lastDanmakuMessage : null,
              userInfo : userInfo,
  
              uid : config.UID,
  
              loginFormDialogVisible : false,
              lotteryTableDialogVisible : false,
              lotteryFormDialogVisible : false,
              userTableDialogVisible : false,
              lotteryCountdownDialogVisible : false,
              lotteryStartDialogVisible : false,
              lotteryFormDialogTitle : '',
              userTableDialogTitle : '',
              audioFormDialogVisible : false,
              interactionFormDialogVisible : false,
              interactionPresetDialogVisible: false,
  
              loginFormData : {
                token : '',
              },
              loginFormRules : {
                token : [{
                  required : true, message : '请输入口令', trigger : 'blur',
                }],
              },
  
              lotteryFormDataDefault : _.cloneDeep(lotteryFormDataDefault),
              lotteryFormData : _.cloneDeep(lotteryFormDataDefault),
              lotteryFormRules : {
                name : [{
                  required : true, message : '请输入奖品名称', trigger : 'blur',
                }],
                countdown : [{
                  required : true, message : '请输入抽奖倒计时', trigger : 'blur',
                }],
                startTime : [{
                  required : true, message : '请设置开奖时间', trigger : 'blur',
                },{
                  trigger : 'blur',
                  message : '开奖时间与当前时间差距低于1分钟',
                  validator : function(rule, value, callback){
                    if(value && moment(value, 'HH:mm:ss').subtract(1, 'minutes') < moment()){
                      callback(new Error(rule.message));
                    }
                    else{
                      callback();
                    }
                  },
                },],
                /*joinMethod : [{
                  required : true, message : '请设置抽奖参与方式', trigger : 'blur',
                },{
                  trigger : 'blur',
                  message : '请选择至少一个抽奖参与方式',
                  validator : function(rule, value, callback){
                    if(value.length==0){
                      callback(new Error(rule.message));
                    }
                    else{
                      callback();
                    }
                  },
                }],*/
                /*joinKeyword : [{
                  trigger : 'blur',
                  message : '请输入参与抽奖的弹幕关键词',
                  validator : function(rule, value, callback){
                    // 抽奖参与方式为弹幕
                    if(vue.lotteryFormData.joinMethod == 'danmaku' && !value){
                      callback(new Error(rule.message));
                    }else{
                      callback();
                    }
                  },
                }],*/
                /*joinGiftList : [{
                  trigger : 'blur',
                  message : '请选择参与抽奖的礼物，至少一个',
                  validator : function(rule, value, callback){
                    // 抽奖参与方式为礼物
                    if(vue.lotteryFormData.joinMethod == 'gift' && (!value || value.length==0)){
                      callback(new Error(rule.message));
                    }else{
                      callback();
                    }
                  },
                }],*/
              },
              giftList : giftList,
              giftNameMapper : {},
  
              lotteryTableData : [],
  
              userTableData : [],
  
              // 时间筛选范围，为当前时间至23:59:59
              timePickerOptions : {
                selectableRange : `${moment().format("HH:mm:ss")} - 23:59:59`,
                "value-format" : 'HH:mm:ss',
              },
  
              // 当前活跃抽奖
              activeLottery : {},
  
              // 可选语音
              audioVoiceOptions : null,
              // 语速
              speechRateMarks : {
                250 : '更慢',
                500 : '默认',
                750 : '更快',
              },
              speechVolumeMarks : {
                25 : '更小',
                50 : '默认',
                75 : '更大',
              },
              // 语音配置表单规则
              audioFormRules : {
  
              },
              // 语音配置表单数据
              audioFormData : {
  
                voice : ['general', 'Xiaoyun'],
                enable : false,
                speechRate : 500,
                speechVolume : 50,
                joinMethod : ['danmaku', 'gift', 'follow'],
                danmakuFormat : '${用户名}说${弹幕内容}',
                likeFormat : '${用户名}点赞了',
                giftFormat : '${用户名}送出${礼物数量}个${礼物名称}',
                enterroomFormat : '${用户名}进入直播间',
                followFormat : '${用户名}关注了主播',
                danmakuTimeout : 0,
                likeTimeout : 0,
                giftTimeout : 2,
                enterroomTimeout : 0,
                followTimeout : 0,
  
                consumeing : false,
                interactions : [],
                messageBuffer : {},
  
              },
  
  
              // 弹幕配置表单规则
              interactionFormRules : {},
              interactionFormDataInit: interactionFormDataInit,
              // 弹幕配置表单数据
              interactionFormData : {
                index: null,
                name: "",
                ..._.cloneDeep(interactionFormDataInit)
              },
  
  
              // 竞猜表单
              guessFormDialogVisible : false,
              guessFormDataDefault : _.cloneDeep(guessFormDataDefault),
              guessFormData : _.cloneDeep(guessFormDataDefault),
              guessFormRules : {
                title : [{
                  required : true, message : '竞猜标题不可为空', trigger : 'blur',
                }],
                countdown : [{
                  trigger : 'blur',
                  message : '竞猜挑选方式为“随机挑选”时，竞猜挑选倒计时至少为10（秒）',
                  validator : function(rule, value, callback){
                    if(vue.guessFormData.chooseWay == 'random' && value < 10){
                      callback(new Error(rule.message));
                    }
                    else{
                      callback();
                    }
                  },
                }],
              },
  
              // 当前活跃竞猜
              activeGuess : null,
  
              // 竞猜表格
              guessTableDialogVisible : false,
              guessTableData : [],
  
              // 开始竞猜
              guessStartDialogVisible : false,
  
              // 弹幕竞猜
              guessDanmakuDialogVisible : false,
  
              // 请求acfun用户投稿时使用
              reqId : 1,
  
              // 鼠标悬浮状态
              mouseOn : false,
  
              // 预定义颜色
              predefineColors : [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577'
              ],
  
  
              // 字体选项
              fontOptions : null,
  
              // 下载过的字体
              downloadedFonts : {},
  
              // 弹幕配置
              danmaku : null,
  
              candidateInfoCallbacks : [],
              isGettingCandidate : false,
  
              // 弹幕配置预设值
              interactionPreset : [
              ],
  
            };
          },
          methods : {
            filter : _.filter,
            // 下拉菜单点击回调
            handleDropdownMenuClick : function(command){
  
              var vue = this;
  
              // 添加抽奖
              if(command=='newLottery'){
                this.addOrUpdateLottery();
              }
              // 查看抽奖表格
              else if(command=='lotteryTable'){
                this.lotteryTableDialogVisible = true;
              }
              // 导出中奖名单
              else if(command=='exportLottery'){
                this.exportLottery();
              }
              // 添加竞猜
              else if(command=='newGuess'){
                this.guessFormDialogVisible = true;
              }
              // 查看竞猜表格
              else if(command=='guessTable'){
                this.guessTableDialogVisible = true;
              }
              // 弹幕编辑
              else if(command=='editInteraction'){
                this.interactionPresetDialogVisible = true;
              }
              // 帮助手册
              else if(command == 'help'){
                window.open('https://docs.qq.com/doc/DZXF2aFJWb0FxR3N4', '_blank');
              }
            },
            // 对话框大小修改
            onDialogResize : function(diagDom){
  
  
            },
  
            // 抽奖表单提交回调
            handleLotteryFormSubmit : function(){
  
              var vue = this;
  
              function addOrUpdateLottery(){
  
                var isNew = !vue.lotteryFormData.id;
                // 设置状态
                vue.lotteryFormData.status = '未开始';
                // 设置开奖时间文字
                vue.lotteryFormData.startTimeText = moment(vue.lotteryFormData.startTime).format('HH:mm:ss');
                // 备选
                vue.lotteryFormData.candidates = {};
                vue.lotteryFormData.startCandidates = [];
                // 获奖者
                vue.lotteryFormData.winners = [];
  
                // 新增抽奖
                if(!vue.lotteryFormData.id){
  
                  // 添加id
                  vue.lotteryFormData.id = uuidv4();
  
                  vue.lotteryTableData.splice(0, 0, vue.lotteryFormData);
  
                }
  
                // 注册(不可用)抽奖回调
                vue.registerLotteryCallback(vue.lotteryFormData);
  
                vue.lotteryFormDialogVisible = false;
  
                vue.$message({
                  message : isNew?'添加抽奖成功':'修改抽奖信息成功',
                  type : 'info',
                  duration : 2000,
                });
              }
  
              this.$refs.form.validate((valid) => {
                // 通过校验
                if(valid){
  
                  // 如果是稿件抽奖，查看是否有选中稿件
                  if(this.lotteryFormData.source == 'douga' && this.lotteryFormData.dougaListActiveIndex==null){
  
                    this.$message({
                      message : '请选择稿件',
                      type : 'error',
                    });
  
                    return;
                  }
  
                  // 稿件抽奖
                  if(this.lotteryFormData.source=='douga'){
  
                    var processMessage = null;;
  
                    // 获取稿件评论
                    this.getCommentList(this.lotteryFormData.dougaList[this.lotteryFormData.dougaListActiveIndex], true, function(isSuccess, isFinish, commentCount, page, totalPage){
  
                      // 错误
                      if(!isSuccess){
  
                        vue.lotteryFormData.loading = false;
  
                        vue.$message({
                          message : '获取稿件评论信息错误',
                          type : 'error',
                        });
                      }
  
                      else{
  
                        // 开始加载
                        vue.lotteryFormData.loadingText = `正在加载 ${page}/${totalPage} 页评论`;
                        vue.lotteryFormData.loading = true;
  
                        // 加载完毕
                        if(isFinish){
  
                          vue.lotteryFormData.loading = false;
                          addOrUpdateLottery();
  
                        }
  
  
                      }
  
  
                    });
  
                  }
  
                  else{
  
                    addOrUpdateLottery();
                  }
  
  
                }
                else{
  
                  this.$message({
                    message : '提交失败，请检查是否填写正确',
                    type : 'error',
                  });
                }
              });
            },
            // 修改抽奖信息
            handleLotteryModify : function(lottery){
              this.addOrUpdateLottery(lottery);
            },
            // 复制抽奖
            handleLotteryCopy : function(lottery){
              this.addOrUpdateLottery(lottery, true);
            },
            // 查看候选人
            handleLotteryCandidatesCheck : function(lottery){
              var userTableData = [];
              for(var uid in lottery.candidates){
                var candidate = lottery.candidates[uid];
                userTableData.push(candidate);
              }
  
              this.userTableData = _.sortBy(userTableData, 'index');
              this.userTableDialogTitle = '候选名单';
              this.userTableDialogVisible = true;
  
            },
            // 查看中奖者
            handleLotteryWinnersCheck : function(lottery){
  
              this.userTableData = lottery.winners;
              this.userTableDialogTitle = '中奖名单';
              this.userTableDialogVisible = true;
            },
            login : function(callback){
              this.loginFormDialogVisible = true;
  
              if(_.isFunction(callback)){
                this.loginFormData.nextCallback = callback;
              }
              else{
                this.loginFormData.nextCallback = null;
              }
  
            },
            addOrUpdateLottery : function(lottery, copy){
              if(lottery && lottery.id){
  
                // 复制抽奖信息
                if(copy){
                  this.lotteryFormData = {
                    name : lottery.name,
                    weight : lottery.weight,
                    soucre : lottery.source,
                    startTime : lottery.startTime,
                    countdown : lottery.countdown,
                    medalName : lottery.medalName,
                    medalLevel : lotter.medalLevel,
                    mutualLotteryList : _.cloneDeep(lottery.mutualLotteryList),
                    joinMethod : _.cloneDeep(lottery.joinMethod),
                    joinKeyword : lottery.joinKeyword,
                    joinGiftList : _.cloneDeep(lottery.joinGiftList),
                    candidates : {},
                    startCandidates : [],
                    winners : [],
                    dougaType : lottery.dougaType,
                    dougaList : lottery.dougaList,
                    dougaListPage : lottery.dougaListPage,
                    dougaListDisabled : lottery.dougaListDisabled,
                    dougaListLoading : lottery.dougaListLoading,
                    dougaListNoMore : lottery.dougaListNoMore,
                    dougaListActiveIndex : lottery.dougaListActiveIndex,
                  };
                  this.lotteryFormDialogTitle = '添加抽奖';
                }
                // 修改抽奖信息
                else{
                  this.lotteryFormData = lottery;
                  this.lotteryFormDialogTitle = '修改抽奖';
                }
  
              }
              else{
                this.lotteryFormData = _.cloneDeep(this.lotteryFormDataDefault);
                this.lotteryFormDialogTitle = '添加抽奖';
              }
              this.lotteryFormDialogVisible = true;
            },
            // 注册(不可用)抽奖回调
            registerLotteryCallback : function(lottery){
  
              var vue = this;
  
              function updateCandidates(){
  
                var candidates = {};
  
                lottery.dougaList[lottery.dougaListActiveIndex].commentList.forEach(function(comment, index){
  
                  var pass = true;
                  // 如果设置了互斥抽奖
                  if(lottery.mutualLotteryList && lottery.mutualLotteryList.length>0){
  
  
                    _.filter(vue.lotteryTableData, function(o){return lottery.mutualLotteryList.indexOf(o.id)!=-1}).every(function(anotherLottery){
  
                      if(_.findIndex(anotherLottery.winners, {uid:comment.uid})!=-1){
                        pass = false;
                        return false;
                      }
                      else{
                        return true;
                      }
  
                    });
  
                  }
  
                  if(!pass){
                    return;
                  }
  
                  if(!(comment.uid in candidates)){
                    let candidate = {
                      index : -comment.floor,
                      uid : comment.uid,
                      userName : comment.userName,
                      photo : comment.photo,
                    };
  
                    // 如果筛选了牌子
                    if(lottery.medalName && lottery.medalLevel){
                      vue.getCandidateInfo(candidate, (isSuccess, )=>{
                        if(candidate.medalName == lottery.medalName && candidate.medalLevel >= lottery.medalLevel){
                          candidates[comment.uid] = candidate;
                        }
                      });
                    }
                    else{
                      candidates[comment.uid] = candidate;
                    }
  
                  }
  
                });
  
                lottery.candidates = candidates;
  
              }
  
              // 如果是稿件抽奖
              if(lottery.source=='douga'){
  
                // 是否注册(不可用)过数据回调
                if(lottery.messageHandler){
                  window.clearInterval(lottery.messageHandler);
                  lottery.messageHandler = null;
  
                  // 清空候选
                  lottery.candidates = {};
                  lottery.startCandidates = [];
                  lottery.winners = [];
                }
  
  
                // 更新候选名单
                updateCandidates();
  
                // 注册(不可用)数据回调（每30秒执行）
                /*lottery.messageHandler = window.setInterval(function(){
  
                  // 获取评论
                  vue.getCommentList(lottery.dougaList[lottery.dougaListActiveIndex], true, function(isSuccess, isFinish, commentCount, page, totalPage){
  
                    // 获取完毕
                    if(isFinish){
  
                      // 更新候选名单
                      updateCandidates();
  
  
                    }
  
                  });
  
                }, 30 * 1000);*/
  
  
              }
              // 直播间抽奖
              else{
                // 是否注册(不可用)过数据回调
                if(lottery.messageHandler){
                  callbackManager.cancel(lottery.messageHandler);
                  lottery.messageHandler = null;
  
                  // 清空候选
                  lottery.candidates = {};
                  lottery.startCandidates = [];
                  lottery.winners = [];
  
                }
                // 注册(不可用)数据回调
                lottery.messageHandler = callbackManager.register('message', function(data){
  
  
                  // 不符合参与方式
                  if(!(
                      (lottery.joinMethod.indexOf('danmaku')!=-1 && data.interaction.type=='danmaku')
                      || (lottery.joinMethod.indexOf('gift')!=-1 && data.interaction.type=='gift')
                      || (lottery.joinMethod.indexOf('like')!=-1 && data.interaction.type=='like')
                    )
                  ){
                    return;
                  }
  
                  // 如果参与方式是弹幕
                  if(data.interaction.type=='danmaku' && (lottery.joinKeyword && data.interaction.content.indexOf(lottery.joinKeyword)==-1)){
                    return;
                  }
                  // 如果参与方式是礼物
                  if(data.interaction.type=='gift' && (lottery.joinGiftList.length>0 && lottery.joinGiftList.indexOf(vue.giftNameMapper[data.interaction.giftName].id)==-1)){
                    return;
                  }
  
                  var pass = true;
                  // 如果设置了互斥抽奖
                  if(lottery.mutualLotteryList && lottery.mutualLotteryList.length>0){
  
  
                    _.filter(vue.lotteryTableData, function(o){return lottery.mutualLotteryList.indexOf(o.id)!=-1}).every(function(anotherLottery){
  
                      if(_.findIndex(anotherLottery.winners, {uid:data.uid})!=-1){
                        pass = false;
                        return false;
                      }
                      else{
                        return true;
                      }
  
                    });
  
                  }
  
                  if(!pass){
                    return;
                  }
  
                  // 第一次被侦测
                  if(!(data.uid in lottery.candidates)){
                    let candidate = {
                      uid : data.uid,
                      userName : data.userName,
                      photo : data.photo,
                      weight : 0,
                      index : Object.keys(lottery.candidates).length,
                    };
  
                    // 如果筛选了牌子
                    if(lottery.medalName && lottery.medalLevel){
                      vue.getCandidateInfo(candidate, (isSuccess, )=>{
  
                        if(candidate.medalName == lottery.medalName && candidate.medalLevel >= lottery.medalLevel){
                          lottery.candidates[data.uid] = candidate;
  
  
                          if(data.interaction.type=='danmaku'){
                            lottery.candidates[data.uid].weight += 1;
                          }
                          else if(data.interaction.type=='gift'){
                            lottery.candidates[data.uid].weight += vue.giftNameMapper[data.interaction.giftName].price * data.interaction.giftCount;
                          }
                          else if(data.interaction.type=='like'){
                            lottery.candidates[data.uid].weight += 0.5;
                          }
                        }
  
                      });
                    }
                    else{
                      lottery.candidates[data.uid] = candidate;
  
                      if(data.interaction.type=='danmaku'){
                        lottery.candidates[data.uid].weight += 1;
                      }
                      else if(data.interaction.type=='gift'){
                        lottery.candidates[data.uid].weight += vue.giftNameMapper[data.interaction.giftName].price * data.interaction.giftCount;
                      }
                      else if(data.interaction.type=='like'){
                        lottery.candidates[data.uid].weight += 0.5;
                      }
                    }
                  }
  
  
                });
              }
  
              var startLotteryTimeout = lottery.startTime - new Date();
              var countdownTimeout = startLotteryTimeout - lottery.countdown * 1000;
  
              // 是否已经注册(不可用)过抽奖倒计时
              if(lottery.countdownHandler){
                window.clearTimeout(lottery.countdownHandler);
                lottery.countdownHandler = null;
              }
  
              if(lottery.countdown>0){
                lottery.countdownHandler = window.setTimeout(function(){
  
                  lottery.countdownHandler = null;
  
                  lottery.countdownText = `${lottery.countdown/60>=10?'':'0'}${_.floor(lottery.countdown/60)}:${lottery.countdown%60>=10?'':'0'}${lottery.countdown%60}`;
                  vue.activeLottery = lottery;
                  // 展示倒计时
                  vue.showLotteryCountdown(lottery);
  
  
                }, countdownTimeout);
              }
  
  
              // 是否已经注册(不可用)过抽奖
              if(lottery.startHandler){
                window.clearTimeout(lottery.startHandler);
                lottery.startHandler = null;
              }
              lottery.startHandler = window.setTimeout(function(){
  
  
                // 清除数据回调
                if(lottery.source=='douga'){
                  window.clearInterval(lottery.messageHandler)
                }
                else{
                  callbackManager.cancel(lottery.messageHandler);
                }
                lottery.messageHandler = null;
                lottery.startHandler = null;
  
                vue.activeLottery = lottery;
                // 展示结果
                vue.showLotteryStart(lottery);
  
              }, startLotteryTimeout);
  
  
            },
  
            // 返回抽奖表格行类名
            lotteryTableRowClassName : function({row}){
              if(row.status == '未开始'){
                return 'lottery-status-unstart';
              }
              if(row.status == '已结束'){
                return 'lottery-status-finish';
              }
            },
            getCandidateInfo(candidate, callback){
  
              this.candidateInfoCallbacks.push([candidate, callback]);
            },
            // 获取用户信息
            _getCandidateInfo(candidate, callback){
              if(candidate.medalName){
                if(_.isFunction){
                  callback(true, candidate);
                }
                return;
              }
  
              commonRequrest(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + `/${candidate.uid}`, 'get', null, true, function(isSuccess, data){
  
                // 获取成功
                if(isSuccess){
                  let medalDataJsonMatch = data.match(/data-medal='(?<medal>.+?)'/);
                  if(medalDataJsonMatch!=null){
                    let medalData = JSON.parse(medalDataJsonMatch.groups['medal']);
                    let medalColor = 'green';
                    if(medalData.level >= 1 && medalData.level <= 3){
                      medalColor = 'green';
                    }
                    else if(medalData.level >= 4 && medalData.level <= 6){
                      medalColor = 'blue';
                    }
                    else if(medalData.level >= 7 && medalData.level <= 9){
                      medalColor = 'orange';
                    }
                    else if(medalData.level >= 10 && medalData.level <= 12){
                      medalColor = 'red';
                    }
                    else if(medalData.level >= 13 && medalData.level <= 15){
                      medalColor = 'purple';
                    }
                    else if(medalData.level >= 16 && medalData.level <= 20){
                      medalColor = 'black';
                    }
                    Object.assign(candidate, {
                      medalName : medalData.clubName,
                      medalLevel : medalData.level,
                      medalColor : medalColor,
                    });
                  }
  
  
                  if(_.isFunction){
                    callback(true, candidate);
                  }
  
                }
                else{
  
                  if(_.isFunction){
                    callback(false, candidate);
                  }
                }
              });
            },
            // 开始倒计时
            showLotteryCountdown : function(lottery){
  
              var vue = this;
  
              this.lotteryStartDialogVisible = false;
              this.lotteryCountdownDialogVisible = true;
              this.$nextTick(function(){
                //circle start
                var progressBar = document.querySelector('.lottery-countdown-dialog .e-c-progress');
                var indicator = document.querySelector('.lottery-countdown-dialog #e-indicator');
                var pointer = document.querySelector('.lottery-countdown-dialog #e-pointer');
                var length = Math.PI * 2 * 100;
  
                progressBar.style.strokeDasharray = length;
  
                function update(value, timePercent) {
                  var offset = - length - length * value / (timePercent);
                  progressBar.style.strokeDashoffset = offset;
                  pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
                };
  
                //circle ends
                const displayOutput = document.querySelector('.lottery-countdown-dialog .display-remain-time')
  
                var intervalTimer;
                var timeLeft;
                var wholeTime = lottery.countdown; // manage this to set the whole time
                var isPaused = false;
                var isStarted = false;
  
  
                update(wholeTime,wholeTime); //refreshes progress bar
                displayTimeLeft(wholeTime);
  
                function changeWholeTime(seconds){
                  if ((wholeTime + seconds) > 0){
                    wholeTime += seconds;
                    update(wholeTime,wholeTime);
                  }
                }
  
  
                function timer (seconds){ //counts time, takes seconds
                  var remainTime = Date.now() + (seconds * 1000);
                  displayTimeLeft(seconds);
  
                  intervalTimer = window.setInterval(function(){
                    timeLeft = Math.round((remainTime - Date.now()) / 1000);
  
                    // 倒计时结束
                    if(timeLeft < 0){
                      window.clearInterval(intervalTimer);
                      isStarted = false;
  
                      // 隐藏对话框
                      vue.lotteryCountdownDialogVisible = false;
  
                      return ;
                    }
                    displayTimeLeft(timeLeft);
                  }, 1000);
                }
                function displayTimeLeft (timeLeft){ //displays time on the input
                  var minutes = Math.floor(timeLeft / 60);
                  var seconds = timeLeft % 60;
                  var displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
                  displayOutput.textContent = displayString;
                  update(timeLeft, wholeTime);
                }
  
                timer(wholeTime);
  
              });
            },
            // 开始抽奖
            showLotteryStart : function(lottery){
  
              var vue = this;
              var stop = false;
              lottery.activeIndex = -1;
  
              this.lotteryCountdownDialogVisible = false;
              var rollIntervalHandler = null;
  
              // 候选人数为0
              if(Object.keys(lottery.candidates).length == 0){
  
                this.$message({
                  type : 'info',
                  message : '无参与抽奖人员',
                });
  
                lottery.winners = _.flatMap(lottery.candidates);
                lottery.status = '已结束';
                this.handleLotteryWinnersCheck(lottery);
  
                return;
  
              }
  
  
              function roll(){
                if(stop){
                  // 获取当前赢家
                  // vue.$refs.carousel.setActiveItem(_.findIndex(lottery.startCandidates, {uid:lottery.winners[lottery.winners.length-1].uid}));
  
                }
                else{
                  vue.$refs.carousel.next();
                }
              }
  
              function changeRollIntervals(intervals, timeouts, callback){
  
                if(!timeouts){
                  timeouts = 0;
                }
  
                if(!_.isArray(intervals)){
                  intervals = [intervals];
                }
                if(!_.isArray(timeouts)){
                  timeouts = [timeouts];
  
                  if(timeouts.length>intervals.length){
                    timeouts = timeouts.slice(0, intervals.length);
                  }
                  if(timeouts.length<intervals.length){
                    var npads = intervals.length-timeouts.length;
                    for(var i=0;i<npads;++i){
                      timeouts.splice(0, 0, 0);
                    }
                  }
  
                }
  
                intervals.forEach(function(interval, index){
                  window.setTimeout(function(){
                    if(rollIntervalHandler!=null){
                      window.clearTimeout(rollIntervalHandler);
                    }
                    if(interval != null){
                      rollIntervalHandler = window.setInterval(roll, interval);
                    }
                    else{
  
                      stop = true;
  
                      vue.$nextTick(function(){
                        vue.$refs.carousel.$nextTick(function(){
  
                          // 获取当前赢家
                          lottery.activeIndex = vue.$refs.carousel.activeIndex;
                          // 高亮
                          lottery.startCandidates[lottery.activeIndex].highlight = true;
  
                          vue.$refs.carousel.$nextTick(function(){
                            // 停止回调
                            if(_.isFunction(callback)){
                              callback();
                            }
                          });
                        });
                      });
  
  
                    }
                  }, timeouts[index]);
  
                });
  
              }
  
              // 当前滚动名单
              vue.$set(lottery, 'startCandidates', _.flatMap(lottery.candidates));
  
              this.$nextTick(function(){
  
                var startChoose = function(){
  
                  lottery.rolling = true;
  
                  // 获取中奖者
                  vue.lotteryStartDialogVisible = true;
                  stop = false;
  
                  // 8秒内需要滚动完所有用户
                  var interval = Math.min(Math.max(Math.floor(8000/lottery.startCandidates.length), 150), 350);
  
                  // 高速转动
                  // 10秒后停止转动
                  changeRollIntervals(
                    [interval, null],
                    [0, 10000],
                    // 转动结束后获取当前用户
                    function(){
  
                      lottery.rolling = false;
  
                    },
                  );
  
                };
  
                function checkWinner(valid){
  
                  // 去除高亮
                  lottery.startCandidates[lottery.activeIndex].highlight = false;
  
                  // 删除候选
                  let candidate = lottery.startCandidates.splice(lottery.activeIndex, 1)[0];
                  // 删除候选
                  delete lottery.candidates[candidate.uid];
  
                  // 如果有效，添加入赢家
                  if(valid){
                    // 添加赢家
                    lottery.winners.push(candidate);
                  }
  
  
                  lottery.winnerCount = lottery.winners.length;
  
                }
  
                // 设置抽奖结束函数
                lottery.finishFunc = function(){
  
                  if(lottery.rolling){
                    return;
                  }
  
                  checkWinner(true);
  
                  lottery.status = '已结束';
                  // 关闭弹窗
                  vue.lotteryStartDialogVisible = false;
                  // 打开中奖名单
                  vue.handleLotteryWinnersCheck(lottery);
  
                };
  
                // 设置继续抽奖函数
                lottery.nextFunc = function(valid){
  
                  if(lottery.rolling){
                    return;
                  }
  
                  // 查看候选人数是否足够
                  if(valid && lottery.startCandidates.length == 0){
                    vue.$message({
                      type : 'error',
                      message : '人数不足，无法抽奖'
                    });
                    return;
                  }
  
                  checkWinner(valid);
  
                  // 关闭弹窗
                  // vue.lotteryStartDialogVisible = false;
                  vue.activeLottery = {};
                  vue.$nextTick(function(){
                    // 1秒后重新开始
                    window.setTimeout(function(){
                      // 打乱顺序
                      vue.$set(lottery, 'startCandidates', _.shuffle(lottery.startCandidates));
                      vue.$nextTick(function(){
                        lottery.activeIndex = -1;
                        vue.activeLottery = lottery;
                        startChoose();
                      });
                    }, 1000);
                  });
  
                };
  
  
                // 开始抽奖
                startChoose();
  
  
  
              });
  
  
            },
            // 导出中奖名单
            exportLottery : function(){
  
              var workbook = new ExcelJS.Workbook();
              var sheet = workbook.addWorksheet('中奖名单');
              sheet.columns = [
                { key: 'userName', width: 30, },
                { key: 'uid', width: 10, },
              ];
  
              var rowIndex = 1;
              // 遍历所有已结束的抽奖
              this.lotteryTableData.forEach(function(lottery){
  
                if(lottery.status != '已结束'){
                  return true;
                }
  
                // 添加标题
                sheet.addRow([lottery.name]);
                sheet.mergeCells(rowIndex,1,rowIndex,2);
                // 设置标题样式
                var titleRow = sheet.getRow(rowIndex);
                var titleCell = titleRow.getCell(1);
                // 文字居中
                titleCell.alignment = {vertical: 'middle', horizontal: 'center'};
                // 添加边框
                titleCell.border = {
                  top: {style:'thin'},
                  left: {style:'thin'},
                  bottom: {style:'thin'},
                  right: {style:'thin'},
                };
                // 加粗字体
                titleCell.font = {
                  bold : true,
                };
  
  
                sheet.addRow({userName: '用户名', uid : '用户uid'});
                // 设置列名样式
                var headerRow = sheet.getRow(rowIndex + 1);
                for(var i=1;i<=2;++i){
                  headerRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'};
                  headerRow.getCell(i).border = {
                    top: {style:'thin'},
                    left: {style:'thin'},
                    bottom: {style:'thin'},
                    right: {style:'thin'},
                  };
                }
  
                // 遍历中奖用户
                lottery.winners.forEach(function(winner, index){
                  sheet.addRow({userName: winner.userName, uid : winner.uid});
  
                  // 设置记录样式
                  var recordRow = sheet.getRow(rowIndex + 2 + index);
                  for(var i=1;i<=2;++i){
                    recordRow.getCell(i).alignment = {vertical: 'middle', horizontal: 'center'};
                    recordRow.getCell(i).border = {
                      top: {style:'thin'},
                      left: {style:'thin'},
                      bottom: {style:'thin'},
                      right: {style:'thin'},
                    };
                  }
                });
  
                // 添加两个空白行
                sheet.addRow();
                sheet.addRow();
  
                rowIndex += 1 + 1 + lottery.winners.length + 2;
  
              });
  
              ;(async function(){
                var buffer = await workbook.xlsx.writeBuffer();
                var file = new File([buffer], '中奖名单.xlsx');
                saveAs(file);
              })();
  
            },
  
            // 语音配置表单提交
            handleAudioFormSubmit : function(){
  
              var vue = this;
  
              this.$refs.audioForm.validate((valid) => {
                // 通过校验
                if(valid){
                  // 提交修改
                  GM_setValue('audioFormData', JSON.stringify({
                    voice : this.audioFormData.voice,
                    enable : this.audioFormData.enable,
                    speechRate : this.audioFormData.speechRate,
                    speechVolume : this.audioFormData.speechVolume,
                    joinMethod : this.audioFormData.joinMethod,
                    danmakuFormat : this.audioFormData.danmakuFormat,
                    likeFormat : this.audioFormData.likeFormat,
                    giftFormat : this.audioFormData.giftFormat,
                    enterroomFormat : this.audioFormData.enterroomFormat,
                    followFormat : this.audioFormData.followFormat,
                    danmakuTimeout : this.audioFormData.danmakuTimeout,
                    likeTimeout : this.audioFormData.likeTimeout,
                    giftTimeout : this.audioFormData.giftTimeout,
                    enterroomTimeout : this.audioFormData.enterroomTimeout,
                    followTimeout : this.audioFormData.followTimeout,
  
                    consumeing : false,
                    interactions : [],
                    messageBuffer : {},
  
                  }));
  
                  this.handleAudioFormSubmitValid();
  
                }
              });
  
            },
            handleAudioFormSubmitValid : function(){
              var vue = this;
              // 检测当前是否有缓冲
              for(var bufferKey in this.audioFormData.messageBuffer){
                window.clearTimeout(this.audioFormData.messageBuffer[bufferKey].handler);
              }
  
              this.audioFormData.messageBuffer = {};
  
              // 检测是否已经添加了语音播报
              if(this.audioFormData.messageHandler){
                callbackManager.cancel(this.audioFormData.messageHandler);
                this.audioFormData.messageHandler = null;
              }
  
              // 开启播报
              if(this.audioFormData.enable){
                this.audioFormData.messageHandler = callbackManager.register('message', function(data){
  
                  // 不是允许的互动类型
                  if(vue.audioFormData.joinMethod.indexOf(data.interaction.type)==-1){
                    return;
                  }
  
                  var bufferKey = null;
                  var timeout = 0;
                  if(data.interaction.type=='gift'){
                    bufferKey = data.uid + data.interaction.type + data.interaction.giftName;
                    timeout = vue.audioFormData.giftTimeout;
                  }
  
                  // 不进行缓存，直接播报
                  if(bufferKey==null || timeout == 0){
                    data.interaction = [data.interaction];
                    vue.consumeAudio(vue.audioFormData, data);
                    return;
                  }
  
                  // 已有相同信息
                  if(bufferKey in vue.audioFormData.messageBuffer){
                    window.clearTimeout(vue.audioFormData.messageBuffer[bufferKey].handler);
                    vue.audioFormData.messageBuffer[bufferKey].interaction.push(data.interaction);
                  }
                  else{
                    vue.audioFormData.messageBuffer[bufferKey] = {
                      uid : data.uid,
                      userName : data.userName,
                      interaction : [data.interaction],
                    };
                  }
                  vue.audioFormData.messageBuffer[bufferKey].handler = window.setTimeout(function(){
                    var data = vue.audioFormData.messageBuffer[bufferKey];
                    vue.audioFormData.messageBuffer[bufferKey].handler = null;
                    delete vue.audioFormData.messageBuffer[bufferKey];
                    vue.consumeAudio(vue.audioFormData, data);
                  }, timeout*1000);
                });
              }
  
              // 关闭弹窗
              this.audioFormDialogVisible = false;
            },
            // 字体选择回调
            handleFontSelectChange : function(value){
              this.addFont(value[value.length-1]);
            },
            // 新增预设
            addInteractionPreset: function(item){
              this.interactionPreset.push(_.cloneDeep(item));
              this.interactionPreset[this.interactionPreset.length-1].index = this.interactionPreset.length;
              this.interactionPreset[this.interactionPreset.length-1].hotkey = this.interactionPreset.length<=9?`ctrl+alt+${this.interactionPreset.length}`:'预设过多，无法激活';
              return this.interactionPreset[this.interactionPreset.length-1];
            },
            // 编辑预设
            editInteractionPreset: function(item){
              console.log('edit', item)
              this.interactionPreset[item.index-1] = _.cloneDeep(item);
              return this.interactionPreset[item.index-1];
            },
            // 激活某一预设
            activeInteractionPreset: function(item){
              for(var preset of this.interactionPreset){
                preset.active = false;
              }
              item.active = true;
              console.log('item', item)
              this.interactionFormData = _.cloneDeep(item);
              this.handleInteractionFormSubmitValid();
            },
            // 删除某一预设
            removeInteractionPreset: function(item){
              this.$confirm(`确定删除预设：${item.name}`, '是否删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
              }).then(() => {
                this.interactionPreset.splice(item.index-1, 1);
                this.interactionPreset.forEach(function(item, index){
                  item.index = index + 1;
                  item.hotkey = index<9?`ctrl+alt+${index+1}`:'预设过多，无法激活';
                });
  
                // 提交修改
                GM_setValue('interactionPreset', JSON.stringify(vue.interactionPreset));
  
              });
            },
            // 打开弹幕配置表单
            handleInteractionFormOpen(item){
              var vue = this;
  
              // 新增预设
              if(item==null){
                this.interactionFormData.name = "";
                this.interactionFormData.index = null;
              }
              // 编辑预设
              else{
                this.activeInteractionPreset(item);
              }
              this.interactionFormDialogVisible = true;
            },
            // 重置配置表单
            handleInteractionFormInit: function(){
              this.interactionFormData = {
                ...this.interactionFormData,
                ..._.cloneDeep(this.interactionFormDataInit),
              };
            },
            // 弹幕配置表单提交
            handleInteractionFormSubmit : function(){
  
              var vue = this;
  
              this.$refs.interactionForm.validate((valid) => {
                // 通过校验
                if(valid){
  
                  var fontName = vue.interactionFormData.fontFamily[vue.interactionFormData.fontFamily.length-1];
  
                  if(fontName!='inherit'){
                    // 添加缓存
                    GM_setValue('downloadedFonts', vue.downloadedFonts);
                  }
  
                  var preset = null;
                  // 编辑
                  if(vue.interactionFormData.index!=null){
                    preset = vue.editInteractionPreset(vue.interactionFormData);
                  }
                  // 新增
                  else{
                    preset = vue.addInteractionPreset(vue.interactionFormData);
                  }
  
                  console.log('submit', preset)
                  vue.activeInteractionPreset(preset);
                  vue.interactionFormDialogVisible = false;
  
  
  
                  // 提交修改
                  GM_setValue('interactionPreset', JSON.stringify(vue.interactionPreset));
                }
              });
  
            },
            handleInteractionFormSubmitValid : function(){
  
              var vue = this;
  
              if(vue.interactionFormData.enable){
  
  
                vue.interactionFormData.modifyContentFunc = function(data){
  
                  if(data.interaction.type == 'gift'){
                    data.interaction.content = formatText(vue.interactionFormData.giftFormat, {
                      '礼物名称' : data.interaction.giftName,
                    });
                  }
                  else if(data.interaction.type == 'enterroom'){
                    data.interaction.content = vue.interactionFormData.enterroomFormat;
                  }
                  else if(data.interaction.type == 'like'){
                    data.interaction.content = vue.interactionFormData.likeFormat;
                  }
                  else if(data.interaction.type == 'follow'){
                    data.interaction.content = vue.interactionFormData.followFormat;
                  }
                  else if(data.interaction.type == 'joinclub'){
                    data.interaction.content = vue.interactionFormData.joinclubFormat;
                  }
  
                }
  
  
                if(vue.interactionFormData.cleanInteractionHistoryHandler){
  
                  window.clearInterval(vue.interactionFormData.cleanInteractionHistoryHandler);
  
                }
  
                // 清除弹幕历史
                vue.interactionFormData.cleanInteractionHistoryHandler = window.setInterval(function(){
  
  
                  let historyMinuteStartIndex = 0;
                  let historyCountStartIndex = vue.messageData.length - vue.interactionFormData.historyCount;
                  let sendTimeLower = new Date();
                  sendTimeLower.setMinutes(sendTimeLower.getMinutes()-vue.interactionFormData.historyMinutes);
  
                  vue.messageData.every(function(message, messageIndex){
  
                    if(message.interaction.sendTime>=sendTimeLower){
                      historyMinuteStartIndex = messageIndex;
                      return false;
                    }
                    else{
                      return true;
                    }
  
                  });
  
                  let historyStartIndex = Math.max(0, Math.max(historyMinuteStartIndex, historyCountStartIndex));
  
                  if(historyStartIndex==0){
                    return;
                  }
                  else{
                    vue.messageData.splice(0, historyStartIndex);
                  }
  
  
  
  
                }, 5 * 1000);
  
              }
              else{
                vue.interactionFormData.modifyContentFunc = null;
                window.clearInterval(vue.interactionFormData.cleanInteractionHistoryHandler);
              }
  
            },
  
            consumeAudio(audioFormData, interactionData){
  
              var vue = this;
  
              // 弹幕合并
              if(interactionData.interaction[0].type == 'danmaku'){
                interactionData.interaction = {
                  type : 'danmaku',
                  content : _.reduce(interactionData.interaction, function(text, interaction){
                      return text + (text==''?'':'<break time=\"500ms\"/>') + interaction.content;
                    }, ''),
                };
  
              }
              // 礼物合并
              else if(interactionData.interaction[0].type == 'gift'){
                // 有连击
                let findIndex = _.findIndex(interactionData.interaction, {'doAnime': true});
                interactionData.interaction = {
                  type : 'gift',
                  giftName : interactionData.interaction[0].giftName,
                  giftCount : findIndex==-1?_.sumBy(interactionData.interaction, 'giftCount'):interactionData.interaction[findIndex].giftCount,
                }
  
              }
              // 其他合并
              else{
                interactionData.interaction = interactionData.interaction[0];
              }
  
              audioFormData.interactions.push(interactionData);
              if(audioFormData.consumeing){
                return;
              }
              audioFormData.consumeing = true;
  
              new Promise(function(resolve, reject) {
  
                var readInteractionAudio = function(){
  
                  // 如果停止了语音
                  if(!audioFormData.enable){
                    audioFormData.interactions = [];
                    resolve();
                    return;
                  }
  
                  if(audioFormData.interactions.length==0){
                    audioFormData.consumeing = false;
                    resolve();
                    return;
                  }
  
                  var interactionData = audioFormData.interactions.splice(0, 1)[0];
                  vue.readInteractionAudio(audioFormData, interactionData, readInteractionAudio);
  
  
                }
  
                readInteractionAudio();
  
  
              }).then(function(){
  
              }).catch(function(err){
              });
  
  
            },
  
            readInteractionAudio(audioFormData, interactionData, callback){
  
  
              // 弹幕
              if(interactionData.interaction.type == 'danmaku'){
                nls(`<speak>${audioFormData.danmakuFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
                  '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
                  '弹幕内容' : '<break time=\"500ms\"/>' + interactionData.interaction.content,
                }, callback);
              }
              // 礼物
              else if(interactionData.interaction.type == 'gift'){
                nls(`<speak>${audioFormData.giftFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
                  '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
                  '礼物数量' : interactionData.interaction.giftCount,
                  '礼物名称' : interactionData.interaction.giftName,
                }, callback);
              }
              // 点赞
              else if(interactionData.interaction.type == 'like'){
                nls(`<speak>${audioFormData.likeFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
                  '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
                }, callback);
              }
              // 进入直播间
              else if(interactionData.interaction.type == 'enterroom'){
                nls(`<speak>${audioFormData.enterroomFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
                  '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
                }, callback);
              }
              // 关注
              else if(interactionData.interaction.type == 'follow'){
                nls(`<speak>${audioFormData.followFormat}</speak>`, audioFormData.voice[audioFormData.voice.length-1], audioFormData.speechRate - 500, audioFormData.speechVolume, {
                  '用户名' : interactionData.userName + '<break time=\"500ms\"/>',
                }, callback);
              }
              else{
                callback();
              }
  
            },
  
  
            // 竞猜表单提交回调
            handleGuessFormSubmit : function(){
  
              var vue = this;
  
              this.$refs.form.validate((valid) => {
                // 通过校验
                if(valid){
  
                  // 添加id
                  vue.guessFormData.id = uuidv4();
  
                  vue.guessTableData.splice(0, 0, vue.guessFormData);
  
                  vue.guessFormDialogVisible = false;
                  vue.guessFormData = _.cloneDeep(vue.guessFormDataDefault);
  
                  vue.$message({
                    message : '添加竞猜成功',
                    type : 'info',
                    duration : 2000,
                  });
  
                  // 进入竞猜
                  vue.openGuessStartDialog(vue.guessTableData[0]);
  
                }
                else{
  
                  this.$message({
                    message : '提交失败，请检查是否填写正确',
                    type : 'error',
                  });
                }
              });
            },
  
            // 竞猜开始下一个问题回调
            handleGuessDanmakuSubmit : function(){
  
  
              var vue = this;
  
              this.guessDanmakuDialogVisible = true;
  
              this.$nextTick(function(){
                this.activeGuess.guessDanmakuList = [];
  
                var danmakuList = [];
                var danmakuUserMapper = {};
                var danmakuContentMapper = {};
                var hoverDanmakuItem = null;
  
                var randomId = uuidv4();
  
                // 随机给定一个id
                var containerEle = document.querySelector('.guess-danmaku-dialog .guess-danmaku-container');
                containerEle.setAttribute('id', 'R' + randomId);
  
                this.activeGuess.danmaku = new EasyDanmaku({
                  el: `#R${randomId}`,
                  // 彩色弹幕
                  colourful : false,
                  // 弹幕行数
                  line : 10,
                  // 弹幕样式
                  wrapperStyle : 'guess-danmaku-danmu',
                  // 弹幕播放速度
                  speed : 3,
                  // 播放一次时长
                  runtime : 3,
                  // 鼠标悬浮暂停
                  hover : true,
                  coefficient : 5,
                });
  
  
                // 添加监听
                this.activeGuess.messageHandler = callbackManager.register('command:提问', function(data){
                  // 非弹幕
                  if(data.interaction.type != 'danmaku'){
                    return;
                  }
  
                  // 只有一次提问机会
                  if(data.uid in danmakuUserMapper){
                    return;
                  }
  
                  // 不允许重复提问
                  if(data.interaction.content in danmakuContentMapper){
                    return;
                  }
  
                  // 达到单个用户可提问上限
                  if(vue.activeGuess.maxGuessPerUser>0){
                    if(_.filter(vue.activeGuess.guessList, {uid:data.uid}).length>=vue.activeGuess.maxGuessPerUser){
                      return;
                    }
                  }
  
                  var danmakuItem = _.cloneDeep(data);
                  danmakuList.push(danmakuItem);
                  vue.activeGuess.danmaku.send(danmakuItem.interaction.content);
                  danmakuItem.sendTime = new Date();
                  danmakuUserMapper[danmakuItem.uid] = true;
                  danmakuContentMapper[danmakuItem.interaction.content] = danmakuItem;
  
                });
  
  
                // 鼠标事件回调
                $('.guess-danmaku-container').on('mouseenter', '.guess-danmaku-danmu', function(e){
                  var danmakuItem = danmakuContentMapper[e.target.innerText];
                  if(danmakuItem){
                    danmakuItem.hover = true;
                    hoverDanmakuItem = danmakuItem;
  
                    // 如果是手动选择模式，添加class
                    if(vue.activeGuess.chooseWay == 'manual'){
                      e.target.classList.add('is-select');
                    }
  
                  }
                });
                $('.guess-danmaku-container').on('mouseout', '.guess-danmaku-danmu', function(e){
                  if(hoverDanmakuItem){
                    hoverDanmakuItem.hover = false;
                    hoverDanmakuItem.sendTime = new Date();
                    hoverDanmakuItem = null;
  
                    // 如果是手动选择模式，删除class
                    if(vue.activeGuess.chooseWay == 'manual'){
                      e.target.classList.remove('is-select');
                    }
                  }
                });
                $('.guess-danmaku-container').on('click', '.guess-danmaku-danmu', function(e){
                  // 只有挑选方式为手动时才可点击
                  if(hoverDanmakuItem && vue.activeGuess.chooseWay == 'manual'){
  
                    // 暂停播放
                    vue.activeGuess.danmaku.pause();
  
                    var hoverDanmakuItem_ = hoverDanmakuItem;
  
                    hoverDanmakuItem_.guess = hoverDanmakuItem_.interaction.content;
  
                    vue.$confirm(`${hoverDanmakuItem_.guess}${hoverDanmakuItem_.guess.endsWith('?')?'':'?'}`, '是否命中', {
                      confirmButtonText: '命中',
                      cancelButtonText: '未命中',
                      closeOnClickModal : false,
                      closeOnPressEscape : false,
                    }).then(() => {
                      hoverDanmakuItem_.isValid = true;
                      hoverDanmakuItem_.index = vue.activeGuess.guessIndex;
                      vue.activeGuess.guessIndex += 1;
  
                      vue.activeGuess.guessList.splice(0, 0, hoverDanmakuItem_);
                      vue.activeGuess.matchGuessList.splice(0, 0, hoverDanmakuItem_);
                      // 关闭弹窗
                      vue.guessDanmakuDialogVisible = false;
                    }).catch((action) => {
                      if(action=='cancel'){
                        hoverDanmakuItem_.isValid = false;
                        hoverDanmakuItem_.index = vue.activeGuess.guessIndex;
                        vue.activeGuess.guessIndex += 1;
  
                        vue.activeGuess.guessList.splice(0, 0, hoverDanmakuItem_);
                        // 关闭弹窗
                        vue.guessDanmakuDialogVisible = false;
                      }
                      else{
  
                      }
                    });
  
                  }
                });
  
                // 开启轮询
                this.activeGuess.danmakuLoopHandler = window.setInterval(function(){
  
                  var now = new Date();
                  var findIndex = _.findIndex(danmakuList, function(danmaku){
  
                    // 距离上次发送已经超过5秒
                    return now - danmaku.sendTime >= 3*1000 && !danmaku.hover;
  
                  });
  
                  if(findIndex != -1){
                    vue.activeGuess.danmaku.send(danmakuList[findIndex].interaction.content);
                    danmakuList[findIndex].sendTime = now;
                  }
  
  
                }, 50);
  
  
  
                // 如果是随机选择，随机选中
                if(vue.activeGuess.chooseWay == 'random'){
                  var now = new Date();
                  // 竞猜问题倒计时结束
                  vue.activeGuess.handleGuessDanmakuCountdownFinish = function(){
  
                    // 暂停随机选中
                    window.clearInterval(vue.activeGuess.randomSelectHandler);
                    // 暂停弹幕
                    vue.activeGuess.danmaku.pause();
  
                    // 获取选中
                    var selectedEle = containerEle.querySelector('.is-select');
  
                    // 未选中信息
                    if(selectedEle==null){
                      vue.$message({
                        type : 'error',
                        message : '无法选中弹幕信息，本次问题获取失败',
                      });
                      // 关闭弹窗
                      vue.guessDanmakuDialogVisible = false;
  
                    }
                    else{
                      // 获取对应弹幕信息
                      var danmakuItem = danmakuContentMapper[selectedEle.innerText];
  
                      danmakuItem.guess = danmakuItem.interaction.content;
  
                      vue.$confirm(`${danmakuItem.guess}${danmakuItem.guess.endsWith('?')?'':'?'}`, '是否命中', {
                        distinguishCancelAndClose : true,
                        confirmButtonText: '命中',
                        cancelButtonText: '未命中',
                        closeOnClickModal : false,
                        closeOnPressEscape : false,
                      }).then(() => {
                        danmakuItem.isValid = true;
                        // 添加序号
                        danmakuItem.index = vue.activeGuess.guessIndex;
                        vue.activeGuess.guessIndex += 1;
  
                        vue.activeGuess.guessList.splice(0, 0, danmakuItem);
                        vue.activeGuess.matchGuessList.splice(0, 0, danmakuItem);
                        // 关闭弹窗
                        vue.guessDanmakuDialogVisible = false;
                      }).catch((action ) => {
                        // 未命中
                        if(action=='cancel'){
                          danmakuItem.isValid = false;
                          danmakuItem.index = vue.activeGuess.guessIndex;
                          vue.activeGuess.guessIndex += 1;
                          vue.activeGuess.guessList.splice(0, 0, danmakuItem);
                          // 关闭弹窗
                          vue.guessDanmakuDialogVisible = false;
                        }
                        else{
                        }
                      });
                    }
  
                  };
                  vue.activeGuess.randomSelectHandler = window.setInterval(function(){
  
                    // 删除已选中
                    var selectedEle = containerEle.querySelector('.is-select');
                    if(selectedEle){
                      selectedEle.classList.remove('is-select');
                    }
  
                    if(containerEle.children.length>0){
  
                      // 如果未有选中，或者没有兄弟节点，则选中第一个
                      if(selectedEle==null || selectedEle.nextElementSibling==null){
                        selectedEle =  containerEle.children[0];
                      }
                      // 否则选中下一个
                      else{
                        selectedEle = selectedEle.nextElementSibling;
                      }
  
                      selectedEle.classList.add('is-select');
                    }
  
                  }, 100);
  
                  vue.$refs.guessDanmakuDialog.$nextTick(function(){
                    // 倒计时文字
                    $('#guess-danmaku-countdown-text')
                      .countdown(new Date().getTime() + vue.activeGuess.countdown*1000, function(event){$(this).html(event.strftime('【%M:%S】'))})
                      .on('finish.countdown', vue.activeGuess.handleGuessDanmakuCountdownFinish);
  
                  });
  
                }
  
  
              });
            },
  
            openGuessStartDialog : function(guessFormData){
  
              var vue = this;
  
              this.guessStartDialogVisible = true;
              this.activeGuess = guessFormData;
  
              var danmakuContentMapper = {};
              var isInDirectGuess = false;
  
              // 监听狙击消息
              this.activeGuess.directGuessMessageHandler = callbackManager.register('command:狙击', function(data){
                // 当前是否位于狙击状态
                if(isInDirectGuess){
                  return;
                }
  
                // 非弹幕
                if(data.interaction.type != 'danmaku'){
                  return;
                }
  
                // 已结束竞猜
                if(vue.activeGuess.status != '进行中'){
                  return;
                }
  
                // 达到狙击总上限
                if(vue.activeGuess.maxDirectGuess > 0 && vue.activeGuess.directGuessList.length>=vue.activeGuess.maxDirectGuess){
                  return;
                }
  
                // 达到单个用户可狙击上限
                if(vue.activeGuess.maxDirectGuessPerUser>0 && _.filter(vue.activeGuess.directGuessList, {uid:data.uid}).length >= vue.activeGuess.maxDirectGuessPerUser ){
                  return;
                }
  
                // 不允许重复提问
                if(data.interaction.content in danmakuContentMapper){
                  return;
                }
  
                isInDirectGuess = true;
                var danmakuItem = _.cloneDeep(data);
                danmakuItem.guess = data.interaction.content;
                danmakuItem.sendTime = new Date();
                danmakuContentMapper[danmakuItem.interaction.content] = danmakuItem;
  
                // 打开询问
                vue.$confirm(`${danmakuItem.guess}${danmakuItem.guess.endsWith('?')?'':'?'}`, '狙击！是否命中？', {
                  confirmButtonText: '命中',
                  cancelButtonText: '未命中',
                  closeOnClickModal : false,
                  closeOnPressEscape : false,
                }).then(() => {
                  danmakuItem.isValid = true;
                  danmakuItem.index = vue.activeGuess.guessIndex;
                  vue.activeGuess.guessIndex += 1;
  
                  vue.activeGuess.directGuessList.splice(0, 0, danmakuItem);
                  // 关闭弹窗
                  vue.guessDanmakuDialogVisible = false;
                  isInDirectGuess = false;
  
                  vue.activeGuess.winner = danmakuItem;
                  // 修改状态
                  vue.activeGuess.status = '竞猜成功';
                  vue.$message({
                    type : 'info',
                    message : '竞猜成功！',
                  });
  
                }).catch((action) => {
                  if(action=='cancel'){
                    danmakuItem.isValid = false;
                    danmakuItem.index = vue.activeGuess.guessIndex;
                    vue.activeGuess.guessIndex += 1;
  
                    vue.activeGuess.directGuessList.splice(0, 0, danmakuItem);
                    isInDirectGuess = false;
  
                    // 达到狙击上限，竞猜失败
                    if(vue.activeGuess.maxDirectGuess>0 && vue.activeGuess.maxDirectGuess<=vue.activeGuess.directGuessList.length){
                      // 修改状态
                      vue.activeGuess.status = '竞猜失败';
                      vue.$message({
                        type : 'error',
                        message : '竞猜失败！',
                      });
                    }
  
                  }
                  else{
  
                  }
                });
  
              });
  
            },
            // 竞猜弹幕弹窗关闭回调
            handleGuessDanmakuDialogClose : function(){
  
              delete this.activeGuess.danmaku;
  
              if(this.activeGuess.messageHandler){
                callbackManager.cancel(this.activeGuess.messageHandler);
                this.activeGuess.messageHandler = null;
              }
  
              window.clearInterval(this.activeGuess.danmakuLoopHandler);
              this.activeGuess.danmakuLoopHandler = null;
  
              if(this.activeGuess.randomSelectHandler){
                window.clearInterval(this.activeGuess.randomSelectHandler);
                this.activeGuess.randomSelectHandler = null;
              }
              if(this.activeGuess.handleGuessDanmakuCountdownFinish){
                this.activeGuess.handleGuessDanmakuCountdownFinish = null;
              }
            },
            // 竞猜详情弹窗关闭
            handleGuessStartDialogClose : function(){
              // 关闭狙击消息获取
              if(this.activeGuess.directGuessMessageHandler){
                callbackManager.cancel(this.activeGuess.directGuessMessageHandler);
                this.activeGuess.directGuessMessageHandler = null;
              }
  
              this.activeGuess = null;
  
            },
  
            // 获取投稿数据
            getDougaList(){
  
              var vue = this;
  
              var pageSize = null;
              if(this.lotteryFormData.dougaType == 'video'){
                pageSize = 10;
              }
              else if(this.lotteryFormData.dougaType == 'article'){
                pageSize = 10;
              }
  
              var params = {
                'quickViewId' : `ac-space-${this.lotteryFormData.dougaType}-list`,
                'reqID': this.reqId,
                'ajaxpipe': 1,
                'type': this.lotteryFormData.dougaType,
                'order': 'newest',
                'page' : this.lotteryFormData.dougaListPage,
                'pageSize': pageSize,
              };
  
              this.reqId += 1;
              vue.lotteryFormData.dougaListLoading = true;
              commonRequrest(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + `/${this.uid}`, 'get', params, true, function(isSuccess, data){
  
  
                // 获取成功
                if(isSuccess){
  
  
                  document.querySelector('#douga-result').innerHTML = JSON.parse(data.replace('/*<!-- fetch-stream -->*/', ''))['html'];
  
                  var dougaEleList = null;
  
                  // 查看视频投稿
                  if(params.type == 'video'){
                    dougaEleList = document.querySelectorAll('#douga-result #ac-space-video-list a');
                  }
                  // 查看文章投稿
                  else if(params.type == 'article'){
                    dougaEleList = document.querySelectorAll('#douga-result #ac-space-article-list article');
                  }
  
  
                  // 无结果
                  if(!dougaEleList || dougaEleList.length==0){
                    vue.lotteryFormData.dougaListDisabled = true;
                    vue.lotteryFormData.dougaListNoMore = true;
                  }
                  else{
  
                    var dougaList = [];
  
                    // 视频投稿
                    if(params.type == 'video'){
  
                      dougaEleList.forEach(function(dougaEle){
  
                        dougaList.push({
                          id : dougaEle.attributes.href.value.split('/').pop().replace('ac', ''),
                          href : config.ACFUN_SERVER + dougaEle.attributes.href.value,
                          cover : dougaEle.querySelector('img').src,
                          title : dougaEle.querySelector('figcaption .title').title,
                          uploadDateText : dougaEle.querySelector('figcaption .date').innerText,
                          playCountText : dougaEle.querySelector('figcaption .play-info').innerText.match(/观看(?<count>[0-9\.万]+)/).groups['count'],
                        });
                      });
  
                    }
                    // 文章投稿
                    else if(params.type == 'article'){
  
                      dougaEleList.forEach(function(dougaEle){
  
  
                        dougaList.push({
                          id : dougaEle.querySelector('a').attributes.href.value.split('/').pop().replace('ac', ''),
                          href : config.ACFUN_SERVER + dougaEle.querySelector('a').attributes.href.value,
                          title : dougaEle.querySelector('a').title,
                          uploadDateText : dougaEle.querySelector('.info').innerText.match(/发布于\s*(?<date>\d{4}\/\d{2}\/\d{2})/).groups['date'],
                          playCountText : dougaEle.querySelector('.info').innerText.match(/(?<count>[0-9\.万]+)人围观/).groups['count'],
                        });
                      });
                    }
  
  
                    vue.lotteryFormData.dougaList.splice(vue.lotteryFormData.dougaList.length, 0, ...dougaList);
  
                    vue.lotteryFormData.dougaListPage += 1;
  
                  }
  
  
                }
                else{
  
                  vue.lotteryFormData.dougaListDisabled = true;
                  vue.lotteryFormData.dougaListNoMore = true;
  
                }
  
                vue.lotteryFormData.dougaListLoading = false;
  
  
              });
            },
  
            // 刷新投稿数据
            refreshDougaList(){
  
              this.lotteryFormData.dougaList = [];
              this.lotteryFormData.dougaListPage = 1;
              this.lotteryFormData.dougaListDisabled = false;
              this.lotteryFormData.dougaListLoading = false;
              this.lotteryFormData.dougaListNoMore = false;
              this.lotteryFormData.dougaListActiveIndex = null;
              this.getDougaList();
  
            },
            handleDougaListItemClick(dougaIndex){
              // 点击已选中投稿表示取消选中
              if(this.lotteryFormData.dougaListActiveIndex == dougaIndex){
                this.lotteryFormData.dougaListActiveIndex = null;
              }
              else{
                this.lotteryFormData.dougaListActiveIndex = dougaIndex;
  
              }
            },
            handleDougaListItemDetailClick(dougaIndex){
              window.open(this.lotteryFormData.dougaList[dougaIndex].href, '_blank');
            },
  
            // 获取投稿
            getCommentList(douga, all, callback){
  
              var vue = this;
  
              var params = {
                sourceId : douga.id,
                sourceType : 3,
                page : 1,
                pivotCommentId : 0,
                supportZtEmot : true,
              };
  
              var fetch = true;
              var commentList = [];
              var preCommentId = douga.commentList && douga.commentList.length>0?douga.commentList[0].id:null;
  
              var getData = function(){
  
                commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.COMMENT, 'get', params, true, function(isSuccess, data){
  
                  // 获取失败
                  if(!isSuccess){
                    callback(false, false, douga.commentCount, params.page, douga.commentListTotalPage);
                    fetch = false;
                  }
  
                  else{
  
                    data = JSON.parse(data);
  
                    // 返回错误
                    if(data.result != 0){
                      fetch = false;
                      return;
                    }
  
                    // 设置评论数量
                    douga.commentCount = data.commentCount;
                    douga.commentListTotalPage = data.totalPage;
  
                    data.rootComments.every(function(comment, commentIndex){
  
                      // 如果是已经获取过的评论，结束获取
                      if(comment.commentId == preCommentId){
                        fetch = false;
                        return false;
                      }
  
                      // 如果是未获取过的用户，添加
                      if(!(comment.userId in userInfo)){
                        userInfo[comment.userId] = {
                          uid : comment.userId,
                          userName : comment.userName,
                          photo : comment.headUrl[0].url,
                        };
                      }
  
                      commentList.push({
                        id : comment.commentId,
                        uid : comment.userId,
                        userName : comment.userName,
                        photo : comment.headUrl[0].url,
                        content : comment.content.replace(/\[emot=[^\[\]]*\]/g, ''),
                        floor : comment.floor,
                        date : moment(comment.timestamp).toDate(),
                        dateText : moment(comment.timestamp).format('MM-DD HH:mm'),
                      });
  
                      return true;
  
                    });
  
                    // 获取结束
                    if(params.page == douga.commentListTotalPage){
                      fetch = false;
                    }
  
  
                  }
  
  
                  if(!all){
                    fetch = false;
                  }
                  // 获取完毕
                  else if(params.page == douga.commentListTotalPage){
                    fetch = false;
                  }
  
                  // 继续获取
                  if(fetch){
                    params.page += 1;
                    // 回调
                    if(_.isFunction(callback)){
                      callback(true, false, douga.commentCount, params.page, douga.commentListTotalPage);
                    }
  
                    getData();
  
                  }
                  // 获取结束
                  else{
  
                    // 添加评论
                    if(!douga.commentList){
                      douga.commentList = [];
                    }
  
                    if(commentList.length>0){
                      douga.commentList.splice(0, 0, ...commentList);
                    }
  
                    // 回调
                    if(_.isFunction(callback)){
                      callback(true, true, douga.commentCount, params.page, douga.commentListTotalPage);
                    }
  
  
  
                  }
  
  
  
  
                });
  
              }
  
              // 获取数据
              getData();
  
            },
            clickMessage : function(message, isDouga){
  
              // 弹幕
              if(message.interaction.type == 'danmaku'){
  
                // 点击稿件，则复制稿件ac号
                if(isDouga){
                  clipboard.writeText(message.interaction.acSeries);
                  this.$message({
                    message : '已复制ac号：' + message.interaction.acSeries,
                    type : 'info',
                    duration : 2000,
                  });
                }
                // 否则复制弹幕内容
                else{
                  clipboard.writeText(message.interaction.content);
                  this.$message({
                    message : '已复制弹幕：' + message.interaction.content,
                    type : 'info',
                    duration : 2000,
                  });
                }
  
              }
  
            },
            getDougaByAcSeries(acSeries, callback){
  
              let vue = this;
  
              // 获取视频
              this.getVideoByAcSeries(acSeries, function(isSuccess, data){
  
                // 获取成功
                if(isSuccess){
  
                  if(_.isFunction(callback)){
                    callback(isSuccess, data);
                  }
  
                }
                // 获取失败，则获取文章
                else{
  
                  // 获取文章
                  vue.getArticleByAcSeries(acSeries, function(isSuccess, data){
  
                    // 获取成功
                    if(isSuccess){
  
                      if(_.isFunction(callback)){
                        callback(isSuccess, data);
                      }
  
                    }
                    else{
  
                      // 获取番剧
                      vue.getBangumiByAcSeries(acSeries, function(isSuccess, data){
  
                        // 获取成功
                        if(isSuccess){
  
                          if(_.isFunction(callback)){
                            callback(isSuccess, data);
                          }
  
                        }
                        else{
                          if(_.isFunction(callback)){
                            callback(isSuccess, data);
                          }
                        }
  
                      });
  
  
                    }
  
  
                  });
  
                }
  
              });
  
            },
            getVideoByAcSeries(acSeries, callback){
  
              commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.VIDEO + `/ac${acSeries}`, 'get', null, true, function(isSuccess, data){
  
  
                // 获取成功
                if(isSuccess){
  
                  var match = data.match(new RegExp('window.videoInfo = (?<data>.+)'));
                  // 匹配成功
                  if(match){
                    eval('var videoInfo = ' + match.groups.data);
  
                    if(_.isFunction(callback)){
                      callback(true, {
                        type : 'video',
                        title : videoInfo.title,
                        cover : videoInfo.coverUrl,
                        channel : videoInfo.channel,
                        description : videoInfo.description,
                        danmakuCount : videoInfo.danmakuCount,
                        danmakuCountText : videoInfo.danmakuCountShow,
                        playCount : videoInfo.viewCount,
                        playCountText : videoInfo.viewCountShow,
                        uid : parseInt(videoInfo.user.id),
                        userName : videoInfo.user.name,
                      });
                    }
  
                  }
                  else{
                    if(_.isFunction(callback)){
                      callback(false);
                    }
                  }
  
                }
                else{
  
                  if(_.isFunction(callback)){
                    callback(false);
                  }
                }
  
  
  
              });
  
            },
            getArticleByAcSeries(acSeries, callback){
  
              commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.ARTICLE + `/ac${acSeries}`, 'get', null, true, function(isSuccess, data){
  
  
                // 获取成功
                if(isSuccess){
  
  
                  var match = data.match(new RegExp('window.articleInfo = (?<data>.+)'));
                  // 匹配成功
                  if(match){
                    eval('var articleInfo = ' + match.groups.data);
  
                    if(_.isFunction(callback)){
                      callback(true, {
                        type : 'article',
                        title : articleInfo.title,
                        // cover : articleInfo.coverUrl,
                        description : articleInfo.description,
                        channel : articleInfo.channel,
                        playCount : articleInfo.viewCount,
                        playCountText : articleInfo.formatViewCount,
                        uid : parseInt(articleInfo.user.id),
                        userName : articleInfo.user.name,
                      });
                    }
  
                  }
                  else{
                    if(_.isFunction(callback)){
                      callback(false);
                    }
                  }
  
                }
                else{
  
                  if(_.isFunction(callback)){
                    callback(false);
                  }
                }
  
  
  
              });
  
            },
            getBangumiByAcSeries(acSeries, callback){
  
              commonRequrest(config.ACFUN_SERVER + config.URLS.DOUGA.BANGUMI + `/aa${acSeries}`, 'get', null, true, function(isSuccess, data){
  
  
                // 获取成功
                if(isSuccess){
  
  
                  var match = data.match(new RegExp('window.bangumiData = (?<data>.+)'));
                  // 匹配成功
                  if(match){
                    eval('var bangumiData = ' + match.groups.data);
  
                    if(_.isFunction(callback)){
                      callback(true, {
                        type : 'bangumi',
                        title : bangumiData.bangumiTitle,
                        acfunOnly : bangumiData.acfunOnly,
                        cover : bangumiData.bangumiCoverImageH,
                        description : bangumiData.bangumiIntro,
                        channel : bangumiData.channel,
                        playCount : bangumiData.playCount,
                        playCountText : bangumiData.playCountShow,
                        stowCount : bangumiData.stowCount,
                        stowCountText : bangumiData.stowCountShow,
                      });
                    }
  
                  }
                  else{
                    if(_.isFunction(callback)){
                      callback(false);
                    }
                  }
  
                }
                else{
  
                  if(_.isFunction(callback)){
                    callback(false);
                  }
                }
  
  
  
              });
  
            },
            // 发送一条测试用的弹幕
            pushTestMessage : function(type){
              var message = {
                uid : 37693149,
                vup : false,
                userName : '特工澪',
                badgeName : '505团',
                badgeLevel : 999,
                badgeColor : 'black',
                photo : 'https://tx-free-imgs2.acfun.cn/kimg/EJjM1y8qPQoFYWNmdW4SBWltYWdlGi0zNzY5MzE0OV8yYTE4YjBiZTZhZTM0OTc1OTkyNDIyZGFhMTdlNzA0MS5wbmc.png',
                interaction : {
                  type: type,
                  sendTime : new Date(),
                  id: uuidv4(),
                  giftName: '猴岛',
                  giftCount: 1,
                  content: type == 'danmaku'?'听我说👂👂👂谢谢你🙏🙏🙏因为有你👉👉👉温暖了四季🌈🌈🌈谢谢你🙏🙏🙏感谢有你👉👉👉世界更美丽🌏🌏🌏我要谢谢你🙏🙏🙏因为有你👉👉👉爱常在心底💃💃💃谢谢你 🙏🙏🙏感谢有你🙇♂🙇♂🙇♂把幸福传递 ac32814163':'',
                },
              };
              if(!(message.uid in userInfo)){
                userInfo[message.uid] = {
                  userName: message.userName,
                  photo: message.photo,
                };
              }
              callbackManager.feed('message', message);
            },
            pushTestDanmakuMessage: function(){
              this.pushTestMessage('danmaku');
            },
            pushTestGiftMessage: function(){
              this.pushTestMessage('gift');
            },
            pushTestLikeMessage: function(){
              this.pushTestMessage('like');
            },
            pushTestEnterRoomMessage: function(){
              this.pushTestMessage('enterroom');
            },
            pushTestFollowMessage: function(){
              this.pushTestMessage('follow');
            },
            pushTestJoinClubMessage: function(){
              this.pushTestMessage('joinclub');
            },
  
          },
          computed : {
            danmakuMessageClass: function(){
              return ['live-message-danmaku'].concat(this.borderClass);
            },
            backgroundStyle: function(){
              style = {
                background: this.interactionFormData.backgroundColor,
              };
              return style;
            },
            borderClass: function(){
              classes = [];
              // 圆角矩形边框
              if(this.interactionFormData.borderShape == 'round'){
              }
              // 矩形
              else if(this.interactionFormData.borderShape == 'rect'){
  
              }
              // 流动
              else if(this.interactionFormData.borderShape == 'flow'){
                classes.push('live-message-border-flow')
              }
              return classes;
            },
            borderStyle: function(){
              style = {};
              // 圆角矩形边框
              if(this.interactionFormData.borderShape == 'round'){
                style['border-radius'] = '6px';
                style['border'] = `${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}`;
              }
              // 矩形
              else if(this.interactionFormData.borderShape == 'rect'){
                style['border'] = `${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}`;
              }
              // 流动
              else if(this.interactionFormData.borderShape == 'flow'){
                GM_addStyle(`
                  .live-message-border-flow.active{
                    border: ${this.interactionFormData.borderSize}px solid transparent
                  }
                  .live-message-border-flow.inactive{
                    border: ${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}
                  }
                `);
              }
  
              // 自适应宽度
              if(this.interactionFormData.borderWidth == 'auto'){
                style['width'] = 'max-content';
                style['display'] = 'table-cell';
              }
              // 定宽
              else if(this.interactionFormData.borderWidth == 'fixed'){
                style['width'] = '100%';
                style['display'] = 'block';
              }
              return style;
            },
            borderFlowItemStyle: function(){
              style = {};
              // 圆角矩形边框
              if(this.interactionFormData.borderShape == 'round'){
              }
              // 矩形
              else if(this.interactionFormData.borderShape == 'rect'){
  
              }
              // 流动
              else if(this.interactionFormData.borderShape == 'flow'){
  
                GM_addStyle(`
                  .live-message-border-flow.active .border-flow-item::before,.live-message-border-flow.active .border-flow-item::after{
                    border: ${this.interactionFormData.borderSize}px solid ${this.interactionFormData.borderColor}
                  }
                  .live-message-border-flow .border-flow-item::before,.live-message-border-flow .border-flow-item::after{
                    top: -${this.interactionFormData.borderSize}px;
                    bottom: -${this.interactionFormData.borderSize}px;
                    left: -${this.interactionFormData.borderSize}px;
                    right: -${this.interactionFormData.borderSize}px;
                  }
                `);
              }
              return style;
            },
            userNameMessageStyle : function(){
  
              return {
                'color':this.interactionFormData.userNameFontColor,
                'font-size':this.interactionFormData.userNameFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, 0px -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, ${this.interactionFormData.userNameFontShadowSize}px 0px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, -${this.interactionFormData.userNameFontShadowSize}px 0px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, -${this.interactionFormData.userNameFontShadowSize}px -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, ${this.interactionFormData.userNameFontShadowSize}px -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}, -${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowSize}px ${this.interactionFormData.userNameFontShadowColor}`,
              };
            },
            userBadgeStyle : function(){
  
              return {
                'font-size':this.interactionFormData.userNameFontSize*0.8 + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
              };
  
            },
            userPhotoSize : function(){
              return this.interactionFormData.userNameFontSize*2;
            },
            danmakuMessageStyle : function(){
              return {
                ...this.borderStyle,
                'background-image' : `linear-gradient(to right, ${this.interactionFormData.danmakuBackgroundColor}, ${this.interactionFormData.danmakuBackgroundGradientColor})`,
                'color':this.interactionFormData.danmakuFontColor,
                'font-size':this.interactionFormData.danmakuFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
  
              };
  
            },
            danmakuMessageContainerStyle : function(){
  
              // 横版
              if(this.interactionFormData.direction == 'horizontal'){
                var style = {
                  'max-width' : this.interactionFormData.danmakuFontSize*20 + 'px',
                };
                if(this.interactionFormData.displayNotWrap){
                  style.height = '100%';
                }
                return style;
  
              }
              // 纵版
              else{
              }
  
            },
            danmakuDougaMessageStyle: function(){
              return {
                ...this.borderStyle,
                'border': 'transparent',
                'display': 'block',
                'width': this.danmakuDougaContainerStyle.width,
                'background-image' : `linear-gradient(to right, ${this.interactionFormData.danmakuDougaBackgroundColor}, ${this.interactionFormData.danmakuDougaBackgroundColor})`,
                'color':this.interactionFormData.danmakuFontColor,
                'font-size':this.interactionFormData.danmakuFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px 0px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${this.interactionFormData.danmakuFontShadowSize}px -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
  
              };
            },
            danmakuDougaContainerStyle: function(){
  
              var height = Math.ceil(this.interactionFormData.danmakuFontSize*0.8*1.3*3 + this.interactionFormData.danmakuFontSize*0.6*1.3*2);
              var width = Math.ceil(height*16/9)*2;
  
              return {
                'width' : width + 'px',
              };
  
            },
            danmakuDougaTitleStyle : function(){
  
              var fontSize = Math.ceil(this.interactionFormData.danmakuFontSize*0.8);
              var shadowSize = Math.ceil(this.interactionFormData.danmakuFontShadowSize*0.8);
              var height = Math.ceil(fontSize*1.3 * 3);
  
              return {
                'height': height + 'px',
                'color':this.interactionFormData.danmakuFontColor,
                'font-size':fontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
              };
            },
            danmakuDougaDescriptionStyle : function(){
  
              var fontSize = Math.ceil(this.interactionFormData.danmakuFontSize*0.6);
              var shadowSize = Math.ceil(this.interactionFormData.danmakuFontShadowSize*0.6);
  
              return {
                'font-size':fontSize + 'px',
                'text-shadow':`0px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
              };
            },
            danmakuDougaCoverStyle : function(){
  
              var height = Math.ceil(this.interactionFormData.danmakuFontSize*0.8*1.3*3 + this.interactionFormData.danmakuFontSize*0.6*1.3*2);
              var width = Math.ceil(height*16/9);
  
  
              return {
                'height' : height + 'px',
                'width' : width + 'px',
              };
  
            },
            danmakuDougaLeftColStyle : function(){
              return {
                'width': this.danmakuDougaCoverStyle.width,
                'display': 'inline-block',
                'float': 'left',
              };
            },
            danmakuDougaRightColStyle : function(){
              return {
                'width': `calc(100% - ${this.danmakuDougaLeftColStyle.width})`,
                'display': 'inline-block',
                'float': 'left',
              };
            },
            danmakuDougaInfoStyle : function(){
  
              var fontSize = Math.ceil(this.interactionFormData.danmakuFontSize*0.6);
              var shadowSize = Math.ceil(this.interactionFormData.danmakuFontShadowSize*0.6);
  
              return {
                'color':this.interactionFormData.danmakuFontColor,
                'font-size':fontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, 0px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px 0px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, ${shadowSize}px -${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}, -${shadowSize}px ${shadowSize}px ${shadowSize}px ${this.interactionFormData.danmakuFontShadowColor}`,
              };
  
            },
            giftMessageStyle : function(){
  
              return {
                ...this.borderStyle,
                'background-image' : `linear-gradient(to right, ${this.interactionFormData.giftBackgroundColor}, ${this.interactionFormData.giftBackgroundGradientColor})`,
                'color':this.interactionFormData.giftFontColor,
                'font-size':this.interactionFormData.giftFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, 0px -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, ${this.interactionFormData.giftFontShadowSize}px 0px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, -${this.interactionFormData.giftFontShadowSize}px 0px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, -${this.interactionFormData.giftFontShadowSize}px -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, ${this.interactionFormData.giftFontShadowSize}px -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}, -${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowSize}px ${this.interactionFormData.giftFontShadowColor}`,
              };
            },
            giftMessageContainerStyle : function(){
  
              // 横版
              if(this.interactionFormData.direction == 'horizontal'){
                var style = {
                  'max-width' : this.interactionFormData.giftFontSize*20 + 'px',
                };
                if(this.interactionFormData.displayNotWrap){
                  style.height = '100%';
                }
                return style;
  
              }
              // 纵版
              else{
              }
  
            },
            giftImageSize : function(){
              return this.interactionFormData.giftFontSize*1.5;
            },
            giftCountStyle : function(){
              return {
                'font-size':this.interactionFormData.giftFontSize*1.5 + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1] == 'inherit' ? 'gift':this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
              };
            },
            likeMessageStyle : function(){
  
              return {
                'color':this.interactionFormData.likeFontColor,
                'font-size':this.interactionFormData.likeFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, 0px -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, ${this.interactionFormData.likeFontShadowSize}px 0px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, -${this.interactionFormData.likeFontShadowSize}px 0px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, -${this.interactionFormData.likeFontShadowSize}px -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, ${this.interactionFormData.likeFontShadowSize}px -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}, -${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowSize}px ${this.interactionFormData.likeFontShadowColor}`,
              };
  
            },
            likeMessageContainerStyle : function(){
  
              // 横版
              if(this.interactionFormData.direction == 'horizontal'){
                return {
                  'max-width' : this.interactionFormData.likeFontSize*20 + 'px',
                }
  
              }
              // 纵版
              else{
              }
  
            },
            enterroomMessageStyle : function(){
              return {
                'color':this.interactionFormData.enterroomFontColor,
                'font-size':this.interactionFormData.enterroomFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, 0px -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, ${this.interactionFormData.enterroomFontShadowSize}px 0px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, -${this.interactionFormData.enterroomFontShadowSize}px 0px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, -${this.interactionFormData.enterroomFontShadowSize}px -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, ${this.interactionFormData.enterroomFontShadowSize}px -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}, -${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowSize}px ${this.interactionFormData.enterroomFontShadowColor}`,
              };
  
            },
            enterroomMessageContainerStyle : function(){
  
              // 横版
              if(this.interactionFormData.direction == 'horizontal'){
                return {
                  'max-width' : this.interactionFormData.enterroomFontSize*20 + 'px',
                }
  
              }
              // 纵版
              else{
              }
  
            },
            followMessageStyle : function(){
  
              return {
                'color':this.interactionFormData.followFontColor,
                'font-size':this.interactionFormData.followFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, 0px -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, ${this.interactionFormData.followFontShadowSize}px 0px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, -${this.interactionFormData.followFontShadowSize}px 0px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, -${this.interactionFormData.followFontShadowSize}px -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, ${this.interactionFormData.followFontShadowSize}px -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}, -${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowSize}px ${this.interactionFormData.followFontShadowColor}`,
              };
  
            },
            followMessageContainerStyle : function(){
  
              // 横版
              if(this.interactionFormData.direction == 'horizontal'){
                return {
                  'max-width' : this.interactionFormData.followFontSize*20 + 'px',
                }
  
              }
              // 纵版
              else{
              }
  
            },
            joinclubMessageStyle : function(){
  
              return {
                'color':this.interactionFormData.joinclubFontColor,
                'font-size':this.interactionFormData.joinclubFontSize + 'px',
                'font-family' : this.interactionFormData.fontFamily[this.interactionFormData.fontFamily.length-1],
                'text-shadow':`0px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, 0px -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, ${this.interactionFormData.joinclubFontShadowSize}px 0px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, -${this.interactionFormData.joinclubFontShadowSize}px 0px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, -${this.interactionFormData.joinclubFontShadowSize}px -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, ${this.interactionFormData.joinclubFontShadowSize}px -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}, -${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowSize}px ${this.interactionFormData.joinclubFontShadowColor}`,
              };
  
            },
            joinclubMessageContainerStyle : function(){
  
              // 横版
              if(this.interactionFormData.direction == 'horizontal'){
                return {
                  'max-width' : this.interactionFormData.joinclubFontSize*20 + 'px',
                }
  
              }
              // 纵版
              else{
              }
  
            },
            activeGuessGuessListData : function(){
              var listData = this.activeGuess.displayDirectGuess?this.activeGuess.directGuessList:(this.activeGuess.onlyDisplayMatch?this.activeGuess.matchGuessList:this.activeGuess.guessList);
              return listData?listData:[];
            },
            toUserSpace: function(...args){
              console.log(args)
              // console.log(candidate, config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + '/' + candidate.uid)
              // window.open(config.ACFUN_SERVER + config.URLS.ACFUN_USER.SPACE + '/' + candidate.uid);
            },
  
          },
          mounted : function(){
  
            var vue = this;
  
            var messageContainerEle = document.querySelector('.container-live-feed-messages-acfunlive .live-message-container');
  
            // 获取弹幕消息
            callbackManager.register('message', function(data){
  
              // 修改信息
              if(_.isFunction(vue.interactionFormData.modifyContentFunc)){
  
                vue.interactionFormData.modifyContentFunc(data);
  
              }
  
              if(data.interaction.type == 'enterroom'){
                userInfo[data.uid].hasEnterroom = true;
              }
              else if(data.interaction.type == 'danmaku'){
                userInfo[data.uid].hasDanmaku = true;
                vue.lastDanmakuMessage = data;
              }
              else if(data.interaction.type == 'like'){
                userInfo[data.uid].hasLike = true;
              }
              else if(data.interaction.type == 'gift'){
                userInfo[data.uid].hasGift = true;
              }
              else if(data.interaction.type == 'follow'){
                userInfo[data.uid].hasFollow = true;
              }
  
              // 礼物合并
              if(
                data.interaction.type == 'gift'
                && userInfo[data.uid].lastInteraction
                && userInfo[data.uid].lastInteraction.type == 'gift'
                && data.interaction.giftName == userInfo[data.uid].lastInteraction.giftName
                && data.interaction.sendTime - userInfo[data.uid].lastInteraction.sendTime<=5*1000*(data.interaction.giftName=='香蕉'?2:1)
              ){
  
                userInfo[data.uid].lastInteraction.giftCount += data.interaction.giftCount;
                userInfo[data.uid].lastInteraction.sendTime = data.interaction.sendTime;
                userInfo[data.uid].lastInteraction.doAnime = false;
                userInfo[data.uid].lastInteraction.doAnime = true;
              }
              else{
                vue.messageData.push(data);
                userInfo[data.uid].lastInteraction = data.interaction;
              }
  
  
              if(data.interaction.type == 'danmaku'){
                // 如果有ac号，获取稿件信息
                data.interaction.acSeries = extractAcSeries(data.interaction.content);
  
                if(data.interaction.acSeries != null){
                  vue.getDougaByAcSeries(data.interaction.acSeries, function(isSuccess, douga){
  
                    // 获取稿件成功
                    if(isSuccess){
                      data.interaction.douga = douga;
                    }
  
                  });
                }
  
                // 如果是指令
                var command = extractCommand(data.interaction.content);
  
                if(command!=null){
                  data = _.cloneDeep(data);
                  data.command = command.command;
                  data.interaction.content = command.text;
                  callbackManager.feed('command:'+command.command, data);
                }
  
              }
  
  
              // 如果鼠标没有悬浮，则自动滚动至底部
              if(!vue.mouseOn){
                vue.$nextTick(function(){
                  // 横版滚动
                  if(vue.interactionFormData.direction=='horizontal'){
                    messageContainerEle.scrollLeft = messageContainerEle.scrollWidth;
                  }
                  // 纵版滚动
                  else{
                    messageContainerEle.scrollTop = messageContainerEle.scrollHeight;
                  }
                });
              }
            });
  
  
            // 监听事件
            messageContainerEle.addEventListener('mouseenter', function(e){
              // 鼠标悬浮，显示滚动条
              vue.mouseOn = true;
  
            });
  
            messageContainerEle.addEventListener('mouseleave', function(e){
              // 鼠标离开，隐藏滚动条
              vue.mouseOn = false;
  
            });
  
  
            this.giftList.forEach(function(gift){
              vue.giftNameMapper[gift.name] = gift;
            });
  
            async function loadData(){
              // 查看缓存的数据
              var audioFormData = await GM_getValue('audioFormData');
              if(audioFormData){
                vue.audioFormData = JSON.parse(audioFormData);
                vue.handleAudioFormSubmitValid();
              }
              var interactionPreset = await GM_getValue('interactionPreset');
              if(interactionPreset){
                interactionPreset = JSON.parse(interactionPreset);
                vue.interactionPreset = interactionPreset;
                var activeInteractionPresetIndex = _.findIndex(interactionPreset, {active:true});
                if(activeInteractionPresetIndex!=-1){
                  vue.activeInteractionPreset(interactionPreset[activeInteractionPresetIndex]);
  
                  vue.downloadedFonts = await GM_getValue('downloadedFonts');
                  for(var fontName in vue.downloadedFonts){
                    // 添加字体
                    GM_addStyle(`
                      @font-face{
                        font-family : ${fontName};
                        src: url(data:font/truetype;charset=utf-8;base64,${vue.downloadedFonts[fontName]}) format('truetype');
                      }
                    `);
                  }
                }
              }
              else{
                vue.handleInteractionFormSubmitValid();
              }
              /*var interactionFormData = await GM_getValue('interactionFormData');
              if(interactionFormData){
                interactionFormData = JSON.parse(interactionFormData);
  
                if(!interactionFormData.historyMinutes){
                  interactionFormData.historyMinutes = 10;
                }
                if(!interactionFormData.historyCount){
                  interactionFormData.historyCount = 200;
                }
  
                if(interactionFormData.joinclubFontSize){
                  vue.interactionFormData = interactionFormData;
                  vue.handleInteractionFormSubmitValid();
  
                  // 默认字体
                  if(!vue.interactionFormData.fontFamily){
                    vue.interactionFormData.fontFamily = ['default', 'inherit'];
                  }
  
                  var fontName = vue.interactionFormData.fontFamily[vue.interactionFormData.fontFamily.length-1];
  
                  if(fontName!='inherit'){
                    vue.downloadedFonts = await GM_getValue('downloadedFonts');
                    for(var fontName in vue.downloadedFonts){
                      // 添加字体
                      GM_addStyle(`
                        @font-face{
                          font-family : ${fontName};
                          src: url(data:font/truetype;charset=utf-8;base64,${vue.downloadedFonts[fontName]}) format('truetype');
                        }
                      `);
                    }
                  }
  
                }
  
  
              }
              else{
                vue.handleInteractionFormSubmitValid();
              }*/
            }
            loadData();
  
            // 每500毫秒获取一次用户信息，避免被封
            window.setInterval(()=>{
              if(vue.candidateInfoCallbacks.length>0){
                let [candidate, callback] = vue.candidateInfoCallbacks.splice(0, 1)[0];
                vue._getCandidateInfo(candidate, callback);
  
                [candidate, callback] = vue.candidateInfoCallbacks.splice(0, 1)[0];
                vue._getCandidateInfo(candidate, callback);
  
  
                [candidate, callback] = vue.candidateInfoCallbacks.splice(0, 1)[0];
                vue._getCandidateInfo(candidate, callback);
              }
            }, 500);
  
            // 按键绑定，从ctrl+alt+0到ctrl+alt+9
            hotkeys(_.range(10).map((index)=>`ctrl+alt+${index}`).join(','), (event, handler)=>{
              var index = parseInt(handler.key.split('+')[2]);
              console.log('key', index, this.interactionPreset[index-1])
              if(index<=this.interactionPreset.length){
                this.activeInteractionPreset(this.interactionPreset[index-1]);
              }
            });
  
          },
      });
  
      return vue;
    }
  
  
    disableVideos();
  
  
    window.onload = function(){
      start();
  
      var intervalHandler = window.setInterval(function(){
        if(loadVue()){
          window.clearInterval(intervalHandler);
        }
      }, 500);
  
    };
  
  })();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址