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

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

      <div class="w-942 p-4 blueBg">

        <div class="flex items-center">

          <!-- <statisticsSchool :normal_school="normal_school" :school_list="school_list" /> -->

          <el-select class="mr-10px" v-model="normal_school" placeholder="请选择学校" size="large" @change="handelSchool">
            <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_classroom" placeholder="请选择班级" size="large">
            <el-option label="全部" value="0" />
            <el-option v-for="item in classroom_list" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <el-select class="mr-10px" v-model="normal_subject" placeholder="请选择学科" size="large" @change="handelSubject">
            <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="mt-4 exportBtn">
          <el-button color="#003eee" type="primary" size="large" @click="exportBtn">导出</el-button>
        </div>

        <div class="h-218px mt-5px  bg-gray-500 py-4 pl-150px pr-100px perfectShow">
          <div class="h-full  flex justify-between" v-if="rangeData.length==0">
            <div class="h-full bg-opacity-20 rounded singlepart" v-for="(item, index) in rangeData" :key="index">
              <div class="h-1/3 text-center py-4  RankLabel">
                <img :src="'/images/one'+(index+1)+'.png'" alt="">
              </div>
              <div class="text-sm p-5px RankBaseInfo">
                <p class="h-1/4">考号：{{ item.kh }}</p>
                <p class="h-1/4">成绩：{{item.cj}}分</p>
                <p class="h-1/4">名次：{{ item.mc }}</p>
                <p class="h-1/4">学校：{{ item.xx }}</p>
              </div>
            </div>
          </div>
          <div class="text-center " style="line-height:218px;" v-else>
            暂无排名~
          </div>
        </div>

        <div class="h-auto mt-9px listMain" >
          <div class="h-74px flex flex-wrap flex-grow justify-between rounded px-4 listMain_title" >
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.kh }}</div>
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.xm }}</div>
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.bj }}</div>

            <div class="h-full singleD" v-for="(secItem, secIndex) in listTitleShow.subInfo" :key="secIndex">
              <div class="h-1/2 text-center">{{ secItem.subTitle }}</div>
              <div class="h-1/2 flex flex-wrap flex-grow justify-between">
                <div class="secFullWidth">{{ secItem.fs }}</div>
                <div class="secFullWidth">{{ secItem.bp }}</div>
                <div class="secFullWidth">{{ secItem.np }}</div>
              </div>
            </div>

          </div>

          <div class="h-60px flex flex-wrap flex-grow justify-between px-4" :class="{ 'whiteBG': (index + 1) % 2 != 1 }"
            v-for="(item, index) in listShow" :key="index">

            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.kh }}</div>
            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.xm }}</div>
            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.bj }}</div>
            <div class="h-full singleDSec" v-for="(secItem, secIndex) in item.subInfo" :key="secIndex">
              <div class="h-full flex flex-wrap flex-grow justify-between">
                <div class="secFullWidth">{{ secItem.fs }}</div>
                <div class="secFullWidth">{{ secItem.bp }}</div>
                <div class="secFullWidth">{{ secItem.np }}</div>
              </div>
            </div>

          </div>

        </div>

      </div>
    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import {ksjh_detail,cjfx_cjd_list } from '../apiItem';
import { useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();

let allData = ref("");
let normal_subject = $ref("");

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


let school_list = ref([{
  value: '1',
  label: '学校1'
}]);

let classroom_list =ref([{
  value: '1',
  label: '初一（1）班'
}]) ;

let subject_list = ref([{
  value: '1',
  label: '语文'
}]);

let schoolAndClass = ref([]);

// 侧边栏点击
const activeIndex = ref('1-1');
let ykjId = ref();
const parentClick = (val: string) => {
  activeIndex.value = val;
  ykjId.value = route.params.ykj_id;
}

let rangeData =ref([])
let listTitleShow = ref({
  "kh": "考号",
  "xm": "姓名",
  "bj": "班级",
  "subInfo": [
    {
      "subTitle": "语文",
      "fs": "分数",
      "bp": "班排",
      "np": "年排",
    },
    {
      "subTitle": "数学",
      "fs": "分数",
      "bp": "班排",
      "np": "年排",
    }
  ]
});
let listShow = ref([
  {
    "kh": "2345443211",
    "xm": "迪丽热巴",
    "bj": "初一（2）班",
    "subInfo": [
      {
        "subTitle": "语文",
        "fs": "87.45",
        "bp": "1",
        "np": "1",
      },
      {
        "subTitle": "数学",
        "fs": "87.45",
        "bp": "1",
        "np": "1",
      },

    ]
  },
]);


ykjId.value = route.params.ykj_id;

onMounted(() => {
  initOption();
  initData();
})
// 初始化选项列表
const initOption = () => {
  let transObj = {
    ykj_id:route.params.ykj_id,
  }

  ksjh_detail(transObj)
    .then(res => {
      if (res.code == "1") {
        //初始化联考学校
        let linkao_scholl = res.data.one_info.ykj_lkxx_ex;
        let temp_school: { value: any; label: any; }[] = [];
        linkao_scholl.forEach((item: { sm_id: any; sm_name: any; }) => {
          temp_school.push({
            value: item.sm_id,
            label: item.sm_name
          })
        });
        school_list.value = temp_school;

        //
        schoolAndClass.value = res.data.one_info.school_and_class;
        //联考下的学科-从lc下取值
        let allLc = res.data.one_info.lc;
        let temp_xueke: { value: any; label: any; }[] = [];
        allLc.forEach((item: { ze_id: any; ykl_lc: string; }) => {
          temp_xueke.push({
            value: item.ze_id,
            label: JSON.parse(item.ykl_lc).ze_xueke_name
          })
        })
        subject_list.value = temp_xueke;

      }
    })
    .catch(error => { console.log(error) })
}
const school_id = ref("");
const grade_id = ref("");
const xueke_id = ref("");

// 初始化数据
const initData =() => {
  let transObj = {
    school_id:school_id.value,
    grade_id: grade_id.value,
    xueke_id: xueke_id.value,
    jh_id:route.params.ykj_id,//考试计划id
  }
  cjfx_cjd_list(transObj)
    .then(res => {
      if (res.code == "1") {
        listTitleShow.value = res.data.data.listTitleShow;
        listShow.value = res.data.data.listShow;
        rangeData.value = res.data.data.rangeData;
      }
    })
  .catch(error=>{console.log(error)})
}


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

//点击学校筛选
const handelSchool = (item) => {
  school_id.value = item;
  initData();
  //这里的联动缺失
  //..................
  let aa = [
    {
      sm_id: "267",
      sm_name: "aaa",
      classes: [
        {
          cm_id: "8765",
          cm_name:"bbbbb"
        }
      ]
    }
  ]
  aa.forEach(element => {
    let temp_classes: { value: string; label: string; }[] = [];
    if (element.sm_id == item) {
      element.classes.forEach(i => {
        temp_classes.push({
          value: i.cm_id,
          label: i.cm_name
        })
      })
    }
    classroom_list.value = temp_classes;
  })

}
//点击班级筛选

//点击学科筛选
const handelSubject=(item)=>{
  xueke_id.value = item;
  initData();
}
</script>

<style lang="scss" scoped>

::v-deep .el-sub-menu__title {
  background: #003eee;
  color: #fff;
}

.blueBg {
  background: #F1F7FF;
}

.whiteBG {
  background: #fff;
}

.singlepart {
  background-color: rgba($color: #ffffff, $alpha: 0.2);
  color: #fff;
}

.listMain {
  max-height: 600px;
  overflow-y: auto;
}

.listMain_title {
  font-size: 16px;
  color: #fff;
  background: #003eee;
  overflow-y: auto;
}

.singleT {
  flex: 1;
  line-height: 74px;
  width: fit-content;
  text-align: center;
}

.singleD {
  flex: 1;
}

.singleTSec {
  width: fit-content;
  flex: 1;
  line-height: 60px;
  text-align: center;
}

.singleDSec {
  flex: 1;
  line-height: 60px;
}

.secFullWidth {
  width: fit-content;
  flex: 1;
  text-align: center;
}
.perfectShow{
  background: url("/images/big_bg.png") no-repeat left top;
  background-size:cover;
}
.RankLabel{
  text-align: center;
  img{
    display: inline-block;
    width: 30%;
  }
}
</style>
