<template>
  <el-dialog
    class="invigilation-student-media-dialog"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    fullscreen
    destroy-on-close
    @opened="dialogOpened"
  >
    <div class="media-close" @click="cancel"><i class="el-icon-close"></i></div>
    <div class="media-video">
      <flv-media
        ref="ThirdViewVideo"
        :live-url="data.liveUrl"
        v-if="data.liveUrl"
      ></flv-media>
    </div>
    <div class="media-info" slot="footer">
      <p>{{ data.name }}</p>
      <p>证件号：{{ data.identity }}</p>
    </div>
  </el-dialog>
</template>

<script>
import FlvMedia from "./FlvMedia";

export default {
  name: "invigilation-student-media-dialog",
  components: { FlvMedia },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return { dialogVisible: false };
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
      this.$emit("close");
    },
    open() {
      this.dialogVisible = true;
    },
    dialogOpened() {
      this.$nextTick(() => {
        this.$refs.ThirdViewVideo.mutedPlayer(false);
      });
    },
  },
};
</script>
