<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MY_commonLeft from '@/assets/images/title_left.png'
import MY_commonRight from '@/assets/images/title_right.png'
const router = useRouter()
const route = useRoute()
const timeValue = $ref('')
const school_name = $ref()
function handleLink() {
  router.go(-1)
}
const converToArray = number => [...`${number}`].map(el => parseInt(el))

const baseURL = window.GLOBAL_CONFIG.myxjyszptx

// const stuCondition = (
//   await request({
//     url: "/openapi/chart/student_condition3.php",
//   })
// ).data.student_data;
let stuCondition = $ref({})
let loading = $ref(false)
function initData() {
  loading = true
  const data = {
    ...route.query,
  }
  if (timeValue != '')
    Object.assign(data, { date_range: `${timeValue[0]}~${timeValue[1]}` })

  request({
    baseURL,
    url: '/openapi/chart/student_condition3.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      stuCondition = res.data.student_data
      initDmt(stuCondition.dfRadar)
      loading = false
    }
  })
}
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 == 0)
    return 'warning-row'
  else
    return 'success-row'

  // return "";
}
const tableRowClassNameTwo = ({ row, rowIndex }) => {
  if (rowIndex % 2 == 0)
    return 'warning-row-two'
  else
    return 'success-row-two'

  // return "";
}
let dialogTableVisible = $ref(false)
let detailData = $ref([])
function detail(item) {
  dialogTableVisible = true
  detailData = item.detailInfo
}

// 多媒体
let hdwdJsChart = null
function initDmt(transData) {
  let hdwdJsOption
  transData.radar_data.forEach((item, index) => {
    if (index != 0)
      Object.assign(item, { axisLabel: { show: false } })
  })
  hdwdJsOption = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      left: 120,
      containLabel: false,
    },
    legend: {
      show: false,
    },
    calculable: true,
    radar: {
      // shape: 'circle',
      indicator: transData.radar_data,
      axisLabel: {
        show: true,
        showMinLabel: true,
        showMaxLabel: true,
        hideOverlap: true,
        color: '#999',
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: 'rgba(255,0,0,0)', // 图表背景的颜色
        },
      },
    },
    series: [
      {
        type: 'radar',
        data: transData.series_data,
        barWidth: 23,
        areaStyle: {
          color: 'rgba(0,209,200,0.50)',
        },
        symbol: 'none',
        lineStyle: {
          color: 'rgba(0,209,200,0.50)',
        },
      },
    ],
  }

  hdwdJsOption && hdwdJsChart.setOption(hdwdJsOption)
}

function resizeEcharts() {
  hdwdJsChart.resize()
}

onMounted(() => {
  // hdwdJsChart = echarts.init(document.getElementById("dmt"));

  const dfdf = document.getElementById('dmt')
  dfdf.setAttribute('_echarts_instance_', '')
  hdwdJsChart = echarts.init(dfdf)
  initData()
  window.addEventListener('resize', resizeEcharts)
})
</script>

