<template>
  <div class="data-stat">
    <div class="data-stat-header">
      <div class="stat-summary">
        <div class="stat-summary-item">
          <h4>当前在线人数</h4>
          <p>
            <animate-number :value="summary.onlineCount"></animate-number>
          </p>
        </div>
        <div class="stat-summary-item">
          <h4>当前考试中人数</h4>
          <p>
            <animate-number :value="summary.examCount"></animate-number>
          </p>
        </div>
        <div class="stat-summary-item">
          <h4>累计考试科次</h4>
          <p>
            <animate-number :value="summary.examRecordCount"></animate-number>
          </p>
        </div>
        <div class="stat-summary-item">
          <h4>累计服务考生</h4>
          <p>
            <animate-number :value="summary.examStudentCount"></animate-number>
          </p>
        </div>
      </div>
    </div>
    <div class="data-stat-body">
      <div class="data-stat-table">
        <div class="data-stat-table-title">机构考生分布</div>
        <el-table :data="tableData" stripe>
          <el-table-column label="机构名称" prop="name"></el-table-column>
          <el-table-column
            width="80"
            label="在线人数"
            prop="onlineCount"
          ></el-table-column>
          <el-table-column
            width="80"
            label="在考人数"
            prop="examCount"
          ></el-table-column>
        </el-table>
      </div>
      <div class="data-stat-chart">
        <div class="data-stat-chart-title">在线考生地域分布</div>
        <vue-charts
          v-if="areaChartOption"
          :options="areaChartOption"
          autoresize
        ></vue-charts>
      </div>
    </div>
  </div>
</template>

<script>
import timeMixin from "@/mixins/timeMixin";
import { sysStatisticsData } from "../../../api/system";
import VueCharts from "@/plugins/VueCharts";

export default {
  name: "DataStatistics",
  components: { VueCharts },
  mixins: [timeMixin],
  data() {
    return {
      summary: {
        onlineCount: 0,
        examCount: 0,
        examRecordCount: 0,
        examStudentCount: 0,
      },
      tableData: [],
      areaChartOption: null,
    };
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    this.clearSetTs();
  },
  methods: {
    async getData() {
      this.clearSetTs();

      const res = await sysStatisticsData();
      const data = res.data.data || {};

      this.summary = {
        onlineCount: data.onlineCount,
        examCount: data.examCount,
        examRecordCount: data.examRecordCount,
        examStudentCount: data.examStudentCount,
      };

      this.tableData = data.orgDataCountBeanList || [];
      this.areaChartOption = this.getInviMapOption(data.mapDataCountBeanList);

      this.addSetTime(this.getData, 10 * 1000);
    },
    getInviMapOption(dataList) {
      // if (!dataList.length) return;

      let countData = dataList.map((item) => {
        return {
          name: item.province,
          ...item,
          itemStyle: {
            areaColor: "rgba(45, 153, 255, 0.5)",
          },
        };
      });
      // 隐藏南海诸岛
      countData.push({
        name: "南海诸岛",
        label: {
          show: false,
        },
        itemStyle: {
          opacity: 0,
        },
        emphasis: {
          itemStyle: {
            opacity: 0,
          },
        },
      });

      return {
        tooltip: {
          trigger: "item",
          formatter(params) {
            if (!params.data) return;
            const { name, onlineCount } = params.data;
            return `<span style="color:#2D99FF">${name}</span><br />在线人数：${onlineCount}`;
          },
          backgroundColor: "rgba(63,67,87,0.9)",
          padding: 10,
          triggerOn: "click",
          textStyle: {
            fontSize: 12,
            color: "#E1E6EF",
            fontWeight: 500,
            lineHeight: 18,
            rich: {
              n: {
                color: "#2D99FF",
              },
            },
          },
        },
        series: [
          {
            name: "数量",
            type: "map",
            mapType: "china",
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            data: countData,
            itemStyle: {
              areaColor: "rgba(45, 153, 255, 0.2)",
              borderColor: "#2D99FF",
              borderWidth: 1,
            },
            label: {
              show: true,
            },
            emphasis: {
              itemStyle: {
                areaColor: "rgba(22, 206, 185, 1)",
                borderColor: "rgba(45, 153, 255, 0.3)",
              },
            },
          },
        ],
      };
    },
  },
};
</script>
