export class Barrage {
  constructor(obj) {
  // 每次 new Barrage()  傳入一個 后臺返回的數(shù)據(jù)對象 obj
    const { barrageId, speed, level, top, jumpUrl, barrageContent, animationPlayState, ...args } = obj
    this.barrageId = barrageId; // id ： 每條彈幕的唯一id
    this.speed = speed; // speed ： 彈幕運行的速度，由外界控制 
    this.level = level; // level ： 彈幕的層級 --> 彈幕可分為設(shè)計可分為 上下 1 , 1 兩個層級 ，可決定彈幕的顯示是全屏還是半屏顯示
    this.top = top; //  top ：彈幕生成的位置相對于 level 的層級 決定 ，相對于 Level 層級 盒子距離頂部的位置
    this.jumpUrl = jumpUrl; //  jumpUrl ：點擊彈幕需要跳轉(zhuǎn)的鏈接
    this.barrageContent = barrageContent; // barrageContent ： 彈幕的內(nèi)容
    this.animationPlayState = ''; // 設(shè)計彈幕 是否可 點擊暫停功能
    this.color = '#FFF' // 彈幕顏色
    this.args = args // 除去Barrage類之外的一些數(shù)據(jù)屬性全部丟到這里，例如后臺返回的數(shù)據(jù)
  }
}

export class BarrageManager {
constructor(barrageVue) {
    this.barrages = []; // 填彈幕的數(shù)組
    this.barragesIds = [] // 批量刪除彈幕的數(shù)組id
    this.sourceBarrages = [] // 源彈幕數(shù)據(jù)
    this.timer = null //控制彈幕的開啟和關(guān)
    this.barrageVue = barrageVue // 彈幕組件實例
    this.deleteCount = 0, // 銷毀彈幕的總數(shù)
    this.lastDeleteCount = 0, // 最后可銷毀的數(shù)量
    this.row = 0,
    this.count = 0
  }
  init(barrages) {
    this.sourceBarrages = barrages
    this.deleteCount = parseInt(this.sourceBarrages.length / deleteQuantity.FIFTY) // 計算可刪除數(shù)量 
    this.lastDeleteCount = this.sourceBarrages.length % deleteQuantity.FIFTY // 計算 最后一次可刪除數(shù)量
  }
   /**
   * 
   * @param {*} barrages 接收一個彈幕數(shù)組數(shù)據(jù) 
   * @description 循環(huán)創(chuàng)建 彈幕對象 ，將后臺數(shù)據(jù)與 創(chuàng)建彈幕的屬性結(jié)合 存入彈幕數(shù)組
   */
  loopCreateBarrage(barrages) {
    const { rows, createTime, crearteBarrageObject } = this.barrageVue
    let maxRows = rows / 2 // 最大的彈幕行數(shù)
    this.timer = setInterval(() => {
      for (let i = 0; i < 1; i++) {
        let barrageItem = barrages[this.count]
        if (this.row >= maxRows) { this.row = 0 } // 如果當(dāng)前已經(jīng)到了 最大的彈幕行數(shù)臨界點則 回到第0 行彈道繼續(xù) 創(chuàng)建
        if (!barrageItem) return clearInterval(this.timer) // 如果取不到了則證明沒數(shù)據(jù)了 ， 結(jié)束彈幕展示
        const item = crearteBarrageObject({ row: this.row, ...barrageItem }) // 添加對象到 彈幕數(shù)組中
        this.addBarrage(item)
        this.count++ // 用于取值 ,取了多少條
        this.row++ // 用于彈道
      }
    }, createTime * 1000);
  }
   /**
   * @param {*} barrages 傳入一個彈幕數(shù)組數(shù)據(jù) 
   * @returns 無返回值
   * @description 調(diào)用 該方法 開始播放彈幕
   */
  open(barrages) {
    if (barrages.length === 0) return
    this.init(barrages)
    this.loopCreateBarrage(this.sourceBarrages)
    }
}

<template>
  <div class="barrage">
    <div class="barrage-container" ref="barrageContainer">
      <div class="barrage-half-screen" ref="halfScreenContainer">
        <template v-for="item in barrageFiltering.level1">
          <barrage-item 
            :item="item" :class="{pausedAnimation : paused }" 
            :options='barrageTypeCallback(item)' 
            @destory="destoryBraageItem" :key="item.barrageId">
          </barrage-item>
        </template>
      </div>
      <div class="barrage-full-screen" v-if="fullScreen">
        <template v-for="item in barrageFiltering.level2">
          <barrage-item 
            :item="item" :class="{pausedAnimation : paused }"
            :options='barrageTypeCallback(item)'
            @destory="destoryBraageItem" :key="item.barrageId">
          </barrage-item>
        </template>
      </div>
    </div>
    <user-input ref="publishBarrage" v-if="openPublishBarrage" @onBlur="handleBlur">
      <template #user-operatio-right>
        <!-- 處理兼容性問題 ios 和 安卓 觸發(fā)點擊事件 -->
        <div class="send" @click="sendBarrage($event)" v-if="IOS">
          <slot name="rightRegion"></slot>
        </div>
        <div class="send" @mousedown="sendBarrage($event)" v-else>
          <slot name="rightRegion"></slot>
        </div>
      </template>
    </user-input>
  </div>