<template>
  <div v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)" class="bg_full pb-10">
    <div class="bg_top w-full h-5.5vw flex px-4 pt-2">
      <div class="flex w-2/5 justify-between">
        <div class="routerLink">
          <div class="click_routerLink" @click="handleLink">
            上一页
          </div>
        </div>
        <!-- <el-form :inline="true" class="demo-form-inline w-120">
          <el-form-item class="w-1/4">
            <el-select
              class="w-full"
              @change="selectArea"
              clearable
              popper-class="el_date_picker_class"
              v-model="query.area_id"
              placeholder="区域"
            >
              <el-option
                v-for="a in areaList"
                :key="a.id"
                :value="a.id"
                :label="a.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="w-1/4">
            <el-select
              popper-class="el_date_picker_class"
              v-model="query.school_id"
              class="w-full"
              placeholder="学校"
              @change="initData"
              clearable
            >
              <el-option
                v-for="s in schoolList"
                :key="s.id"
                :value="s.schoolid"
                :label="s.schoolname"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="w-1/4">
            <el-select v-model="student" class="w-full">
              <el-option
                v-for="s in stus"
                :key="s.id"
                :value="s.id"
                :label="s.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form> -->
      </div>

      <h1 class="text-white text-2vw text-center self-center flex-1">
        学生学情报告3
      </h1>
      <div class="text_green w-2/5 flex justify-end">
        <el-form :inline="true" class="demo-form-inline w-60">
          <el-form-item>
            <el-date-picker
              v-model="timeValue"
              type="daterange"
              range-separator="-"
              popper-class="el_date_picker_class"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              @change="initData"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="height: calc(100% - 5.5vw - 2vw)" class="mt-4 px-4">
      <div
        class="flex justify-between m0 "
        style="height: calc(50% - 12px)"
      >
        <div class="nav_left bg_black pb-3 px-4 m-0 w-3/5 h-full">
          <div class="MY_commonTitle">
            <p class="px-10">
              空中课堂数据
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 8%" />
          </div>
          <el-table
            :data="stuCondition.kzktTable"
            style="height: calc(100% - 65px)"
            class="el_table_class"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="name" label="姓名" show-overflow-tooltip />
            <el-table-column prop="gksps" label="观看视频数" />
            <el-table-column prop="zywc" label="作业完成" />
            <el-table-column prop="zqtl" label="正确题量" />
            <el-table-column prop="ctl" label="错题量" />
            <el-table-column>
              <template #default="scope">
                <el-button type="success" link @click="detail(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="nav_right bg_black w-1/3">
          <div class="MY_commonTitle">
            <p class="px-10">
              得分能力网
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 8%" />
          </div>
          <div
            id="dmt"
            style="width: 100%; height: 75%; margin: 0 auto"
          />
        </div>
      </div>
      <div
        class="bg_black px-2 dtzy"
        style="height: calc(50% - 0px)"
      >
        <div class="MY_commonTitle">
          <p class="px-10">
            答题作业情况
            <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
            <img :src="MY_commonRight" class="MY_commonRight" alt="">
          </p>
          <div class="bottomLine" style="width: 4%" />
        </div>
        <el-table
          :data="stuCondition.zyTable"
          class="w-full zyTable"
          style="height: calc(100% - 100px)"
          :row-class-name="tableRowClassName"
        >
          <el-table-column fixed prop="name" label="姓名" />
          <el-table-column prop="zyzl" label="作业总量" />
          <el-table-column prop="dfl" label="得分率(%)" />
          <el-table-column prop="zgttl" label="主观题题量" />
          <el-table-column prop="zgtzqs" label="主观题正确数" />
          <el-table-column prop="zgtcws" label="主观题错误数" />
          <el-table-column prop="zgtzql" label="主观题正确率(%)" />
          <el-table-column prop="kgtl" label="客观题量" />
          <el-table-column prop="kgtzqs" label="客观题正确数" />
          <el-table-column prop="kgtcws" label="客观题错误数" />
          <el-table-column prop="kgtzql" label="客观题正确率(%)" />
        </el-table>
      </div>
    </div>

    <div class="footer h-1rem" />
    <el-dialog v-model="dialogTableVisible" class="dialog" title="详情">
      <el-table
        :data="detailData"
        stripe
        max-height="330px"
        class="el_table_class w-1150px center"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="观看课程名" />
        <el-table-column
          prop="gksc"
          show-overflow-tooltip
          label="观看视频时长"
        />
        <el-table-column
          prop="ktdm"
          show-overflow-tooltip
          label="课堂点名(次)"
        />
        <el-table-column
          prop="zywcl"
          show-overflow-tooltip
          label="作业完成量(%)"
        />
        <el-table-column
          prop="zgtdf"
          show-overflow-tooltip
          label="主观题得分(分)"
        />
        <el-table-column
          prop="kgtdf"
          show-overflow-tooltip
          label="客观题得分(分)"
        />
        <el-table-column prop="zf" show-overflow-tooltip label="总分(分)" />
        <el-table-column prop="zql" show-overflow-tooltip label="正确率(%)" />
      </el-table>
    </el-dialog>
  </div>
</template>

  <style lang="scss" scoped>
