<template>
  <div class="container-shell">
    <div class="paint-tips" v-if="ifDraw">双击结束绘制</div>
    <div class="title-name">
      <div v-if="title"><el-icon>
          <Location />
        </el-icon>{{ title }}</div>
    </div>
    <div ref="container" id="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>
</template>

<script lang="ts" setup name="JessibucaPlayer">
import useDraw from './useDraw';

interface Props {
  videoUrl?: string;
  showPaint?: boolean;
  title?: String;
}

const props = defineProps<Props>();

const ifDraw = ref(false);
const container = ref<HTMLDivElement | null>(null);
const draw = useDraw();
const jessibuca = ref(null)

// 初始化绘制功能
onMounted(() => {
  // 创建播放器实例
  createPlayer();
  setTimeout(() => {
    if (container.value && props.showPaint) {
      draw.init(container.value, {
        // 绘制完成时的回调
        onComplete: (points) => {
          console.log('points', points);
        }
      });

    }
  }, 1000);

});

// 清理函数，在组件卸载前调用
onBeforeUnmount(async () => {
  if (jessibuca.value) {
    await jessibuca.value.destroy();
  }
  jessibuca.value = null
});
watch(() => props.videoUrl, (newValue, oldValue) => {
  if (newValue != '') {
    nextTick(() => {
      restartPlay()
    })
  }
}, { immediate: true });
const createPlayer = () => {
  jessibuca.value = new window.Jessibuca({
    container: container.value!,
    videoBuffer: 0.2, // 缓存时长
    isResize: false,
    useWCS: false,
    useMSE: true,
    decoder: "/js/jessibuca/decoder.js",
    text: "",
    loadingText: "疯狂加载中...",
    debug: false,
    supportDblclickFullscreen: false,
    showBandwidth: false, // 显示网速
    operateBtns: {
      fullscreen: true,
      screenshot: true,
      play: true,
      audio: true,
      record: true,
    },
    record: "record",
    recordType: 'mp4',
    vod: false,
    forceNoOffscreen: false,
    isNotMute: true,
    timeout: 10
  });

  // 添加事件监听器
  jessibuca.value.on("load", () => { });
  jessibuca.value.on("log", (msg) => { });
  jessibuca.value.on("record", (msg) => { });
  jessibuca.value.on("pause", () => { });
  jessibuca.value.on("play", () => { });
  jessibuca.value.on("fullscreen", (msg) => { });
  jessibuca.value.on("mute", (msg) => {

  });
  jessibuca.value.on("audioInfo", (msg) => { });
  jessibuca.value.on("videoInfo", (info) => { });
  jessibuca.value.on("error", (error) => { });
  jessibuca.value.on("timeout", () => { });
  jessibuca.value.on('start', () => { });
  jessibuca.value.on("performance", (performance) => { });
  jessibuca.value.on('buffer', (buffer) => { });
  jessibuca.value.on('stats', (stats) => { });
  jessibuca.value.on('kBps', (kBps) => { });
  jessibuca.value.on("play", () => { });

}

const playVideo = (videoUrl: string) => {
  if (videoUrl && container.value) {
    jessibuca.value.play(videoUrl);
  }
}

const mute = () => {
  jessibuca.value.mute();
}

const cancelMute = () => {
  jessibuca.value.cancelMute();
}

const pause = () => {
  jessibuca.value.pause();
}

const volumeChange = (volume: number) => {
  jessibuca.value.setVolume(volume);
}

const rotateChange = (rotate: number) => {
  jessibuca.value.setRotate(rotate);
}

const destroy = async () => {
  if (jessibuca.value) {
    await jessibuca.value.destroy();
  }
  createPlayer();
}

const fullscreen = () => {
  jessibuca.value.setFullscreen(true);
}

const clearView = () => {
  jessibuca.value.clearView();
}

const startRecord = (recordType: string) => {
  const time = new Date().getTime();
  jessibuca.value.startRecord(time, recordType);
}

const stopAndSaveRecord = () => {
  jessibuca.value.stopRecordAndSave();
}

const screenShot = () => {
  jessibuca.value.screenshot();
}

const restartPlay = () => {
  destroy();
  setTimeout(() => {
    playVideo(props.videoUrl);
  }, 100);
}

const changeBuffer = (buffer: number) => {
  jessibuca.value.setBufferTime(buffer);
}

const scaleChange = (scale: number) => {
  jessibuca.value.setScaleMode(scale);
}

function paintPolygon() {
  if (ifDraw.value) {
    clearDraw();
    draw.endPaint();
  } else {
    draw.startPaint();
  }
  ifDraw.value = !ifDraw.value;
}

function clearDraw() {
  draw.clearCanvas();
}
</script>

<style lang="scss" scoped>
.container-shell {
  backdrop-filter: blur(5px);
  background: hsla(0, 0%, 50%, 0.5);
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 10px 20px;
  padding: 10px 2px 2px 2px;
  display: flex;
  flex-direction: column;
}

#container {
  background: rgba(13, 14, 27, 0.7);
}


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

.title-name {
  height: 25px;

  >div {
    display: flex;
    align-items: center;
  }
}

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

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