</template>
export default {
  created () {
    this.barrageManager = new BarrageManager(this)
  },
  mounted() {
    // 初始化彈幕渲染數(shù)據(jù)
    this.initBarrageRenderData();
  },
  data() {
    return {
      barrageManager : null,
      isClickSend: false,
      paused : false
    };
  },
  methods : {
    initBarrageRenderData() {
      this.barrageManager.open(this.barrages);
    },
  },
  computed : {
   barrageFiltering() {
      return {
        level1:
          this.barrageManager.barrages.filter(
            item => item.level === barrageLevel.LEVEL1
          ) || [],
        level2:
          this.barrageManager.barrages.filter(
            item => item.level === barrageLevel.LEVEL2
          ) || []
      };
    },
  }
}

 class BarrageManager {
 constructor(barrageVue) {
    this.barrages = []; // 填彈幕的數(shù)組
    this.barragesIds = [] // 批量刪除彈幕的數(shù)組id
    this.sourceBarrages = [] // 源彈幕數(shù)據(jù)
    this.timer = null //控制彈幕的開啟和關(guān)
    this.barrageVue = barrageVue // 彈幕組件實例
    this.deleteCount = 0, // 銷毀彈幕的總數(shù)
    this.lastDeleteCount = 0, // 最后可銷毀的數(shù)量
    this.row = 0,
    this.count = 0
  }
 /**
   * @return 無返回值 
   * @description 調(diào)用close 方法 關(guān)閉彈幕
   */
  close() {
    clearInterval(this.timer)
    this.removeAllBarrage()
  }
   /**
   * @description 刪除全部的彈幕數(shù)據(jù)
   */
  removeAllBarrage() {
    this.barrages = []
  }
 }

  addBarrage(barrageContent) {
      // 獲取當(dāng)前 定時器正在創(chuàng)建的 一行
      let currentRow = this.barrageManager.getRow();
      let row = currentRow === this.rows / 2 ? 0 : currentRow + 1;
      if (row === this.rows / 2) {
        row = 0;
      }
      let myBarrage = {
        row,
        barrageId: '1686292223004',
        barrageContent,
        style: this.style,
        type: "mySelf", // 用戶自己發(fā)布的彈幕類型
        barrageCategory: this.userBarrageType
      };
      const item = this.crearteBarrageObject(myBarrage);
      this.barrageManager.addBarrage(item); // 數(shù)據(jù)準(zhǔn)備好了 調(diào)用添加方法
      console.info("發(fā)送成功")
      this.barrageManager.setRow(row + 1);
    },

 class BarrageManager {
 constructor(barrageVue) {
    this.barrages = []; // 填彈幕的數(shù)組
    this.barragesIds = [] // 批量刪除彈幕的數(shù)組id
    this.sourceBarrages = [] // 源彈幕數(shù)據(jù)
    this.timer = null //控制彈幕的開啟和關(guān)
    this.barrageVue = barrageVue // 彈幕組件實例
    this.deleteCount = 0, // 銷毀彈幕的總數(shù)
    this.lastDeleteCount = 0, // 最后可銷毀的數(shù)量
    this.row = 0,
    this.count = 0
  }
   /**
   * 
   * @param {*} obj  合并完整的的彈幕對象
   * @param  {...any} args 開發(fā)者以后可能需要傳遞的剩余參數(shù)
   */
  addBarrage(obj, ...args) {
    const barrage = new Barrage(obj, ...args)
    this.barrages.push(barrage)
  }
 }

class BarrageManager {
constructor(barrageVue) {
    this.barrages = []; // 填彈幕的數(shù)組
    this.barragesIds = [] // 批量刪除彈幕的數(shù)組id
    this.sourceBarrages = [] // 源彈幕數(shù)據(jù)
    this.timer = null //控制彈幕的開啟和關(guān)
    this.barrageVue = barrageVue // 彈幕組件實例
    this.deleteCount = 0, // 銷毀彈幕的總數(shù)
    this.lastDeleteCount = 0, // 最后可銷毀的數(shù)量
    this.row = 0,
    this.count = 0
  }
/**
   * 
   * @param {*} barrageId  // 入?yún)?彈幕id
   * @returns 無返回值
   * @description 添加需要批量刪除的 id 到 批量刪除的棧中 barragesIds
   */
  addBatchRemoveId(barrageId) {
    this.barragesIds.push(barrageId)
    this.batchRemoveHandle()
  }
  /**
   * 
   * @param {*} start  你需要從第幾位開始刪除
   * @param {*} deleteCount  // 刪除的總數(shù)是多少個
   * @returns 無返回值
   */
  batchRemoveBarrage(start, deleteCount) {
    if (this.barrages.length === 0) return
    this.barrages.splice(start, deleteCount)
  }
  batchRemoveId(start, deleteCount) {
    if (this.barragesIds.length === 0) return
    this.barragesIds.splice(start, deleteCount)
  }
  /**
   * @param {*} barrageId  彈幕 id 針對單個刪除彈幕時 使用 
   */
  removeBarrage(barrageId) {
    let index = this.barrages.findIndex(item => item.barrageId === barrageId)
    this.barrages.splice(index, 1)
  }
  /**
   * @description 刪除全部的彈幕數(shù)據(jù)
   */
  removeAllBarrage() {
    this.barrages = []
  }
  // 批量移除邏輯處理
  batchRemoveHandle() {
    if (this.deleteCount === 0 || this.deleteCount === 0) {
      if (this.barragesIds.length === this.lastDeleteCount) {
        this.batchRemoveBarrage(0, this.lastDeleteCount)
        this.batchRemoveId(0, this.lastDeleteCount)
      }
    } else {
      if (this.barragesIds.length === deleteQuantity.FIFTY) {
        this.batchRemoveBarrage(0, deleteQuantity.FIFTY)
        this.batchRemoveId(0, deleteQuantity.FIFTY)
        this.deleteCount--
      }
    }
  }
} 

barrageTypeCallback ( {args} ) {
 const { barrageCategary } = args
 if(barrageCategary === 'type1'){
 retun {
 className : 'classOne',
 children : {
     show : false
     i : {
     showIcon : false,
     style : {
     color : 'red'
     }
     }
    }
   }
 }
 else{
 return { className : 'default' }
 }
}