<script setup>
import { Calendar } from '@element-plus/icons-vue'
import ksfx from './ksfx.vue'
import fsdhztj from './fsdhztj.vue'
import cjfx from './cjfx.vue'
import yxxsb from './yxxsb.vue'
import { initFontSize } from '~/utils/size'

const router = useRouter()

const jh_id = ref('')
const exam_id = ref('')
const date = ref([])
const dateStr = ref('')
const detailInfo = ref({})

const dateRef = $ref()
const handleClick = () => {
  dateRef.focus()
}

const handleClear = () => {
  date.value = []
  initData()
}

const handleChange = (val) => {
  dateStr.value = `${val[0]}~${[val[1]]}`
  initData()
}

const ksjhData = ref([])
const ksmcData = ref([])
initSelectData()
async function initSelectData() {
  const { code, data } = await request({
    baseURL: window.GLOBAL_CONFIG.myxjyszptx,
    url: '/yzy/ksjh/index',
    data: { limit: '100' },
  })
  if (code == 1)
    ksjhData.value = data.page_data

  initKslbData()
}

async function initKslbData() {
  const { code, data } = await request({
    baseURL: window.GLOBAL_CONFIG.myxjyszptx,
    url: 'openapi/chart/yzy_zyxt_exam.php',
    data: { jh_id: jh_id.value },
  })
  if (code == 1)
    ksmcData.value = data

  initData()
}

async function initData() {
  const res = (
    await request({
      baseURL: window.GLOBAL_CONFIG.myxjyszptx,
      url: '/openapi/chart/education_evaluate1.php',
      data: {
        jh_id: jh_id.value,
        exam_id: exam_id.value,
        date_range: dateStr.value,
      },
    })
  )

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

const nextPage = () => {
  router.push({
    name: 'dsj_jypj2',
    query: {
      jh_id: jh_id.value,
      exam_id: exam_id.value,
      date_range: dateStr.value,
    },
  })
}

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

<template>
  <div class="jypj1 overflow-hidden">
    <top-bottom-bg title="教研评价（1）" />
    <div class="topOperate flex justify-between items-center px-8">
      <div class="flex">
        <el-select v-model="jh_id" filterable placeholder="考试计划" popper-class="dsjSelect" clearable @change="initKslbData">
          <el-option v-for="(item, index) in ksjhData" :key="index" :label="item.ykj_ksrwmc" :value="item.ykj_id" />
        </el-select>
        <el-select v-model="exam_id" class="ml-8" filterable placeholder="考试名称" popper-class="dsjSelect" clearable @change="initData">
          <el-option v-for="(item, index) in ksmcData" :key="index" :label="item.ze_name" :value="item.ze_id" />
        </el-select>
      </div>
      <div class="flex items-center">
        <div class="dateDiv">
          <el-input v-model="dateStr" placeholder="请选择日期" :suffix-icon="Calendar" clearable @click="handleClick" @clear="handleClear" />
          <el-date-picker ref="dateRef" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleChange" />
        </div>
        <div class="nextPage cursor-pointer ml-8" @click="nextPage">
          下一页
        </div>
      </div>
    </div>

    <div class="jypjContent p-25px">
      <div class="half w-full grid grid-cols-5 gap-x-25px">
        <div class="dsjCon col-span-3 overflow-auto">
          <title-bg title="考试分析" />
          <ksfx class="childCon" :column-data="detailInfo.ksfxColumnData" :table-data="detailInfo.ksfxTableData" />
        </div>
        <div class="dsjCon col-span-2">
          <title-bg title="分数段汇总统计" padding="px-12" />
          <fsdhztj class="childCon" :data="detailInfo.fsdhztjData" />
        </div>
      </div>
      <div class="half w-full mt-25px grid grid-cols-5 gap-x-25px">
        <div class="dsjCon col-span-3 overflow-auto">
          <title-bg title="成绩分析" />
          <cjfx class="childCon" :column-data="detailInfo.cjfxColumnData" :table-data="detailInfo.cjfxTableData" />
        </div>
        <div class="dsjCon col-span-2">
          <title-bg title="优秀学生榜" />
          <yxxsb class="childCon" :data="detailInfo.cjfxData" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.jypj1 {
  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;
    :deep() {
      .el-input__wrapper {
        box-shadow: none !important;
        background: rgba(102, 255, 255, 0.1);
        border: 1px solid #00b7b2;
        width: 13.375rem;
        .el-input__inner {
          color: rgba($color: #fff, $alpha: 0.8);
          height: 2.625rem;
        }
      }
      .el-select__caret {
        color: rgba(255, 255, 255, 0.8);
      }
    }
    :deep(.dateDiv) {
      position: relative;
      .el-input {
        width: 14.375rem;
        .el-input__suffix {
          font-size: 1.125rem;
          color: #fff;
          &-inner {
            flex-direction: row-reverse;
            -webkit-flex-direction: row-reverse;
            display: flex;
          }
          .el-input__clear {
            color: #fff;
            font-size: 1.125rem;
          }
        }
      }
      .el-date-editor--daterange {
        position: absolute;
        z-index: -1;
        left: 0;
        opacity: 0;
      }
    }
    .nextPage {
      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>
