<template>
  <div class="invigilation-student-full" :class="{ mobile: isMobile }">
    <div
      class="student-video"
      :class="{ warning, 'be-call': beCalled }"
      title="点击放大播放"
    >
      <flv-media
        ref="ThirdViewVideo"
        hide-audio-icon
        :live-url="data.liveUrl"
        :max-retry-count="maxRetryCount"
        @media-muted-change="mediaMutedChange"
        @muted-change="mutedChange"
      ></flv-media>
      <span class="icon icon-waring warn-icon"></span>
      <span class="icon icon-full max-icon" @click.stop="toLargeView"></span>
      <div class="student-info">
        <span class="student-info-name">{{ data.name }}</span>
        <span class="student-info-identity">{{ data.identity }}</span>
        <div class="student-info-progress">
          <span class="icon icon-student-rate"></span>
          <span>{{ data.progress || 0 }}%</span>
        </div>
      </div>
    </div>
    <div class="operation-group" v-if="beCalled" @click.stop>
      <span>考生申请通话…</span>
      <div class="other-operation">
        <span
          class="icon icon-talk"
          :disabled="disabled || talkingType === 'video'"
          @click.stop="onOperation('answer')"
        ></span>
      </div>
    </div>
    <div class="operation-group" v-else @click.stop>
      <span
        class="icon icon-sound sound-operation"
        :class="{ 'icon-sound-active': !muted }"
        @click.stop="onOperation('sound')"
      ></span>
      <div class="other-operation">
        <span
          class="icon icon-send-text-active"
          @click.stop="onOperation('message')"
        ></span>
        <span
          class="icon icon-voice-active"
          @click.stop="onOperation('voice')"
        ></span>
        <span
          class="icon icon-talk"
          :class="{ 'icon-talk-active': talkingType === 'talk' }"
          :disabled="disabled || talkingType === 'video'"
          @click.stop="onOperation('talk')"
        ></span>
        <span
          class="icon icon-send-video"
          :class="{ 'icon-send-video-active': talkingType === 'video' }"
          :disabled="disabled || talkingType === 'talk'"
          @click.stop="onOperation('video')"
        ></span>
      </div>
    </div>
    <!-- InvigilationStudentMediaDialog -->
    <InvigilationStudentMediaDialog
      ref="InvigilationStudentMediaDialog"
      :data="data"
      destroy-on-close
      @close="dialogClose"
    />
  </div>
</template>

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

export default {
  name: "invigilation-student",
  components: { FlvMedia, InvigilationStudentMediaDialog },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    isMobile: {
      type: Boolean,
      default: false,
    },
    enableVideoSource: {
      type: Boolean,
      default: false,
    },
    talking: {
      type: Object,
      default: () => ({ examRecordId: "", isVideo: false }),
    },
    warning: {
      type: Boolean,
      default: false,
    },
    beCalled: {
      type: Boolean,
      default: false,
    },
    maxRetryCount: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      muted: true,
    };
  },
  computed: {
    disabled() {
      return (
        !!this.talking?.examRecordId &&
        this.talking.examRecordId !== this.data.examRecordId
      );
    },
    talkingType() {
      return (
        !!this.talking?.examRecordId &&
        this.talking.examRecordId === this.data.examRecordId &&
        (this.talking.isVideo ? "video" : "talk")
      );
    },
    actionValid() {
      return (
        this.data.statusCode &&
        ["FIRST_PREPARE", "ANSWERING"].includes(this.data.statusCode)
      );
    },
  },
  methods: {
    onOperation(type) {
      if (!this.actionValid) {
        return;
      }
      if (!this.enableVideoSource && !["message", "voice"].includes(type)) {
        return this.$notify({
          type: "error",
          message: "当前未开启直播监考",
        });
      }
      if (type === "sound") {
        return this.$refs.ThirdViewVideo?.videoMuted();
      }
      if (
        ["talk", "video", "answer"].includes(type) &&
        (this.disabled || !!this.talkingType)
      ) {
        return;
      }
      this.$emit("operation", { type, data: this.data });
    },
    toDetail() {
      this.$router.push({
        name: "WarningDetail",
        params: { examRecordId: this.data.examRecordId },
      });
    },
    toLargeView() {
      this.$emit("muted-change");
      this.$emit("video-view-change", true);
      this.$refs.ThirdViewVideo.destroyPlayer();
      this.$refs.InvigilationStudentMediaDialog.open();
    },
    mediaMutedChange(muted) {
      this.muted = muted;
    },
    mutedChange() {
      this.$emit("muted-change");
    },
    mutedPlayer(muted) {
      this.$refs.ThirdViewVideo.mutedPlayer(muted);
    },
    dialogClose() {
      this.$emit("video-view-change", false);
      this.$refs.ThirdViewVideo.reloadVideo();
    },
  },
};
</script>

<style lang="scss" scoped>
.invigilation-student-full {
  background: #2e3238;
  border-radius: 10px;
  overflow: hidden;
  width: 255px;
  &.mobile {
    width: 188px;
    .student-video {
      height: 230px;
    }
  }
  .student-video {
    position: relative;
    z-index: 0;
    height: 164px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;

    &.warning {
      border-color: #f65863;
      .warn-icon {
        display: block;
      }
    }
    &.be-call {
      border-color: #1a89fe;
    }
    .warn-icon {
      position: absolute;
      width: 14px;
      height: 12px;
      top: 10px;
      left: 10px;
      z-index: 2001;
      display: none;
    }
    .max-icon {
      width: 12px;
      height: 12px;
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 2001;
      cursor: pointer;
    }
    .student-info {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 32px;
      background: rgba(46, 50, 56, 0.5);
      display: flex;
      align-items: center;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      z-index: 2001;
      padding: 0 16px;
      .student-info-name {
        font-weight: bold;
        color: #ffffff;
      }
      .student-info-identity {
        margin: 0 8px;
        flex: 1;
        overflow: auto;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .student-info-progress {
        display: flex;
        align-items: center;
        margin-left: auto;
        .icon {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
    }
  }
  .operation-group {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 8px 0 16px;
    color: #fff;
    .icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      cursor: pointer;
      &[disabled="disabled"] {
        cursor: not-allowed;
      }
    }
    .other-operation {
      margin-left: auto;
      display: flex;
      align-items: center;
    }
  }
}
</style>
