<script setup>
// import request from '';
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { omit } from 'lodash-es'
import image_jxgj1 from '@/assets/img/dsj/circle1.png'
import image_jxgj2 from '@/assets/img/dsj/circle2.png'
import image_jxgj3 from '@/assets/img/dsj/circle3.png'
import image_jxgj4 from '@/assets/img/dsj/circle4.png'
import image_jxgj5 from '@/assets/img/dsj/circle5.png'
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 baseURL = window.GLOBAL_CONFIG.myxjyszptx
const https = window.GLOBAL_CONFIG.api
const timeValue = $ref('')
const query = $ref({
  area_id: '',
  school_id: '',
  class_id: '',
})
let year = $ref()
let month = $ref()
let day = $ref()
let hour = $ref()
let minutes = $ref()
let seconds = $ref()
// #region 时间
function getNowDate() {
  const date = new Date()
  year = date.getFullYear()
  month = date.getMonth() + 1
  day = date.getDate()
  hour = date.getHours()
  minutes = date.getMinutes()
  seconds = date.getSeconds()
  if (month >= 1 && month <= 9)
    month = `0${month}`

  if (day >= 0 && day <= 9)
    day = `0${day}`

  if (hour >= 0 && hour <= 9)
    hour = `0${hour}`

  if (minutes >= 0 && minutes <= 9)
    minutes = `0${minutes}`

  if (seconds >= 0 && seconds <= 9)
    seconds = `0${seconds}`
}
setInterval(getNowDate, 1000)
// #endregion

let areaList = $ref([])
let schoolList = $ref([])
let classList = $ref([])

function areaInit() {
  request({
    baseURL,
    url: '/area/main/index',
    data: {
      upid: '2615',
    },
  }).then((res) => {
    if (res.code == '1')
      areaList = res.data.page_data
  })
}

if (user.value.user_role_id * 1 >= 3 && user.value.user_role_id * 1 <= 69) {
  areaInit()
}
else if (user.value.user_role_id * 1 === 71) {
  selectArea(user.value.area_info.area_id4)
}
else if (user.value.user_role_id * 1 === 72) {
  selectSchool(user.value.sm_info.sm_id)
}
else if (user.value.user_role_id * 1 === 75) {
  let classeach = {}
  user.value.cm_info.forEach((item) => {
    classeach = {
      classid: item.cm_id,
      name: item.cm_name,
      school_id: item.sm_id,
    }
    classList.push(classeach)
  })
  query.school_id = user.value?.sm_info?.sm_id
}

function selectArea(val) {
  query.school_id = ''
  query.class_id = ''
  if (val) {
    request({
      baseURL,
      url: '/school/main/index',
      data: {
        upid4: val,
        limit: 9999,
        page: 1,
      },
    }).then((res) => {
      if (res.code == '1') {
        schoolList = res.data.page_data
        initData()
      }
    })
  }
  else {
    schoolList = []
  }
}
function selectSchool(val) {
  query.class_id = ''
  if (val) {
    request({
      baseURL,
      url: '/class/main/index',
      data: {
        schoolid: val,
        limit: 9999,
        page: 1,
      },
    }).then((res) => {
      if (res.code == '1') {
        classList = res.data.page_data
        initData()
      }
    })
  }
  else {
    classList = []
  }
}
let loading = $ref(false)
let classAnalyse = $ref({})
function initData() {
  loading = true
  const data = {
    // ...omit(query,"area_id")
    ...query,
  }
  if (timeValue != '')
    Object.assign(data, { date_range: `${timeValue[0]}~${timeValue[1]}` })

  request({
    baseURL,
    timeout: 30 * 1000,
    url: '/openapi/chart/classroom_data.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      classAnalyse = res.data.classroom_timelong
      initKtsc(res.data.classroom_timelong.ktscData)
      initStxl(res.data.classroom_timelong.stxlData)
      initStks(res.data.classroom_timelong.stksData)
      initKtbx(res.data.classroom_timelong.ktbxData)
      initHdwdJs(res.data.classroom_timelong.hdwdJsData)
      initHdwdXs(res.data.classroom_timelong.hdwdXsData)
      loading = false
    }
  })
}

// let classAnalyse = (
//   await request({
//     baseURL,
//     url: "/openapi/chart/classroom_data.php",
//     data: {
//       date_range: timeValue[0] + "~" + timeValue[1],
//     },
//   })
// ).data.classroom_timelong;

