<template>
  <div class="root">
    <div class="container-shell">
      <div class="paint-tips" v-if="ifDraw">双击结束绘制</div>
      <div id="container" ref="container"></div>
      <div class="operate-btns" v-if="showPaint">
        <div v-if="!ifDraw" @click="paintPolygon">
          <el-icon>
            <Edit />
          </el-icon>
          <span>绘制</span>
        </div>
        <div v-else @click="paintPolygon">
          <el-icon>
            <CircleClose />
          </el-icon>
          <span>取消绘制</span>
        </div>
        <div @click="clearDraw">
          <el-icon>
            <Delete />
          </el-icon>
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import useDraw from './useDraw';
export default {
  name: "JessibucaPlayer",
  props: ['videoUrl','showPaint'],
  data () {
    return {
      jessibuca: null,
      // videoUrl: 'http://200.200.19.126:81/rtp/34020000001320000009_34020000001320000001.live.flv',
      // videoUrl: 'http://pull-demo.volcfcdnrd.com/live/st-4536523_yzmhde.flv',
      version: '',
      wasm: false,
      vc: "ff",
      playing: false,
      quieting: true,
      loaded: false, // mute
      showOperateBtns: true,
      showBandwidth: false,
      err: "",
      speed: 0,
      performance: "",
      volume: 1,
      rotate: 0,
      useWCS: false,
      useMSE: true,
      useOffscreen: false,
      recording: false,
      recordType: 'mp4',
      scale: 0,
      draw: null,
      ifDraw: false
    };
  },
  mounted () {
    this.create();
    this.draw = useDraw()
    this.draw.init(this.$refs.container, {
      // 绘制完成时的回调
      onComplete: (points) => {
        console.log('points', points);
      }
    });
    window.onerror = (msg) => (this.err = msg);
    this.play()
    // this.draw.drawAreaByPoints([
    //   {
    //     "x": 241,
    //     "y": 109
    //   },
    //   {
    //     "x": 90,
    //     "y": 261
    //   },
    //   {
    //     "x": 546,
    //     "y": 134
    //   },
    //   {
    //     "x": 546,
    //     "y": 134
    //   }
    // ])
  },
  async unmounted () {
    if (this.jessibuca) {
      await this.jessibuca.destroy();
      this.jessibuca = null;
    }
  },
  methods: {
    create (options) {
      options = options || {};
      this.jessibuca = new window.Jessibuca(
        Object.assign(
          {
            container: this.$refs.container,
            videoBuffer: 0.2, // 缓存时长
            isResize: false,
            useWCS: this.useWCS,
            useMSE: this.useMSE,
            decoder: "/js/jessibuca/decoder.js",
            text: "",
            loadingText: "疯狂加载中...",
            debug: false,
            supportDblclickFullscreen: false,
            showBandwidth: this.showBandwidth, // 显示网速
            operateBtns: {
              fullscreen: this.showOperateBtns,
              screenshot: this.showOperateBtns,
              play: this.showOperateBtns,
              audio: this.showOperateBtns,
              record: this.showOperateBtns,
            },
            record: "record",
            recordType: 'mp4',
            vod: this.vod,
            forceNoOffscreen: !this.useOffscreen,
            isNotMute: true,
            timeout: 10
          },
          options
        )
      );
      this.jessibuca.on("load", () => {
      });

      this.jessibuca.on("log", (msg) => {
        // console.log("on log", msg);
      });
      this.jessibuca.on("record", (msg) => {
        //console.log("on record:", msg);
      });
      this.jessibuca.on("pause", () => {
        this.playing = false;
      });
      this.jessibuca.on("play", () => {
        this.playing = true;
      });
      this.jessibuca.on("fullscreen", (msg) => {
      });

      this.jessibuca.on("mute", (msg) => {
        this.quieting = msg;
      });

      this.jessibuca.on("mute", (msg) => {
      });

      this.jessibuca.on("audioInfo", (msg) => {
        // console.log("audioInfo", msg);
      });

      this.jessibuca.on("videoInfo", (info) => {
      });

      this.jessibuca.on("error", (error) => {
      });

      this.jessibuca.on("timeout", () => {
      });

      this.jessibuca.on('start', () => {
      })

      this.jessibuca.on("performance", (performance) => {
        var show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
        this.performance = show;
      });
      this.jessibuca.on('buffer', (buffer) => {
      })

      this.jessibuca.on('stats', (stats) => {
      })

      this.jessibuca.on('kBps', (kBps) => {
      });

      this.jessibuca.on("play", () => {
        this.playing = true;
        this.loaded = true;
        this.quieting = this.jessibuca.isMute();
      });

      this.jessibuca.on('recordingTimestamp', (ts) => {
      })

    },
    play () {
      if (this.videoUrl) {
        this.jessibuca.play(this.videoUrl);
      }

    },
    mute () {
      this.jessibuca.mute();
    },
    cancelMute () {
      this.jessibuca.cancelMute();
    },

    pause () {
      this.jessibuca.pause();
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    volumeChange () {
      this.jessibuca.setVolume(this.volume);
    },
    rotateChange () {
      this.jessibuca.setRotate(this.rotate);
    },
    async destroy () {
      if (this.jessibuca) {
        await this.jessibuca.destroy();
      }
      this.create();
      this.playing = false;
      this.loaded = false;
      this.performance = "";
    },

    fullscreen () {
      this.jessibuca.setFullscreen(true);
    },

    clearView () {
      this.jessibuca.clearView();
    },

    startRecord () {
      console.log(this.recordType)
      const time = new Date().getTime();
      this.jessibuca.startRecord(time, this.recordType);
    },

    stopAndSaveRecord () {
      this.jessibuca.stopRecordAndSave();
    },
    screenShot () {
      this.jessibuca.screenshot();
    },


    async restartPlay (type) {

      if (type === 'mse') {
        this.useWCS = false;
        this.useOffscreen = false;
      } else if (type === 'wcs') {
        this.useMSE = false
      } else if (type === 'offscreen') {
        this.useMSE = false
      }

      await this.destroy();
      setTimeout(() => {
        this.play();
      }, 100)
    },

    changeBuffer () {
      this.jessibuca.setBufferTime(Number(this.$refs.buffer.value));
    },

    scaleChange () {
      this.jessibuca.setScaleMode(this.scale);
    },
    paintPolygon () {
      if (this.ifDraw) {
        this.clearDraw()
        this.draw.endPaint()
      } else {
        this.draw.startPaint()
      }
      this.ifDraw = !this.ifDraw
    },
    clearDraw () {
      this.draw.clearCanvas()
    },
  },
};
</script>
<style lang="scss" scoped>
.root {
  display: flex;
  place-content: center;
  margin-top: 3rem;
}

.container-shell {
  position: relative;
  backdrop-filter: blur(5px);
  background: hsla(0, 0%, 50%, 0.5);
  padding: 30px 4px 10px 4px;
  /* border: 2px solid black; */
  width: auto;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 10px 20px;
}

.container-shell-title {
  position: absolute;
  color: darkgray;
  top: 4px;
  left: 10px;
  text-shadow: 1px 1px black;
}

#container {
  background: rgba(13, 14, 27, 0.7);
  width: 640px;
  height: 398px;
}

@media (max-width: 720px) {
  #container {
    width: 90vw;
    height: 52.7vw;
  }
}

.paint-tips {
  position: absolute;
  top: 5px;
  left: 5px;
}

.operate-btns {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  display: flex;
  font-size: 13px;

  div {
    margin-right: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
</style>
