<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    ref="videoBox"
  >
    <div class="box videoBox">
      <div id="video"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false"
        >确 定
      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import moment from "moment";
import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js

export default {
  props: {
    videoManagerId: {
      type: Number,
    },
    resourceId: {
      type: String,
    },
    title: {
      type: String,
    },
    target: {
      type: Object,
    },
    gaodeMap: {
      type: Object,
    },
  },
  data() {
    return {
      dialogVisible: true,
      AfterClose: true,
    };
  },
  computed: {
    url() {
      return `http://27.128.189.137:18000/flv/hls/${this.resourceId}.flv`;
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        document.body.removeChild(this.$refs.videoBox.$el);
        this.player.destroy(this.url);
      }
    },
  },
  mounted() {
    setTimeout(() => {
      this.player = new WasmPlayer(null, "video", this.callBack, {
        Height: true,
      });
      this.player.play(this.url, 1);
    }, 1000);
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      console.log("关闭");
      this.player.destroy(this.url);
      // document.body.removeChild(this.$refs.videoBox.$el);
      done();
    },
    callBack() {
      console.log(123);
    },
  },
};
</script>

<style lang="scss">
.box {
  width: 100%;
  height: 500px;
  #video {
    height: 100%;
  }
}
</style>