<template>
  <div>
    <el-dialog
      class="student-monitor-record-dialog"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      fullscreen
      destroy-on-close
    >
      <div class="record-video">
        <HlsMedia
          v-if="videoSource.videoUrl"
          :url="videoSource.videoUrl"
          :key="videoSource.videoUrl"
          @error="videoError"
          @ended="videoEnded"
        />
        <div v-else class="record-video-none">
          <div>
            <i class="el-icon-video-camera-solid"></i>
            <p>暂无视频</p>
          </div>
        </div>
      </div>

      <div class="box-justify" slot="footer">
        <div class="record-footer-info">
          {{ videoSource.startTime | datetimeFilter }} --
          {{ videoSource.endTime | datetimeFilter }}
        </div>
        <div class="record-footer-tips">
          <i class="icon icon-error"></i>
          <span
            >提示：无法正常播放，请<i
              class="color-primary record-qr"
              @click="qrModalIsShow = true"
              >扫描二维码</i
            >。</span
          >
        </div>
      </div>
    </el-dialog>

    <!-- qr-code -->
    <el-dialog
      custom-class="record-code-dialog"
      :visible.sync="qrModalIsShow"
      width="280px"
      append-to-body
      destroy-on-close
    >
      <div class="record-close" @click="qrModalIsShow = false">
        <i class="el-icon-close"></i>
      </div>
      <div class="record-qrcode">
        <vue-qrcode
          :value="videoSource.videoUrl"
          :options="{ width: 200, margin: 0 }"
          tag="img"
        ></vue-qrcode>
        <p class="record-tips">请扫描二维码</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";
import HlsMedia from "./HlsMedia";

export default {
  name: "StudentMonitorRecordDialog",
  components: { VueQrcode, HlsMedia },
  props: {
    videoSource: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
      qrModalIsShow: false,
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
    videoError() {
      this.$message({
        type: "error",
        message: "视频解析错误，您可以尝试扫描二维码，通过手机观看。",
        showClose: true,
        duration: 5 * 1000,
      });
    },
    videoEnded() {
      this.$emit("video-ended", this.videoSource);
    },
  },
};
</script>
