<template>
  <div class="exam-invigilation-full invi-container">
    <div class="invi-header">
      <h1 class="invi-title">{{ summary.name }}在线考试数据监控中心</h1>
      <text-clock
        :show-icon="false"
        :show-week="false"
        :show-apm="false"
      ></text-clock>
    </div>
    <div class="invi-body">
      <div class="invi-monitor">
        <div
          v-for="item in studentVideoList"
          :key="item.examStudentId"
          class="invi-monitor-item"
        >
          <invigilation-student
            ref="InvigilationStudent"
            :data="item"
            show-type="patrol"
            :max-retry-count="1"
            detail-name="MORE"
            @muted-change="videoAllMuted"
            @video-view-change="videoViewChange"
          ></invigilation-student>
        </div>
      </div>
      <div class="invi-main">
        <div class="invi-summary">
          <div class="invi-summary-item">
            <h4>在线考试人数</h4>
            <p>
              <animate-number :value="summary.onlineCount"></animate-number>
            </p>
          </div>
          <div class="invi-summary-item">
            <h4>考试中人数</h4>
            <p>
              <animate-number :value="summary.examingCount"></animate-number>
            </p>
          </div>
          <div class="invi-summary-item">
            <h4>待考人数</h4>
            <p>
              <animate-number :value="summary.waitingCount"></animate-number>
            </p>
          </div>
          <div class="invi-summary-item">
            <h4>预警总数</h4>
            <p><animate-number :value="summary.warnCount"></animate-number></p>
          </div>
          <div class="invi-summary-item">
            <h4>违纪总数</h4>
            <p>
              <animate-number :value="summary.breachCount"></animate-number>
            </p>
          </div>
        </div>
        <div class="invi-map-chart">
          <vue-charts
            v-if="inviMapChartOption"
            ref="InviMapChart"
            :options="inviMapChartOption"
            autoresize
          ></vue-charts>
        </div>
      </div>
      <div class="invi-analysis">
        <div class="invi-analysis-item">
          <div class="invi-analysis-box invi-types">
            <h2 class="invi-analysis-title">预警类型排行</h2>
            <div class="invi-types-table">
              <table class="invi-table">
                <colgroup>
                  <col width="70" />
                  <col width="120" />
                  <col width="20" />
                </colgroup>
                <tr v-for="item in inviTypesList" :key="item.id">
                  <td>{{ item.type }}</td>
                  <td>
                    <el-progress
                      :stroke-width="10"
                      :show-text="false"
                      :percentage="item.percentage"
                    ></el-progress>
                  </td>
                  <td>{{ item.warnCount }}</td>
                </tr>
              </table>
            </div>
            <div class="invi-types-chart invi-chart">
              <div v-if="inviTypesChartOption" class="invi-chart-title">
                预警类型占比
              </div>
              <vue-charts
                v-if="inviTypesChartOption"
                :options="inviTypesChartOption"
                autoresize
              ></vue-charts>
            </div>
          </div>
        </div>
        <div class="invi-analysis-item">
          <div class="invi-analysis-box invi-area">
            <h2 class="invi-analysis-title">预警地区排行</h2>
            <div class="invi-area-table">
              <table class="invi-table">
                <colgroup>
                  <col width="40" />
                  <col width="150" />
                  <col width="30" />
                </colgroup>
                <tr v-for="item in inviAreaList" :key="item.id">
                  <td>{{ item.province }}</td>
                  <td>
                    <el-progress
                      :stroke-width="10"
                      :show-text="false"
                      :percentage="item.percentage"
                    ></el-progress>
                  </td>
                  <td>{{ item.warnCount }}</td>
                </tr>
              </table>
            </div>
            <div class="invi-area-chart invi-chart">
              <div v-if="inviAreaChartOption" class="invi-chart-title">
                考生分布
              </div>
              <vue-charts
                v-if="inviAreaChartOption"
                :options="inviAreaChartOption"
                autoresize
              ></vue-charts>
            </div>
          </div>
        </div>
        <div class="invi-analysis-item">
          <div class="invi-analysis-box invi-time">
            <h2 class="invi-analysis-title">考生在线/预警时间趋势</h2>
            <div class="invi-time-chart invi-chart">
              <vue-charts
                v-if="inviTimeChartOption"
                :options="inviTimeChartOption"
                autoresize
              ></vue-charts>
            </div>
          </div>
        </div>
        <div class="invi-analysis-item">
          <div class="invi-analysis-box invi-student">
            <h2 class="invi-analysis-title">考试动态预警</h2>
            <div v-if="inviStudentWainList.length" class="invi-student-table">
              <table class="invi-table">
                <colgroup>
                  <col width="60" />
                  <col width="60" />
                  <col width="140" />
                  <col width="100" />
                  <col width="70" />
                </colgroup>
                <tbody>
                  <tr>
                    <th>时间</th>
                    <th>姓名</th>
                    <th>证件号</th>
                    <th>预警类型</th>
                    <th>处理状态</th>
                  </tr>
                  <tr v-for="item in inviStudentWainList" :key="item.id">
                    <td>{{ item.createTime | timeFilter }}</td>
                    <td>
                      <div class="td-cont" style="width: 60px;">
                        {{ item.name }}
                      </div>
                    </td>
                    <td>{{ item.identity }}</td>
                    <td>
                      <div
                        class="td-cont"
                        style="width: 140px;"
                        :title="item.info"
                      >
                        {{ item.info }}
                      </div>
                    </td>
                    <td>{{ item.approveStatus }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TextClock from "../common/TextClock";
import InvigilationStudent from "../common/InvigilationStudent";
import VueCharts from "@/plugins/VueCharts";
import AnimateNumber from "@/components/AnimateNumber";
import examInviMixins from "./examInviMixins";

export default {
  name: "exam-invigilation-full",
  components: { TextClock, InvigilationStudent, VueCharts, AnimateNumber },
  mixins: [examInviMixins],
  watch: {
    isFullScreen: {
      immediate: true,
      handler(val, oldVal) {
        if (val !== oldVal && !val) {
          this.$router.replace({ name: "ExamInvigilation" });
        }
      },
    },
  },
  beforeDestroy() {
    this.exitFullscreen();
  },
  methods: {
    exitFullscreen() {
      const exitFullscreen =
        document.exitFullscreen ||
        document.mozCancelFullScreen ||
        document.webkitCancelFullScreen;

      exitFullscreen.call(document);
    },
  },
};
</script>