let ktscChart
// #region 课堂时长分配
function initKtsc(transData) {
  console.log(transData)
  let ktscOption
  // 改变echarts 格式
  const changeData = transData.series_data
  // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
  const list1 = []
  const list2 = []
  const list3 = []
  const list4 = []
  const list5 = []

  changeData.forEach((item, index) => {
    list1.push(item[0])
    list2.push(item[1])
    list3.push(item[2])
    list4.push(item[3])
    list5.push(item[4])
  })
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  ktscOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      containLabel: false,
      left: 50,
    },
    legend: {
      data: transEchartdata.legend_data,
      type: 'plain',
      right: 40,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: 'rgba(255, 255, 255, 1)',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisLabel: {
          // x轴文字的配置
          show: true,
          rotate: -16,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameLocation: 'end',
        name: '单位: 小时',
        nameTextStyle: {
          color: 'rgba(253, 253, 253, 1)',
        },
        nameGap: 25,
        splitNumber: 4,
        axisLabel: {
          color: '#68D5EA',
        },
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        name: '小练',
        type: 'bar',
        data: list1,
        itemStyle: {
          borderRadius: [6, 6, 0, 0],
          color: '#ED97FF',
        },
        barWidth: 6,
      },
      {
        name: '授课',
        type: 'bar',
        data: list2,
        itemStyle: {
          borderRadius: [6, 6, 0, 0],
          color: '#FFF57B',
        },
        barWidth: 6,
      },
      {
        name: '互动',
        type: 'bar',
        data: list3,
        itemStyle: {
          borderRadius: [6, 6, 0, 0],
          color: '#54FFD9',
        },
        barWidth: 6,
      },
      {
        name: '讨论',
        type: 'bar',
        data: list4,
        itemStyle: {
          borderRadius: [6, 6, 0, 0],
          color: '#57E1FF',
        },
        barWidth: 6,
      },
      {
        name: '考试',
        type: 'bar',
        data: list5,
        itemStyle: {
          borderRadius: [6, 6, 0, 0],
          color: '#FF579A',
        },
        barWidth: 6,
        barGap: 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,
        zoomLock: true,
      },
    ],
  }

  ktscOption && ktscChart.setOption(ktscOption)
}

// #endregion

function handleLink() {
  // console.log();
  router.push({
    name: 'kttl',
    query: {
      ...query,
    },
  })
}

// #region 随堂小练
let stxlChart
function initStxl(transData) {
  let stxlOption
  // 改变echarts 格式
  const changeData = transData.series_data
  // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
  const list1 = []
  const list2 = []
  const list3 = []

  changeData.forEach((item, index) => {
    list1.push(item[0])
    list2.push(item[1])
    list3.push(item[2])
  })
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  stxlOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      // show: false,
      left: 50,
      containLabel: false,
    },
    legend: {
      data: transEchartdata.legend_data,
      show: true,
      type: 'plain',
      right: 10,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: '#68D5EA',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisLabel: {
          // x轴文字的配置
          show: true,
          rotate: -16,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameLocation: 'end',
        name: '(人)',
        nameTextStyle: {
          color: '#68D5EA',
        },
        nameGap: 25,
        splitNumber: 5,
        axisLabel: {
          color: '#68D5EA',
        },
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
      {
        type: 'value',
        name: '(%)',
        splitLine: {
          show: false,
        },
        min: 0,
        max: 100,
        nameTextStyle: {
          color: '#68D5EA',
        },
        axisLabel: {
          color: '#68D5EA',
        },
      },
    ],
    series: [
      {
        name: '总人数',
        type: 'bar',
        data: list1,
        itemStyle: {
          color: '#54FFD9',
        },
        barWidth: 8,
      },
      {
        name: '正确人数',
        type: 'bar',
        data: list2,
        itemStyle: {
          color: '#FFF57B',
        },
        barWidth: 8,
      },
      {
        name: '正确率',
        type: 'line',
        yAxisIndex: 1,
        data: list3,
        itemStyle: {
          color: '#ED97FF',
        },
        smooth: 0.3,
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 4,
        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,
      },
    ],
  }

  stxlOption && stxlChart.setOption(stxlOption)
}
// #endregion