@use "@/styles/el-table.scss";
@use "@/styles/date-picker.scss";
.bg_black {
  background-color: #0123379c;
  //   height: calc(50% - 12px);
}
.dtzy {
  margin: 20px auto 0;
}
.m0 {
  margin: 0 auto;
}
.MY_commonTitle {
  text-align: center;
  box-sizing: border-box;
  padding: 2%;

  p {
    font-size: 1.5vw;
    font-family: PingFang SC, PingFang SC-8;
    background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    display: inline-block;
    position: relative;
    // padding: 0 4%;
  }

  .bottomLine {
    width: 20%;
    height: 4px;
    background-color: rgba(0, 255, 250, 1);
    border-radius: 3px;
    margin: 2px auto 0 auto;
  }

  .MY_commonLeft {
    width: 2.6vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 13;
  }

  .MY_commonRight {
    width: 2.6vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 13;
  }
}
.zyTable {
  --el-table-header-bg-color: #06262c;
}
.color_green {
  background-color: rgba(102, 255, 255, 0.2) !important;
}
.color_black {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
::deep .el-table {
  --el-table-tr-bg-color: none;
}
.text_green {
  color: #00fff4;
  font-family: SourceHanSansCN, SourceHanSansCN-Bold;
  font-weight: 700;
}
.bg_full {
  min-width: 1200px;
  background-image: url("@/assets/img/dsj/bg.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  .bg_top {
    min-width: 1280px;
    background-image: url("@/assets/img/dsj/top.png");
    background-size: 100%;
    // background-position: center;
    background-repeat: no-repeat;
    justify-content: space-between;
  }
  .main {
    .m_left {
      //background-color: #012337;
    }
  }
  .footer {
    width: 100%;
    min-width: 1280px;
    background-image: url("@/assets/img/dsj/under.png");
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
:deep .el-dialog {
  width: 1300px;
  background-color: #011521;
  padding: 10px;
  .el-dialog__header {
    margin-top: 10px;
  }
  .el-dialog__title {
    color: #fff;
  }
  --el-color-info: #fff;
  .el_table_class {
    margin: 0 auto;
  }
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

:deep .grid-content {
  // border-radius: 4px;
  min-height: 36px;
  background-color: rgba(1, 35, 55, 0.71);
}

.nav_right {
  //   background-color: rgba(1, 35, 55, 0.71);
}
.nav_left {
  .nav_table {
    width: 1050px;
    background-color: rgba(1, 35, 55, 0.71);
  }
  .nav_bg {
    // height: 195px;
    background-image: url("@/assets/img/dsj/tl_bg.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .line_bg {
    width: 409px;
    height: 40px;
    line-height: 40px;
    background-image: url("@/assets/img/dsj/tl_1.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    margin-top: 10px;
    // margin-left: 20px;
  }
  .num_bg {
    display: inline-block;
    color: #66ffff;
    width: 56px;
    height: 70px;
    line-height: 70px;
    margin: 0 3px;
    font-size: 28px;
    background-image: url("@/assets/img/dsj/num_bg.png");
  }
}
.nav_right {
  width: 38%;
}
.top_name {
  background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 28px;
  text-align: center;
}
.routerLink {
  width: 8vw;
  height: 3vw;
  cursor: pointer;
  line-height: 3vw;
  border: 1px solid #00e0db;
  border-radius: 8px;
  color: #00fff4;
  font-family: SourceHanSansCN, SourceHanSansCN-Bold;
  font-weight: 700;
  box-shadow: 0px 1px 39px 0px rgba(0, 255, 244, 0.5) inset;
  margin-right: 3px;
  .click_routerLink {
    background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 20px;
    text-align: center;
  }
}
.sub_title {
  margin: 0 auto;
}
.text_purple {
  color: #ed97ff;
}
.text_yellow {
  color: #fff57b;
}
.text_pink {
  color: #ff579a;
}
.text_blue {
  color: #57e1ff;
}
.text_green {
  color: #54ffd9;
}
</style>

  <style lang="scss">
// 自定义类名就是防止全局修改样式造成样式混乱
.el_date_picker_class {
  background: rgb(24, 24, 24) !important;
  .el-picker-panel {
    background: rgba(102, 255, 255, 0.1) !important;
    color: #fff;
  }
  .in-range {
    color: #000;
  }
  .el-scrollbar {
    background: rgba(102, 255, 255, 0.1) !important;
    .el-select-dropdown__item {
      color: #fff;
    }
    .el-select-dropdown__item.hover {
      color: #000;
    }
  }
}
</style>
