<template>
  <div class="part-box is-border">
    <el-form inline>
      <el-form-item label="科目">
        <select-subject
          v-model="searchModel.subjectCode"
          :clearable="false"
          default-first
          @default-selected="search"
        ></select-subject>
      </el-form-item>
      <el-form-item label="分数间隔类型">
        <el-select
          v-model="searchModel.range"
          placeholder="请选择"
          style="width: 150px"
        >
          <el-option label="5分间隔" value="5" />
          <el-option label="10分间隔" value="10" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="searchModel.objective"
          label="仅统计客观题"
        ></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-space wrap>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="onExport">导出</el-button>
          <el-button @click="onChart">查看统计图</el-button>
        </el-space>
      </el-form-item>
    </el-form>
    <el-divider class="form-divider" />

    <el-table
      class="page-table"
      :data="dataList"
      :loading="loading"
      border
      stripe
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="range" label="分数段" min-width="120">
        <template #default="scope">
          {{ scope.row.score }} &lt;=X&lt;
          {{ scope.row.scope + scope.row.range }}
        </template>
      </el-table-column>
      <el-table-column prop="rangeCount" label="人数" min-width="100" />
      <el-table-column label="频率" min-width="100">
        <template #default="scope">
          {{ scope.row.rangeRate.toFixed(2) }}%
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :layout="pagination.layout"
      :total="pagination.total"
      @size-change="pageSizeChange"
      @current-change="toPage"
    />
  </div>

  <ChartModal
    ref="chartModalRef"
    title="课程成绩分段图"
    :chart-options="chartOptions"
  />
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { getSegmentAnalysisList } from '@/api/analysis';
  import { ScoreSegmentItem, ScoreSegmentFilter } from '@/api/types/analysis';
  import useTable from '@/hooks/table';
  import { downloadExport } from '@/utils/download-export';
  import ChartModal from '@/components/chart/ChartModal.vue';
  import type { EChartsOption } from 'echarts';

  defineOptions({
    name: 'SegmentAnalysis',
  });

  const searchModel = reactive<ScoreSegmentFilter>({
    subjectCode: null,
    range: '10',
    objective: false,
  });

  const { dataList, pagination, loading, toPage, pageSizeChange } =
    useTable<ScoreSegmentItem>(getSegmentAnalysisList, searchModel, false);

  async function search() {
    await toPage(1);
    updateChartOption();
  }

  async function onExport() {
    await downloadExport('exportSegmentAnalysisList', searchModel);
  }

  // 图表
  const chartOptions = ref<EChartsOption>({} as EChartsOption);
  function updateChartOption() {
    chartOptions.value = {
      legend: {
        data: ['人数', '频率'],
      },
      toolbox: {
        feature: {
          saveAsImage: { show: true },
        },
      },
      xAxis: {
        type: 'category',
        data: dataList.value.map(
          (item) => `${item.score} <=X< ${item.scope + item.range}`
        ),
      },
      yAxis: [
        {
          type: 'value',
          name: '人数',
          position: 'left',
        },
        {
          type: 'value',
          name: '百分比',
          position: 'right',
          axisLabel: {
            formatter: '{value} %',
          },
          max: 100,
        },
      ],
      series: [
        {
          data: dataList.value.map((item) => item.rangeCount),
          type: 'bar',
          name: '人数',
          yAxisIndex: 0,
        },
        {
          data: dataList.value.map((item) => item.rangeRate),
          type: 'line',
          name: '频率',
          yAxisIndex: 1,
        },
      ],
    };
  }
  const chartModalRef = ref<typeof ChartModal>(null);
  function onChart() {
    chartModalRef.value?.open();
  }
</script>
