<template>
  <div
    class="question-bianpai tw-flex tw-gap-4"
    style="background-color: #e1e6f1"
  >
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="props.questions"
      :pagination="{ pageSize: 200, hideOnSinglePage: true }"
    ></a-table>

    <div class="tw-flex tw-flex-1 tw-gap-4 tw-pt-4">
      <div style="flex-grow: 1">
        <v-chart
          class="chart"
          :option="chartOption(props.questions)"
          :autoresize="true"
        />
      </div>

      <!-- <a-button
        style="margin-left: -100px; margin-right: 20px"
        @click="openModal"
        >说明</a-button
      > -->
    </div>
  </div>
</template>

<script setup lang="ts">
// import EventBus from "@/plugins/eventBus";
import { SASQuestion } from "@/types";
import { EChartsOption } from "echarts";

const props = defineProps<{ questions: SASQuestion[] }>();

const columns = [
  {
    title: "大题号",
    dataIndex: "mainNumber",
    width: 80,
  },
  {
    title: "小题号",
    dataIndex: "subNumber",
    width: 80,
  },
  {
    title: "难度",
    dataIndex: "difficulty",
    width: 150,
  },
];

// function openModal() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE050");
// }

function chartOption(questions: SASQuestion[]) {
  // console.log(questions);
  return {
    title: {
      text: "难度",
      left: "left",
    },
    grid: {
      left: 40,
      bottom: 50,
      right: 80,
    },
    xAxis: {
      type: "category",
      data: questions.map((v) => v.mainNumber + "-" + v.subNumber),
      name: "题号",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: questions.map((v) => v.difficulty),
        type: "line",
        smooth: true,
      },
    ],
  } as EChartsOption;
}
</script>

<style>
.question-bianpai {
  height: 600px;
}
.question-bianpai .ant-table-wrapper {
  height: 100%;
  overflow: auto;
}
</style>
