<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { omit } from 'lodash-es'
import request from '@/utils/request'
import MY_commonLeft from '@/assets/images/title_left.png'
import MY_commonRight from '@/assets/images/title_right.png'
import { user } from '@/store'
const router = useRouter()
const route = useRoute()
const timeValue = $ref('')
const school_name = $ref()
function handleLinkPrev() {
  router.back()
}
function handleLinkNext() {
  router.push({
    name: 'xsxqbg_three',
    query: {
      ...route.query,
    },
  })
}

// let stuCondition = $ref({});

const newName = $ref([])
const newNameTwo = $ref([])
// const stuCondition = (
//   await request({
//     url: "/openapi/chart/student_condition2.php",
//   })
// ).data.student_data;

// stuCondition.tlTable.forEach((item) => {
//   newName.push({
//     text: item.name,
//     value: item.name,
//   });
// });
// stuCondition.zyTable.forEach((item) => {
//   newNameTwo.push({
//     text: item.name,
//     value: item.name,
//   });
// });
const baseURL = window.GLOBAL_CONFIG.myxjyszptx
const areaList = $ref([])
const schoolList = $ref([])
const classList = $ref([])

let loading = $ref(false)
let stuCondition = $ref({})
function initData() {
  loading = true
  const data = {
    ...route.query,
    // ...omit(route.query,'area_id', 'class_id'),
  }
  if (timeValue != '')
    Object.assign(data, { date_range: `${timeValue[0]}~${timeValue[1]}` })

  request({
    baseURL,
    url: '/openapi/chart/student_condition2.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      stuCondition = res.data.student_data
      stuCondition.tlTable.forEach((item) => {
        newName.push({
          text: item.name,
          value: item.name,
        })
      })
      stuCondition.zyTable.forEach((item) => {
        newNameTwo.push({
          text: item.name,
          value: item.name,
        })
      })
      initDmt(res.data.student_data.dmtData)
      initDf(res.data.student_data.dfData)
      loading = false
    }
  })
}

const tableRowClassName = ({ row, rowIndex }) => {
  // console.log(rowIndex%2);
  if (rowIndex % 2 == 0)
    return 'warning-row'
  else
    return 'success-row'

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

  // return "";
}

const filterClass = (value, row) => {
  return row.name === value
}

const filterClassTwo = (value, row) => {
  return row.name === value
}

// 多媒体
let dmtChart
function initDmt(transData) {
  let hdwdJsOption
  // 改变echarts 格式
  const changeData = transData.series_data
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  hdwdJsOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      left: 100,
      containLabel: false,
    },
    legend: {
      show: false,
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        name: '问答详情',
        nameTextStyle: {
          color: '#fff',
          align: 'end',
        },
        data: transEchartdata.xAxis_data,
        axisTick: {
          show: false,
        },
        axisLabel: {
          // x轴文字的配置
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameLocation: 'end',
        name: '(次)',
        nameTextStyle: {
          color: '#53C6DE',
          align: 'right',
        },
        splitNumber: 5,
        axisLabel: {
          color: '#53C6DE',
        },
        splitLine: {
          lineStyle: {
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        name: '教师评价',
        type: 'bar',
        data: transEchartdata.series_data,
        itemStyle: {
          barBorderRadius: [20, 20, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 1,
              color: 'rgba(0, 211, 255, 0.25)',
            },
            {
              offset: 0,
              color: '#228FFE',
            },
          ]),
        },
        barWidth: 23,
      },
    ],
  }

  hdwdJsOption && dmtChart.setOption(hdwdJsOption)
}

let JsChart = null
// 近期得分
function initDf(transData) {
  let JsOption
  // 改变echarts 格式
  const changeData = transData.series_data
  // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  JsOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      left: 100,
      containLabel: false,
    },
    legend: {
      show: true,
      data: [transEchartdata.legend_data],
      type: 'plain',
      right: 60,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: '#68D5EA',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisTick: {
          show: false,
        },
        axisLabel: {
          // x轴文字的配置
          show: true,
          rotate: -18,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameLocation: 'end',
        name: '(分)',
        nameTextStyle: {
          color: '#53C6DE',
          align: 'right',
        },
        splitNumber: 5,
        axisLabel: {
          color: '#53C6DE',
        },
        splitLine: {
          lineStyle: {
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        name: transEchartdata.legend_data,
        type: 'line',
        data: transEchartdata.series_data,
        itemStyle: {
          color: '#EDAA49',
        },
        barWidth: 23,
        smooth: 0.5,
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 3,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
      },
      {
        type: 'slider',
        showDetail: false,
        start: 0,
        height: 5,
        // width: 5,
        // right: 0, //右边的距离
        // bottom: 10, //下边的距离
        brushSelect: false,
        showDataShadow: false,
        show: true, // 是否展示
        fillerColor: '#00fffa', // 滚动条颜色
        borderColor: 'transparent',
        borderColor: 'c2c2c2',
        maxValueSpan: 2,
      },
    ],
  }
  console.log(JsChart, '666')
  nextTick(() => {
    JsChart.resize()
  })
  JsChart.setOption(JsOption)
  JsOption && JsChart.setOption(JsOption)
}

