<script setup>
import { ref, computed, reactive, onMounted } from "vue";
import Table from "@/components/table";
import * as echarts from "echarts";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "试卷分析",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const emits = defineEmits(["update:modelValue"]);

const show = computed({
  get() {
    return props.modelValue;
  },
  set(newVal) {
    emits("update:modelValue", newVal);
  },
});

const chart = ref();

const difficultyTable = reactive({
  loading: false,
  columns: [
    { prop: "difficultyName", label: "试题难易程度" },
    { prop: "proportion", label: "题量占比", slot: "proportion" },
    { prop: "titleSortId", label: "对应题号" },
  ],
  tableData: [
    {
      stuName: 1,
      stuNo: 1,
      id: 1,
    },
  ],
  pagination: {},
});

const knowledgePointsTable = reactive({
  loading: false,
  columns: [
    { prop: "knowledgeName", label: "知识点" },
    { prop: "scoreProportion", label: "分值占比", slot: "proportion" },
    { prop: "titleSortId", label: "对应题号" },
  ],
  tableData: [],
  pagination: {},
});

let paperChart;

function onOpen() {
  paperChart = echarts.init(chart.value);
  paperChart.setOption({
    title: {
      text: "题型总体分布",
      left: "center",
      textStyle: {
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "15%",
      left: "center",
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: props.data.paperChanelAnalyzeList.map((i) => ({
          value: i.titleCount,
          name: i.chanelTypeName.replace(/<\/?b>/g, ""),
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        top: -50,
        label: {
          show: false,
          position: "center",
        },
      },
    ],
  });
  difficultyTable.tableData = props.data.paperDifficultyAnalyzeList;
  knowledgePointsTable.tableData = props.data.paperKnowledgeAnalyzeList;
}
</script>

<template>
  <el-dialog
    v-model="show"
    :title="title"
    destroy-on-close
    width="50%"
    @open="onOpen"
  >
    <div class="box">
      <div class="box-title">试卷总体分布分析</div>
      <div class="box-chart" ref="chart"></div>
    </div>
    <div class="box">
      <div class="box-title">试卷难度结构分析</div>
      <Table :xbTable="difficultyTable">
        <template #proportion="scope">
          {{ scope.row.proportion / 100 }}%
        </template>
      </Table>
    </div>
    <div class="box">
      <div class="box-title">试卷知识点分析</div>
      <Table :xbTable="knowledgePointsTable">
        <template #proportion="scope">
          {{ scope.row.scoreProportion / 100 }}%
        </template>
      </Table>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.box {
  &-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    position: relative;
    padding-left: 16px;
    &::after {
      content: "";
      display: block;
      width: 4px;
      height: 100%;
      background: var(--el-color-primary);
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  &-chart {
    width: 100%;
    height: 350px;
  }
}
</style>