// #region 随堂考试
let stksChart = null
function initStks(transData) {
  let stksOption
  // 改变echarts 格式
  const changeData = transData.series_data
  // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
  const list1 = []
  const list2 = []
  const list3 = []

  changeData.forEach((item, index) => {
    list1.push(item[0])
    list2.push(item[1])
    list3.push(item[2])
  })
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  stksOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      left: 50,
      containLabel: false,
    },
    legend: {
      data: transEchartdata.legend_data,
      type: 'plain',
      right: 40,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: '#68D5EA',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisLabel: {
          // x轴文字的配置
          show: true,
          rotate: -16,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        // nameLocation: "end",
        // name: "(人)",
        // nameTextStyle: {
        //   color: "#68D5EA",
        // },
        // nameGap: 25,
        splitNumber: 5,
        axisLabel: {
          color: '#68D5EA',
        },
        splitLine: {
          lineStyle: {
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        name: '最高',
        type: 'line',
        data: list1,
        itemStyle: {
          color: '#54FFD9',
        },
        barWidth: 8,
      },
      {
        name: '平均',
        type: 'line',
        data: list2,
        itemStyle: {
          color: '#FFF57B',
        },
        barWidth: 8,
      },
      {
        name: '最低',
        type: 'line',
        data: list3,
        itemStyle: {
          color: '#ED97FF',
        },
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 4,
        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,
      },
    ],
  }

  stksOption && stksChart.setOption(stksOption)
}
// #endregion

// #region 课堂表现
let ktbxChart = null
function initKtbx(transData) {
  let ktbxOption
  // 改变echarts 格式
  const changeData = transData.series_data
  // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
  const list1 = []
  const list2 = []

  changeData.forEach((item, index) => {
    list1.push(item[0])
    list2.push(item[1])
  })
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  ktbxOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      containLabel: false,
      left: 100,
    },
    legend: {
      data: transEchartdata.legend_data,
      type: 'plain',
      right: 0,
      // right: 40,
      textStyle: {
        color: '#fff',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'value',
        splitNumber: 6,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#2F4276',
          },
        },
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          show: false,
          // lineStyle: {
          //   // 使用深浅的间隔色
          //   color: ["#53C6DE"],
          //   width: "0.2",
          // },
        },
        nameLocation: 'end',
        name: '(次)',
        nameTextStyle: {
          color: '#fff',
        },
        nameGap: 25,
      },
      {
        type: 'value',
        splitNumber: 5,
        axisLabel: {
          color: '#fff',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#2F4276',
          },
        },
        min: 0,
        max: 100,
        splitLine: {
          show: false,
        },
        nameLocation: 'end',
        name: '(分)',
        nameTextStyle: {
          color: '#fff',
        },
        nameGap: 25,
      },
    ],
    yAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            width: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // y轴文字的配置
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    series: [
      {
        name: '表现评分',
        type: 'bar',
        data: list1,
        xAxisIndex: 1,
        itemStyle: {
          barBorderRadius: [0, 20, 20, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: 'rgba(247,200,255,0.00)',
            },
            {
              offset: 1,
              color: '#ED97FF',
            },
          ]),
        },
        barWidth: 8,
        label: {
          show: true,
          color: '#ED97FF',
          fontWeight: 'bold',
          position: 'right',
        },
      },
      {
        name: '奖励次数',
        type: 'bar',
        data: list2,
        itemStyle: {
          barBorderRadius: [0, 20, 20, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: 'rgba(255,251,178,0.00)',
            },
            {
              offset: 1,
              color: '#FFF57B',
            },
          ]),
        },
        barWidth: 8,
        label: {
          show: true,
          color: '#FFF57B',
          fontWeight: 'bold',
          position: 'right',
        },
      },
    ],
    dataZoom: [
      {
        yAxisIndex: 0,
        type: 'inside',
        startValue: 0,
        endValue: 3,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
      },
      {
        type: 'slider',
        yAxisIndex: 0,
        showDetail: false,
        start: 0,
        // height: 80,
        width: 5,
        left: 10,
        // right: 0, //右边的距离
        // bottom: 10, //下边的距离
        brushSelect: false,
        showDataShadow: false,
        show: true, // 是否展示
        fillerColor: '#00fffa', // 滚动条颜色
        borderColor: 'transparent',
        borderColor: 'c2c2c2',
        maxValueSpan: 2,
      },
    ],
  }

  ktbxOption && ktbxChart.setOption(ktbxOption)
}
// #endregion

// #region 互动问答-教师
let hdwdJsChart = null
function initHdwdJs(transData) {
  let hdwdJsOption

  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,
      containLabel: false,
    },
    legend: {
      data: transEchartdata.legend_data,
      type: 'plain',
      left: 30,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: '#68D5EA',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisTick: {
          show: false,
        },
        axisLabel: {
          // x轴文字的配置
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        minInterval: 25,
        maxInterval: 25,
        nameLocation: 'end',
        name: '分',
        nameTextStyle: {
          color: '#fff',
          align: 'right',
        },
        // max: 100,
        min: 0,
        // nameGap: 25,
        splitNumber: 4,
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        name: '教师评价',
        type: 'line',
        data: transData.series_data,
        itemStyle: {
          color: '#54FFD9',
        },
        barWidth: 8,
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 6,
        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,
      },
    ],
  }

  hdwdJsOption && hdwdJsChart.setOption(hdwdJsOption)
}
// #endregion