function resizeEcharts() {
  JsChart.resize()
  dmtChart.resize()
}
onMounted(() => {
  dmtChart = echarts.init(document.getElementById('dmt'))

  const dfdf = document.getElementById('df')
  dfdf.setAttribute('_echarts_instance_', '')
  JsChart = 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 min-w-1200px h-5.5vw w-full flex px-4 pt-2">
      <div class="flex w-2/5 justify-between">
        <div class="routerLink mr-1">
          <div class="click_routerLink" @click="handleLinkPrev">
            上一页
          </div>
        </div>
        <!-- <el-form :inline="true" class="demo-form-inline w-120">
          <el-form-item class="w-1/5" v-if="user.user_role_id * 1 < 71">
            <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/5" v-if="user.user_role_id * 1 < 72">
            <el-select
              class="w-full"
              popper-class="el_date_picker_class"
              v-model="query.school_id"
              placeholder="学校"
              @change="selectSchool"
              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/5">
            <el-select
              popper-class="el_date_picker_class"
              v-model="query.class_id"
              class="w-full"
              placeholder="班级"
              @change="selectClass"
              clearable
            >
              <el-option
                v-for="s in classList"
                :key="s.classid"
                :value="s.classid"
                :label="s.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="w-1/5">
            <el-select class="w-full" v-model="query.user_id">
              <el-option
                v-for="s in stuList"
                :key="s.user_id"
                :value="s.user_id"
                :label="s.user_name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form> -->
      </div>

      <h1 class="text-white text-2vw text-center self-center flex-1">
        学生学情报告2
      </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 class="routerLink text-sm leading-12">
          <div class="click_routerLink" @click="handleLinkNext">
            下一页
          </div>
        </div>
      </div>
    </div>
    <div
      class="px-4 w-full flex justify-around mt-4"
      style="height: calc(100% - 5.5vw - 2vw)"
    >
      <div class="nav_left px-0 m-0 w-3/5">
        <div class="bg_black py-2 px-4 h-1/2">
          <div class="MY_commonTitle">
            <p>
              智慧课堂讨论参与情况
              <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.tlTable"
            style="height: calc(100% - 4.8vw)"
            class="el_table_class"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="name"
              :filters="newName"
              :filter-method="filterClass"
              filter-placement="bottom-end"
              label="姓名"
            />
            <el-table-column prop="ktyxcs" label="课堂预习次数(次)" />
            <el-table-column prop="fycs" label="发言次数(次)" />
            <el-table-column prop="sthd" label="随堂活动参与次数(次)" />
            <el-table-column prop="sxdt" label="手写答题(次)" />
            <el-table-column prop="xzdt" label="选择答题(次)" />
            <el-table-column prop="ktdt" label="口头答题(次)" />
          </el-table>
        </div>
        <div class="bg_black mt-6 py-2 px-4 h-1/2">
          <div class="MY_commonTitle">
            <p>
              智慧课堂作业分析
              <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.zyTable"
            style="height: calc(100% - 4.8vw)"
            class="w-9/10 zyTable"
            :scrollbar-always-on="true"
            :row-class-name="tableRowClassNameTwo"
          >
            <el-table-column
              fixed
              prop="name"
              width="130"
              :filters="newNameTwo"
              :filter-method="filterClassTwo"
              filter-placement="bottom-end"
              label="姓名"
            />
            <el-table-column
              prop="zywccs"
              width="140"
              label="作业完成次数(次)"
            />
            <el-table-column prop="zywcl" width="140" label="作业完成率(%)" />
            <el-table-column
              prop="aswccs"
              width="140"
              label="按时完成次数(次)"
            />
            <el-table-column
              prop="cswccs"
              width="140"
              label="超时完成次数(次)"
            />
            <el-table-column prop="yxl" width="140" label="优秀率(%)" />
            <el-table-column prop="lhl" width="140" label="良好率(%)" />
            <el-table-column prop="zdl" width="140" label="中等率(%)" />
            <el-table-column prop="zdl" width="140" label="合格率(%)" />
            <el-table-column prop="zdl" width="140" label="不及格率(%)" />
          </el-table>
        </div>
      </div>
      <div class="nav_right">
        <div class="bg_black p-4 h-1/2">
          <div class="MY_commonTitle">
            <p style="padding: 0 10%;">
              多媒体问答详情
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 10%" />
          </div>
          <div class="h-9/10">
            <div id="dmt" style="width: 100%; height: 100%" />
          </div>
        </div>
        <div class="bg_black p-4 mt-5 h-1/2 relative">
          <div class="MY_commonTitle">
            <p style="padding: 0 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 class="relative h-9/10">
            <div id="df" style="width: 100%; height: 100%; z-index: 5" />
          </div>
        </div>
      </div>
    </div>

    <div class="footer h-1rem" />
  </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);
}
.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 6%;
  }

  .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;
}
.arrow {
  position: absolute;
  bottom: 50px;
  left: 100px;
}
.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;
  }
}

.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: 90%;
    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;
  .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>
