<template>
  <div class="sjfx_kgtfx">
    <NavHeader />
    <bread-crumb />

    <div class="w-1200px m-auto flex flex-row justify-between">
      <div class="w-188px">
        <leftSider :ykjId="ykjId" :activeIndex="activeIndex"  @parentClick="parentClick"/>
      </div>

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

        <div class="flex mt-20px items-center">

          <el-select class="mr-10px" v-model="normal_school" placeholder="请选择学校" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in school_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <el-select class="mr-10px" v-model="normal_topic" placeholder="请选择题目" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in topic_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

        </div>


        <div class="h-auto mt-20px">
          <div class="normalTit">
            <span>客观题分析</span>
          </div>
          <div class="mt-4 exportBtn" style="text-align: right;">
            <el-button color="#003eee" type="primary" size="large" @click="openDialog">详情</el-button>
        </div>
          <div class="w-full h-388px flex">
            <div class=" w-1/2 h-full left_chart"  id="barChart"></div>
            <div class=" w-1/2 h-full right_chart" id="circleChart"></div>
          </div>


        </div>

      </div>

    </div>

    <commonFooter />

      <!-- dialog  -->
      <el-dialog v-model="dialogTableVisible" title="" style="width: 90%;">
       <div class="mainShow">
          <div class="mainShow_single" v-for="(item,index) in dialogArr " :key="index">
            <p>{{ item.option }}<span>({{ item.stuNum }})</span>人：</p>
            <ul class="flex flex-wrap">
              <li v-for="(secItem,secIndex) in item.detail" :key="secIndex">
                <span>{{secItem.stuSchool  }}</span>
                <span>{{ secItem.classRomm }}</span>
                <span>{{ secItem.stuName }}</span>
              </li>
            </ul>
          </div>
       </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" color="#003eee" @click="dialogTableVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>

  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { skeletonProps } from 'element-plus';
import {normalSchool_list,normalSubject_list,normalClassroom_list,cjfx_kgtfx_list } from '../apiItem';

import { useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();

let normal_topic = $ref("");
let normal_school = $ref("");

let topic_list = [{
  value: '1',
  label: '语文'
}, {
  value: '2',
  label: '数学'
}]

let school_list = [{
  value: '1',
  label: '学校1'
}, {
  value: '2',
  label: '学校2'
}]


const activeIndex =ref('2-2');
const ykjId = ref();
const parentClick = (val) => {
  activeIndex.value = val;
  ykjId.value = route.params.ykj_id;
}
ykjId.value = route.params.ykj_id;
onMounted(() => {
  initData()
})

const initData = () => {
  let transObj = {
    xueke_id: '',
    grade_id: '',
    school_id: ''
  }
  cjfx_kgtfx_list(transObj)
    .then(res => {
      if (res.code == "1") {
        initbarChart(res.data.data.barChartData);
        initcircleChart(res.data.data.circleChartData);
      }
    })
  .catch(error=>{console.log(error)})
}

const initbarChart = (barChartData) => {
  var myChart = echarts.init(document.getElementById('barChart'));
  myChart.setOption({
    title: {
      text: '人数',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      data: barChartData.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: barChartData.series_data,
      }
    ]
  });
}
const initcircleChart = (circleChartData) => {
  var myChart = echarts.init(document.getElementById('circleChart'));
  myChart.setOption({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 40,
    icon: "circle",
    orient: 'vertical',
    textStyle: {
      fontSize: 12,
      color: '#171721'
    },
    x: 'right',
    y: 'center'
  },
  series: [
    {
      name: circleChartData.series_name,
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: circleChartData.series_data
    }
  ]
});
}

const dialogTableVisible = ref(false)
const openDialog = () => {
  dialogTableVisible.value = true;
}

let dialogArr = [
  {
    option: "选项A",
    stuNum: 23,
    detail: [
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      }
    ]
  },
  {
    option: "选项B",
    stuNum: 23,
    detail: [
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      }
    ]
  },
  {
    option: "选项C",
    stuNum: 23,
    detail: [
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      }
    ]
  },
  {
    option: "选项D",
    stuNum: 23,
    detail: [
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },
      {
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      },{
        stuSchool: "苏州小学",
        classRomm: "初一（2）班",
        stuName:"张大大",
      }
    ]
  }
]

</script>


<style lang="scss" scoped>
@import '@/styles/ksfx.css';

</style>
