<template>
  <div
    :class="`monitor-item flex items-center flex-col`"
    :style="`width: ${width}px;height: ${height}px;`"
  >
    <!-- <img src="../../assets/screen.png" class="monitor-screen" /> -->
    <div class="video-wrap">
      <video class="monitor-screen" ref="videoElementRef"></video>
      <!-- <div class="overlay" @click="router.push('/monitor/detail')"></div> -->
    </div>

    <div class="flex w-full justify-between pt-2 pl-4 pr-4">
      <div class="controls flex justify-between">
        <!-- <img src="../../assets/prev.png" alt="" /> -->
        <div
          ref="playBtnRef"
          @click="switchPlayStatus"
          :class="`playbtn iconfont icon-${
            isPlaying ? 'zanting_o' : 'bofang_o'
          }`"
          alt=""
        ></div>
        <div class="desc">{{ name }}</div>
        <div
          class="fullscreen iconfont icon-quanping_o"
          @click="videoFullscreen"
        ></div>
        <!-- <img src="../../assets/next.png" alt="" /> -->
      </div>
    </div>
  </div>
</template>

<script setup name="camera">
import flvjs from "flv.js";
import { onMounted, onUnmounted, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  width: {
    type: [String, Number],
    // default: 800,
  },
  height: {
    type: [String, Number],
    default: 420,
  },
  source: {
    type: String,
    // default:
    //   "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
  },
  name: {
    type: String,
    default: "摄像头",
  },
});
const { width, height, source, name } = toRefs(props);

const videoElementRef = ref();
// const playBtnRef = ref();

let flvPlayer = flvjs.createPlayer({
  type: "flv",
  url: source.value,
  //   url: "http://localhost:8000/lycoris_recoil.flv",
});
const isPlaying = ref(false);

// 切换播放状态
const switchPlayStatus = () => {
  if (!videoElementRef.value) return;
  if (videoElementRef.value.paused) {
    console.log(flvPlayer);
    flvPlayer.play();
    isPlaying.value = true;
  } else {
    flvPlayer.pause();
    isPlaying.value = false;
  }
};
const flvPlayerEventHandler = (e) => {
  console.log(e);
};

const videoFullscreen = () => {
  videoElementRef.value.requestFullscreen();
};
onMounted(() => {
  if (flvjs.isSupported()) {
    flvPlayer.attachMediaElement(videoElementRef.value);
    flvPlayer.load();
    flvPlayer.on("ERROR", flvPlayerEventHandler);
    // flvPlayer.play();
  }
});
onUnmounted(() => {
  console.log("destroy player here");
  function flvDestroy() {
    flvPlayer.off("ERROR", flvPlayerEventHandler);
    flvPlayer.pause();
    flvPlayer.unload();
    flvPlayer.detachMediaElement();
    flvPlayer.destroy();
    flvPlayer = null;
  }
  flvDestroy();
});
</script>
<style lang="scss" scoped>
.monitor-item {
  overflow: hidden;
  // width: 400px;
  // height: 280px;
  // background-color: #158eff;
  background-image: url(../../assets/monitor.png);
  background-size: 100% 100%;
  .video-wrap {
    background-color: #333;
    position: relative;
    margin-top: 10%;
    width: 98%;
    height: 65%;
    .monitor-screen {
      width: 100%;
      height: 100%;
    }
    .overlay {
      z-index: 99;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .controls {
    width: 100%;
    .playbtn {
      font-size: 40px;
      color: #fff;
    }
    .fullscreen {
      font-size: 40px;
      color: #fff;
    }
    img {
      width: 28px;
      height: 28px;
    }
  }
  .desc {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 24px;
    text-shadow: 0 0 7px #158eff;
    font-weight: 500;
  }
}
</style>
