<template>
  <MyDialog v-if="show" v-model="show" width="960px" height="650px" class="bim-video-dialog">
    <template slot="title">{{ title }}</template>
    <iframe frameborder="0" :src="iframeSrc" style="width: 100%; height: 100%" allowfullscreen></iframe>
  </MyDialog>
</template>

<script>
import MyDialog from "@/components/MyDialog";
export default {
  components: {
    MyDialog,
  },
  name: "BimVideoDialog",

  data() {
    return {
      show: false,
      title: "",
      itemData: null,
      iframeSrc: "",
      videoInfo: null,
      accessToken: "",
    };
  },

  mounted() {},

  methods: {
    showDialog(data, videoInfo) {
      this.itemData = data;
      this.title = data.name;
      this.videoInfo = videoInfo;

      console.log(data);
      this.show = true;
      this.loadVideo(videoInfo);
    },
    loadVideo(it) {
      this.$api.videoMonitor.getYsToken(it.id).then((d) => {
        this.accessToken = d.msg;
        this.iframeSrc = "https://open.ys7.com/ezopen/h5/iframe?url=" + it.url + "&autoplay=1&accessToken=" + d.msg + "&t=" + +new Date();
      });
    },
  },
};
</script>

<style lang="less">
.bim-video-dialog {
  .popup-project-introduction-con {
    height: 100%;
    .popup-project-introduction-details {
      height: calc(100% - 60px);
      padding: 0px;
      .quality-table.special-table {
        height: 100%;
        padding: 0px;
      }
    }
  }
}
</style>
