<template>
  <div class="cjfx_jstj">
    <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="w-full py-8 marstReview">
          <div class="normalTit">
            <span>整体成绩分析</span>
          </div>

          <el-table :data="tableDataZtcjfx" style="width: 100%">
            <el-table-column prop="mx" label="满分" show-overflow-tooltip />
            <el-table-column prop="pjf" label="平均分" width="120" />
            <el-table-column prop="ykrs" label="应考人数" />
            <el-table-column prop="skrs" label="实考人数" />
            <el-table-column prop="nd" label="难度" />
            <el-table-column prop="qfd" label="区分度"/>
            <el-table-column prop="bzc" label="标准差" />
            <el-table-column prop="qkrs" label="缺考人数" />
            <el-table-column prop="zgf" label="最高分" />
            <el-table-column prop="zdf" label="最低分" />
            <el-table-column prop="gfzjf" label="高分组均分" width="100" />
            <el-table-column prop="zfzjf" label="中分组均分" width="100" />
            <el-table-column prop="dfzjf" label="低分组均分" width="100" />
          </el-table>
        </div>

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

          <optionSelect  @optionClick="optionClick" />

        </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-20px">
          <div class="normalTit">
            <span>题目分析</span>
          </div>

          <el-table :data="tableDataTmfx" style="width: 100%">
            <el-table-column prop="tm" label="题目" />
            <el-table-column prop="tmlx" label="题目类型" />
            <el-table-column prop="mf" label="满分" />
            <el-table-column prop="pjf" label="平均分" />
            <el-table-column prop="nd" label="难度" />
            <el-table-column prop="qfd" label="区分度"  />
            <el-table-column prop="bzc" label="标准差" />
            <el-table-column prop="gfzjf" label="高分组均分" />
            <el-table-column prop="zdzjf" label="中等组均分" />
            <el-table-column prop="dfzjf" label="低分组均分" />
          </el-table>

        </div>

        <div class="h-auto mt-20px ">
          <div class="normalTit">
            <span>整体成绩分析</span>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="xm" label="姓名" show-overflow-tooltip width="100" />
            <el-table-column prop="xh" label="学号" show-overflow-tooltip width="100" />
            <el-table-column prop="bj" label="班级" show-overflow-tooltip width="100" />
            <el-table-column prop="zf" label="总分" />
            <el-table-column prop="fir_0" label="1" />
            <el-table-column prop="fir_1" label="2"  />
            <el-table-column prop="fir_2" label="17-19" />
            <el-table-column prop="sec_0" label="1" />
            <el-table-column prop="sec_1" label="2"  />
            <el-table-column prop="sec_2" label="17-19" />
            <el-table-column prop="thr_0" label="1" />
            <el-table-column prop="thr_1" label="2"  />
            <el-table-column prop="thr_2" label="17-19" />

          </el-table>

        </div>

      </div>

    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import {cjfx_ztfx_list } from '../apiItem';
const route = useRoute();
import { user } from "~/store";


const activeIndex =ref('2-1');
const ykjId = ref();
const parentClick = (val: string) => {
  activeIndex.value = val;
  ykjId.value = route.params.ykj_id;
}
const tableDataZtcjfx = ref([]);
const tableDataTmfx = ref()

const tableData = ref();
ykjId.value = route.params.ykj_id;
onMounted(() => {
  initData()
})

const school_id = ref("");
const grade_id = ref("");
const xueke_id = ref("");
const initData = () => {
  let transObj = {
    school_id:school_id.value,
    cm_id: grade_id.value,
    xueke_id: xueke_id.value,
    jh_id:route.params.ykj_id
  }
  cjfx_ztfx_list(transObj)
    .then(res => {
      if (res.code == "1") {
        tableDataZtcjfx.value = res.data.data.tableDataZtcjfx;
        tableDataTmfx.value = res.data.data.tableDataTmfx;
        tableData.value = res.data.data.tableData;
      }
    })
  .catch(error=>{console.log(error)})
}

//option筛选
const optionClick = (val: any, marke: any) => {
  if (marke == "scholl") {
    school_id.value = val;
  } else if (marke == "grade") {
    grade_id.value = val;
  } else {
    xueke_id.value = val;
  }
  initData();
}

//导出
const exportBtn = () => {
  let prefixedUrl = window.GLOBAL_CONFIG.web_pc;
  let fullUrl = prefixedUrl + '/openapi/echart/total_data.php?api=xls&token=' + user.value.token;
  window.open(fullUrl,'_blank')
}

</script>


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

</style>