// #region 互动问答-学生
let hdwdXsChart = null
function initHdwdXs(transData) {
  let hdwdXsOption
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  hdwdXsOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      containLabel: false,
    },
    legend: {
      data: transEchartdata.legend_data,
      type: 'plain',
      left: 30,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: '#68D5EA',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisTick: {
          show: false,
        },
        axisLabel: {
          // x轴文字的配置
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        minInterval: 25,
        maxInterval: 25,
        nameLocation: 'end',
        name: '分',
        nameTextStyle: {
          color: '#fff',
          align: 'right',
        },
        // max: 100,
        min: 0,
        // nameGap: 25,
        splitNumber: 4,
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        name: '学生评价',
        type: 'line',
        data: transData.series_data,
        itemStyle: {
          color: '#32C5FF',
        },
      },
    ],
    dataZoom: [
      {
        type: 'inside',
        startValue: 0,
        endValue: 6,
        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,
      },
    ],
  }

  hdwdXsOption && hdwdXsChart.setOption(hdwdXsOption)
}
// #endregion

function resizeEcharts() {
  ktscChart.resize()
  stxlChart.resize()
  stksChart.resize()
  ktbxChart.resize()
  hdwdJsChart.resize()
  hdwdXsChart.resize()
}

onMounted(() => {
  const ktsc = document.getElementById('ktsc')
  ktsc.setAttribute('_echarts_instance_', '')
  ktscChart = echarts.init(ktsc)

  const stxl = document.getElementById('stxl')
  stxl.setAttribute('_echarts_instance_', '')
  stxlChart = echarts.init(stxl)

  const stks = document.getElementById('stks')
  stks.setAttribute('_echarts_instance_', '')
  stksChart = echarts.init(stks)

  const ktbx = document.getElementById('ktbx')
  ktbx.setAttribute('_echarts_instance_', '')
  ktbxChart = echarts.init(ktbx)

  const hdwdJs = document.getElementById('hdwd_js')
  hdwdJs.setAttribute('_echarts_instance_', '')
  hdwdJsChart = echarts.init(hdwdJs)

  const hdwdXs = document.getElementById('hdwd_xs')
  hdwdXs.setAttribute('_echarts_instance_', '')
  hdwdXsChart = echarts.init(hdwdXs)

  initData()
  window.addEventListener('resize', resizeEcharts)
})
</script>

