<template>
  <div class="summary-line">
    <p class="summary-line-item" v-for="item in paramList" :key="item.param">
      <i :class="['icon', `icon-${item.icon}`]" v-if="item.icon"></i>
      <i
        :class="[
          'line-point',
          item.pointType && `line-point-${item.pointType}`,
        ]"
        v-else
      ></i>
      <el-popover
        placement="bottom-start"
        popper-class="warning-popover"
        width="300"
        trigger="hover"
        :content="item.content"
        v-if="item.desc"
      >
        <span class="line-name" slot="reference">{{ item.name }}</span>
      </el-popover>
      <span class="line-name" v-else>{{ item.name }}</span>
      <span>{{ examPropData[item.param] }}{{ item.unit }}</span>
    </p>
  </div>
</template>

<script>
import { examPropCount } from "@/api/invigilation";

const paramInfo = {
  all: {
    name: "全部应考",
    param: "allCount",
    desc: "参加考试的全部考生。",
    icon: "users",
    unit: "人",
  },
  finish: {
    name: "完成率",
    param: "completionRate",
    desc: "“已完成”科次数量占应考科次数量的百分比。",
    icon: "rate",
    unit: "%",
  },
  prepare: {
    name: "已待考",
    param: "prepareCount",
    desc: "已进入待考界面等待开考的考生。",
    pointType: "success",
    unit: "人",
  },
  exam: {
    name: "考试中",
    param: "examCount",
    desc: "正在答题的考生。",
    pointType: "primary",
    unit: "人",
  },
  complete: {
    name: "已交卷",
    param: "alreadyComplete",
    desc: "某科次的某次考试已完成“交卷”。",
    pointType: "danger",
    unit: "人",
  },
  trouble: {
    name: "通讯故障",
    param: "clientWebsocketStatusCount",
    desc:
      "考生端出现断网、断电、软硬件故障等异常导致考生端与监考端无法正常连接的考生。",
    pointType: "danger",
    unit: "人",
  },
  unfinish: {
    name: "未完成",
    param: "notComplete",
    desc: "某科次完成“交卷”的考试次数为0。",
    pointType: "danger",
    unit: "人",
  },
};
const types = {
  trouble: ["all", "prepare", "exam", "trouble"],
  complete: ["all", "prepare", "exam", "complete"],
  progress: ["all", "finish", "prepare", "unfinish"],
};

export default {
  name: "summary-line",
  props: {
    examId: {
      type: String,
    },
    dataType: {
      type: String,
      required: true,
      validator: (val) => {
        return ["trouble", "complete", "progress"].includes(val);
      },
    },
  },
  // mounted() {
  //   this.initData();
  // },
  watch: {
    examId: {
      immediate: true,
      handler() {
        this.initData();
      },
    },
  },
  data() {
    return {
      paramList: [],
      examPropData: {},
    };
  },
  methods: {
    async initData() {
      if (!this.examId) return;
      const res = await examPropCount(this.examId).catch(() => {});
      this.examPropData = (res && res.data && res.data.data) || {};
      if (this.examPropData["completionRate"])
        this.examPropData["completionRate"] = Math.round(
          this.examPropData["completionRate"] * 100
        );
      this.paramList = types[this.dataType].map((item) => {
        let info = paramInfo[item];
        return {
          ...info,
          content: `${info.name}：${info.desc}`,
        };
      });
    },
  },
};
</script>
