<template>
  <el-dialog
    class="quality-chart-dialog"
    :visible.sync="modalIsShow"
    title="给分曲线"
    top="10vh"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <p class="chart-summary">
      <span>全体平均</span>
      <span>最高分：{{ summary.max }}</span>
      <span>最低分：{{ summary.min }}</span>
      <span>平均分：{{ summary.avg }}</span>
    </p>
    <div class="chart-content">
      <v-chart v-if="chartOption" :option="chartOption"></v-chart>
    </div>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { calcAvg } from "@/plugins/utils";
import { markQualityChart } from "../../api";

export default {
  name: "quality-chart-dialog",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      chartOption: null,
      summary: {
        avg: 0,
        max: 0,
        min: 0,
      },
    };
  },
  methods: {
    visibleChange() {
      this.initData();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async initData() {
      this.chartOption = null;
      this.summary = {
        avg: 0,
        max: 0,
        min: 0,
      };
      const res = await markQualityChart(this.data);
      const datalist = res || [];
      datalist.forEach((item) => {
        item.avgScore = item.avgScore || 0;
        item.minScore = item.minScore || 0;
        item.maxScore = item.maxScore || 0;
      });
      this.chartOption = this.getChartOption(datalist);
      this.summary = {
        avg: calcAvg(datalist.map((item) => item.avgScore)).toFixed(2),
        min: calcAvg(datalist.map((item) => item.minScore)).toFixed(2),
        max: calcAvg(datalist.map((item) => item.maxScore)).toFixed(2),
      };
    },
    getChartOption(dataList) {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 50,
          bottom: 40,
          left: 50,
          right: 10,
        },
        legend: {
          data: ["最高分", "平均分", "最低分"],
          top: 10,
          right: 10,
          itemWidth: 14,
          itemGap: 22,
          textStyle: {
            color: "#626A82",
            fontSize: 12,
          },
        },
        xAxis: {
          type: "category",
          data: dataList.map((item) => item.name),
          axisLine: {
            show: true,
            lineStyle: {
              color: "#C1CBDB",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            color: "#333",
            fontSize: 12,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#C1CBDB",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#333",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "最高分",
            type: "bar",
            barGap: 0,
            barMaxWidth: 10,
            itemStyle: {
              color: "#FE5863",
            },
            data: dataList.map((item) => item.maxScore),
          },
          {
            name: "平均分",
            type: "bar",
            barGap: 0,
            barMaxWidth: 10,
            itemStyle: {
              color: "#FECA57",
            },
            data: dataList.map((item) => item.avgScore),
          },
          {
            name: "最低分",
            type: "bar",
            barGap: 0,
            barMaxWidth: 10,
            itemStyle: {
              color: "#5FC9FA",
            },
            data: dataList.map((item) => item.minScore),
          },
        ],
      };

      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-content {
  height: 400px;
}
</style>
