<template>
  <div class="stu_grcjd">
    <div class="w-1200px m-auto flex flex-row justify-between">
      <div class="w-188px h-full" style="background-color: #fff;">
        <leftSiderStu :StuLeftMenuNum="StuLeftMenuNum" />
      </div>

      <div class="w-1012px p-4 blueBg">

        <div class="flex mt-20px items-center">
          <el-select class="mr-10px" v-model="normal_subject" placeholder="请选择学科" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in subject_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <div class="flex justify-between mt-4 exportBtn">
          <div>
            <el-button color="#003eee" type="primary" size="large" @click="exportBtn">导出</el-button>
          </div>
        </div>

        <div class="h-auto mt-9px listMain">
          <el-table :data="tableData" style="width: 100%" height="auto">
            <el-table-column prop="km" label="科目" />
            <el-table-column prop="mf" label="满分" />
            <el-table-column prop="cj" label="成绩" />

            <el-table-column label="班级" fixed="right">
              <el-table-column prop="bj_pjf" label="平均分" />
              <el-table-column prop="bj_zgf" label="最高分"  />
            </el-table-column>

            <el-table-column label="年级" fixed="right">
              <el-table-column prop="nj_pjf" label="平均分" />
              <el-table-column prop="nj_zgf" label="最高分"  />
            </el-table-column>

            <el-table-column label="整体考试" fixed="right">
              <el-table-column prop="ztks_pjf" label="平均分" />
              <el-table-column prop="ztks_zgf" label="最高分"  />
            </el-table-column>

          </el-table>

        </div>

        <div class="h-450px mt-20px echartData" id="echartData"></div>

      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {student_grcjd_list} from "@/pages/ksfx/apiItem";

import { useRouter } from "vue-router";
import { skeletonProps } from 'element-plus';
const router = useRouter();

let StuLeftMenuNum = 2;

let normal_subject = $ref("");
let subject_list = [{
  value: '1',
  label: '语文'
}, {
  value: '2',
  label: '数学'
}]

const tableData =ref([])

//导出
const exportBtn = () => {
  console.log("导出")
}

onMounted(() => {
  initData();
})

const initData = () => {
  let transObj = {
    xueke_id: '',
    grade_id: '',
    school_id: ''
  }
  student_grcjd_list(transObj)
    .then(res => {
      if (res.code == "1") {
        console.log(res)
        tableData.value = res.data.data.tableData;
        initChart(res.data.data.ecahrtData);
      }
    })
    .catch(error => {
      console.log(error);
    })
}

const initChart = (item) => {
  var myChart = echarts.init(document.getElementById('echartData'));
  myChart.setOption({
    title: {
      text: '得分率（%）',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      data: item.xAxis_data
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: '40',
        itemStyle: {
          normal: {
            barBorderRadius: [20, 20, 0, 0],
            color: '#6897FF',
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: 'black',
                fontSize: 16
              }
            }
          }
        },
        data: item.series_data,
      }
    ]
  });
}

</script>

<style scoped>
@import '@/styles/ksfx.css';
.singleT {
  flex: 1;
  font-size: 16px;
  line-height: 74px;
  width: fit-content;
  text-align: center;
  background: #003eee;
}
.secFullWidth{
  flex: 1;
  width: fit-content;
}

</style>