<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    element-loading-text="加载时间较长, 请耐心等待~"
    class="bg_full min-w-1200px pb-10"
  >
    <div class="bg_top w-full h-5.5vw flex px-4 pt-2">
      <div class="w-2/5">
        <el-form :inline="true" class="demo-form-inline w-full flex">
          <el-form-item class="w-1/4">
            <el-date-picker
              v-model="timeValue"
              type="daterange"
              range-separator="-"
              class="w-full"
              popper-class="el_date_picker_class"
              start-placeholder="开始"
              end-placeholder="结束"
              value-format="YYYY-MM-DD"
              @change="initData"
            />
          </el-form-item>
          <el-form-item v-if="user.user_role_id * 1 < 71" class="w-1/5">
            <el-select
              v-model="query.area_id"
              clearable
              class="w-full"
              popper-class="el_date_picker_class"
              placeholder="区域"
              @change="selectArea"
            >
              <el-option
                v-for="a in areaList"
                :key="a.id"
                :value="a.id"
                :label="a.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="user.user_role_id * 1 < 72" class="w-1/5">
            <el-select
              v-model="query.school_id"
              popper-class="el_date_picker_class"
              class="w-full"
              placeholder="学校"
              clearable
              @change="selectSchool"
            >
              <el-option
                v-for="s in schoolList"
                :key="s.id"
                :value="s.schoolid"
                :label="s.schoolname"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="user.user_role_id * 1 <= 75" class="w-1/5">
            <el-select
              v-model="query.class_id"
              popper-class="el_date_picker_class"
              class="w-full"
              placeholder="班级"
              clearable
              @change="initData"
            >
              <el-option
                v-for="s in classList"
                :key="s.classid"
                :value="s.classid"
                :label="s.name"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <h1 class="text-white text-2vw text-center self-center flex-1">
        课堂记录统计分析
      </h1>
      <div class="text_green text-base text-center leading-relaxed w-2/5">
        {{ year }}年{{ month }}月{{ day }}日 {{ hour }}:{{ minutes }}:{{
          seconds
        }}
      </div>
    </div>

    <div class="px-4 w-full flex justify-around main mt-2">
      <div class="h-full w-5/9">
        <div class="grid-content height_href flex justify-around">
          <div class="w-1/2 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: 15%" />
            </div>
            <div style="height: calc(100% - 80px)" class="relative">
              <div
                id="ktsc"
                class="top-5 left-0"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
          <div class="w-1/2 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: 20%" />
            </div>
            <div id="jxgj" class="w-full h-4/5 top-15 left-0">
              <div
                class="flex justify-around h-full px-4 content-around"
                style="flex-wrap: wrap"
              >
                <div
                  v-for="(i, index) in classAnalyse.images"
                  :key="index"
                  class="h-1/3 w-2/5 flex"
                  :style="{ backgroundImage: `url(${https}${i.img})` }"
                  style="background-repeat: no-repeat; background-size: 100%"
                >
                  <div
                    :class="[
                      { text_purple: index == 0 },
                      { text_yellow: index == 1 },
                      { text_pink: index == 2 },
                      { text_blue: index == 3 },
                      { text_green: index == 4 },
                    ]"
                    class="text-white text-center text-lg h-20 leading-15"
                    style="font-size: 1.6vw; width: 48%"
                  >
                    {{ i.title }}
                  </div>
                  <div class="pl-4">
                    <span
                      v-if="i.num < 9999"
                      class="w-5 inline-block text-white font-medium text-2xl"
                    >{{ i.num }}</span>
                    <span
                      v-if="i.num > 9999"
                      class="w-5 inline-block text-white font-medium text-2xl"
                    >{{ (i.num / 10000).toFixed(2) }}w</span>
                    <p class="text-white h-5 leading-6">
                      次
                    </p>
                  </div>
                  <!-- <span class="text-white inline-block ">{{i.title}}</span>
                    <div class="absolute left-25 top-2">
                      <span class="text-white font-semibold text-2xl" v-if="i.num < 9999">{{
                        i.num
                      }}</span>
                      <span class="text-white font-semibold text-2xl" v-if="i.num > 9999"
                        >{{ (i.num / 10000).toFixed(2) }}w</span
                      >
                      <p class="text-white h-10 leading-relaxed">次</p>
                    </div>

                    <img :src="i.img" alt="" /> -->
                </div>
                <div class="routerLink w-1/2 h-1/4 flex items-center">
                  <div class="w-full h-2/3">
                    <div class="click_routerLink w-full" @click="handleLink">
                      点击查看讨论数据
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="grid-content height_href_two flex justify-around my-7">
          <div class="w-1/2 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: 15%" />
            </div>
            <div style="height: calc(100% - 60px)" class="relative">
              <div
                id="stxl"
                class="left-0"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
          <div class="w-1/2 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: 15%" />
            </div>
            <div style="height: calc(100% - 60px)" class="relative">
              <div
                id="stks"
                style="width: 100%; height: 100%"
                class="right-0 w-full"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="w-3/8">
        <div class="grid-content w-full" style="height: calc(40% - 12px)">
          <div class="w-full 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: 10%" />
            </div>
            <div id="ktbx" style="height: 90%" class="w-full" />
          </div>
        </div>
        <div class="grid-content mt-5" style="height: calc(60% - 10px)">
          <div class="w-full 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: 10%" />
            </div>
            <div id="hdwd_js" style="height: 40%" class="w-full" />
            <div id="hdwd_xs" style="height: 40%" class="w-full" />
          </div>
        </div>
      </div>
    </div>

    <div class="footer h-1rem" />
  </div>
</template>

<style lang="scss" scoped>
@use "@/styles/date-picker.scss";
.bg_black {
  background-color: #0123379c;
}
.height_href {
  height: calc(60% - 2vw);
}
.height_href_two {
  height: calc(45% - 2vw);
}
.arrow {
  position: absolute;
  // width: 80%;
  bottom: 30px;
  left: 40px;
}
.arrow_1 {
  bottom: 50px;
  left: 30px;
}
.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;
  }
}
.text_green {
  color: #00fff4;
  font-family: SourceHanSansCN, SourceHanSansCN-Bold;
  font-weight: 700;
}
.bg_full {
  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 {
    height: calc(100% - 5.5vw - 2vw);
  }
  .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;
}

.grid-content {
  // border-radius: 4px;
  // min-height: 36px;
  background-color: rgba(1, 35, 55, 0.71);
}
.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: 185px;
  // height: 58px;
  width: 10vw;
  // height: 100%;
  line-height: 100%;
  > div {
    cursor: pointer;
    // line-height: 58px;
    border: 1px solid #00e0db;
    border-radius: 8px;
    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: 1.2vw;
      line-height: 2.5vw;
      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>
