<script setup>
import zsdzwqk from './zsdzwqk.vue'
import sjfx from './sjfx.vue'
import bjpjftj from './bjpjftj.vue'
import kgtqktjt from './kgtqktjt.vue'
import { initFontSize } from '~/utils/size'

const router = useRouter()
const prePage = () => {
  router.back()
}

const query = ref(router.currentRoute.value.query)

const detailInfo = ref({})

initData()
async function initData() {
  const res = (
    await request({
      baseURL: window.GLOBAL_CONFIG.myxjyszptx,
      url: '/openapi/chart/education_evaluate2.php',
      data: query.value,
    })
  )

  if (res.code == 1)
    detailInfo.value = res.data.education_data
}

initFontSize()
window.addEventListener('resize', async () => {
  initFontSize()
})
</script>

<template>
  <div class="jypj2 overflow-hidden">
    <top-bottom-bg title="教研评价（2）" />
    <div class="topOperate flex items-center px-8">
      <div class="prePage cursor-pointer" @click="prePage">
        上一页
      </div>
    </div>

    <div class="jypjContent p-25px">
      <div class="half w-full grid grid-cols-5 gap-x-25px">
        <div class="dsjCon col-span-2">
          <title-bg title="知识点掌握情况" padding="px-12" />
          <zsdzwqk class="childCon" :data="detailInfo.zsdzwqkData" />
        </div>
        <!-- <div class="dsjCon col-span-3 overflow-auto">
          <title-bg title="试卷分析"></title-bg>
          <sjfx class="childCon" :columnData="detailInfo.sjfxColumnData" :tableData="detailInfo.sjfxTableData" />
        </div> -->
        <div class="dsjCon col-span-3">
          <title-bg title="班级评价分统计" padding="px-12" />
          <bjpjftj class="childCon" :data="detailInfo.bjpjftjData" />
        </div>
      </div>
      <!-- <div class="half w-full mt-25px grid grid-cols-2 gap-x-25px">
        <div class="dsjCon col-span-1">
          <title-bg title="班级评价分统计" padding="px-12"></title-bg>
          <bjpjftj class="childCon" :data="detailInfo.bjpjftjData" />
        </div>
        <div class="dsjCon col-span-1">
          <title-bg title="客观题情况统计图" padding="px-12"></title-bg>
          <kgtqktjt class="childCon" :data="detailInfo.kgtqktjtData" :legend="detailInfo.kgtqktjtLegendData" />
        </div>
      </div> -->
      <div class="half w-full mt-25px">
        <div class="dsjCon h-full overflow-auto">
          <title-bg title="试卷分析" />
          <sjfx class="childCon" :column-data="detailInfo.sjfxColumnData" :data="detailInfo.sjfxTableData" :merge="detailInfo.sjfxMergeData" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.jypj2 {
  background: url(/images/dsj/bg.png) no-repeat;
  background-size: 100% 100%;
  background-color: #000;
  position: relative;
  // min-width: 1280px;
  .topOperate {
    position: absolute;
    width: 100%;
    height: 4.375rem;
    top: 0;
    z-index: 20;
    .prePage {
      width: 8.375rem;
      height: 3.375rem;
      line-height: 3.375rem;
      border: 1px solid #00e0db;
      border-radius: 0.5rem;
      box-shadow: 0px 1px 2.5rem 0px rgba(0, 255, 244, 0.5) inset;
      background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
      -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
      -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
    }
  }
  .jypjContent {
    height: calc(100% - 6.5625rem - 1rem);
    .half {
      height: calc(50% - 12px);
    }
    .dsjCon {
      background: rgba($color: #012337, $alpha: 0.6);
      .childCon {
        height: calc(100% - 4.0625rem);
      }
    }
  }
}
</style>
