<script setup lang="ts">
import * as echarts from 'echarts'
import NumbBlock from './components/numb.vue'
import { getTrueSize, initFontSize } from './utils'
import chart1Option from './store/chart1'
import chart2Option from './store/chart2'
import TopBanner from '~/assets/img/dsj/top-banner.webp'
import FooterBanner from '~/assets/img/dsj/footer-banner.webp'
import block1 from '~/assets/img/dsj/block1.webp'
import sign from '~/assets/img/dsj/sign.webp'
import { user } from '@/store'
const router = useRouter()
// import title1 from '~/assets/img/dsj/title.webp'
const columns = [
  {
    key: 'xm',
    title: '姓名',
    width: 8,
  },
  {
    key: 'bycs',
    title: '表扬次数（次)',
    width: 8,
  },
  {
    key: 'jbs',
    title: '金币数（个）',
    width: 8,
  },
  {
    key: 'kttl',
    title: '课堂讨论（次）',
    width: 8,
  },
  {
    key: 'khzywcl',
    title: '课后作业完成率',
    width: 8,
  },
  {
    key: 'zydjpf',
    title: '作业等级评分',
    width: 8,
  },
  {
    key: 'zydf',
    title: '作业得分（平均分）',
    width: 10,
  },
  {
    key: 'dlcs',
    title: '登录次数（次)',
    width: 8,
  }]

const chart1Dom = $shallowRef<HTMLElement>()
let chart1Instance = $shallowRef<echarts.ECharts>()

type TCheckValue = 'class' | 'student'
let activeCheckbtn = $ref<TCheckValue>('class')

function handleClickCheckbtn(val: TCheckValue) {
  activeCheckbtn = val
  if (val === 'class')
    chart1Instance?.setOption(chart1Option)

  else if (val === 'student')
    chart1Instance?.setOption(chart2Option)
}

initFontSize()

window.addEventListener('resize', async () => {
  initFontSize()
  chart1Instance?.resize()
})

const queryForm_data = reactive({
  date: undefined,
  area_id: '',
  school_id: '',
  class_id: '',
})
const baseURL = window.GLOBAL_CONFIG.myxjyszptx
let areaList = $ref([])
let schoolList = $ref([])
let classList = $ref([])
function initArea() {
  request({
    baseURL,
    url: '/area/main/index',
    data: {
      upid: '2615',
      limit: 9999,
      page: 1,
    },
  }).then((res) => {
    if (res.code == '1')
      areaList = res.data.page_data
  })
}
initArea()
function selectArea(val) {
  queryForm_data.school_id = ''
  queryForm_data.class_id = ''
  schoolList = []
  classList = []
  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
    })
  }
  else {
    schoolList = []
  }
}
function selectSchool(val) {
  queryForm_data.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
    })
  }
  else {
    classList = []
  }
}
if (user.value.user_role_id * 1 < 72) {
  queryForm_data.area_id = ''
}
else {
  queryForm_data.area_id = user.value.area_info.area_id3
  queryForm_data.school_id = user.value.sm_info.sm_id
}
const avatarSize = computed(() => getTrueSize(84))
let date_range = $ref('')
let pData = $ref({})
async function initData() {
  pData = (await request({
    baseURL,
    url: '/openapi/chart/student_data.php',
    data: {
      date_range,
      class_id: queryForm_data.class_id,
    },
  })).data.student_data
}
await initData()
chart1Option.xAxis.data = pData.block3.class.xAxis
chart1Option.series[0].data = pData.block3.class.data
chart2Option.yAxis.data = pData.block3.student.yAxis
chart2Option.series[0].data = pData.block3.student.data

let student_page = $ref(0)
const student_total = Math.ceil(pData.block4.length / 10)
const data_xszyfx = $computed(() => pData.block4.slice(student_page * 10, student_page * 10 + 10))
function handleClickSwitch(key: 'prev' | 'next') {
  switch (key) {
    case 'prev':
      student_page = (student_page + student_total - 1) % student_total
      break
    case 'next':
      student_page = (student_page + 1) % student_total
      break
  }
}
onMounted(() => {
  if (!chart1Dom)
    return
  chart1Instance = echarts.init(chart1Dom, undefined, {
    renderer: 'canvas',
    useDirtyRect: false,
    devicePixelRatio: 1.0 / getTrueSize(1),
  })
  chart1Instance.setOption(chart1Option)
})
function changeDate() {
  if (queryForm_data.date && queryForm_data.date.length > 0)
    date_range = `${queryForm_data.date[0]}~${queryForm_data.date[1]}`
  else
    date_range = ''

  initData()
}
function handleClickStudent(uid: string) {
  router.push({ name: 'BJSJDA_STUDENT', params: { uid } })
}
function clearFilter(type) {
  switch (type) {
    case 1:
      queryForm_data.area_id = ''
      queryForm_data.school_id = ''
      queryForm_data.class_id = ''
      schoolList = []
      classList = []
      return
    case 2:
      queryForm_data.school_id = ''
      queryForm_data.class_id = ''
      classList = []
  }
}
</script>

<template>
  <div class="bg_grid w-full h-screen flex flex-col text-white auto_size">
    <header class="w-full relative flex-none">
      <img :src="TopBanner" alt="" class="w-full">
      <div class="absolute h-auto inset-0 z-10  flex ">
        <div class="w-37rem flex space-x-6 px-1.4rem py-0.95rem darks">
          <div class="flex-none">
            <el-date-picker
              v-model="queryForm_data.date" class="w-54" value-format="YYYY-MM-DD" :teleported="false" type="daterange" range-separator="~" start-placeholder="开始日期"
              end-placeholder="结束日期" @change="changeDate"
            />
          </div>
          <div class="flex-none w-34">
            <el-select
              v-model="queryForm_data.area_id"
              clearable
              class="w-full"
              popper-class="el_date_picker_class"
              placeholder="选择区域"
              @change="selectArea"
              @clear="clearFilter(1)"
            >
              <el-option
                v-for="a in areaList"
                :key="a.id"
                :value="a.id"
                :label="a.name"
              />
            </el-select>
          </div>
          <div class="flex-none w-34">
            <el-select
              v-model="queryForm_data.school_id"
              popper-class="el_date_picker_class"
              class="w-full"
              placeholder="选择学校"
              clearable
              @change="selectSchool"
              @clear="clearFilter(2)"
            >
              <el-option
                v-for="s in schoolList"
                :key="s.id"
                :value="s.schoolid"
                :label="s.schoolname"
              />
            </el-select>
          </div>
          <div class="flex-none w-34">
            <el-select
              v-model="queryForm_data.class_id"
              popper-class="el_date_picker_class"
              class="w-full"
              placeholder="选择班级"
              clearable
              @change="initData"
              @clear="clearFilter(3)"
            >
              <el-option
                v-for="s in classList"
                :key="s.classid"
                :value="s.classid"
                :label="s.name"
              />
            </el-select>
          </div>
        </div>
        <div class="text-2.125rem tracking-0.25rem flex_center w-46rem">
          班级学生情报数据
        </div>
      </div>
    </header>
    <div class="flex flex-auto justify-evenly py-6 overflow-y-auto">
      <div class="w-70rem flex flex-col space-y-4 h-full">
        <div class="relative inset-0">
          <img :src="block1" alt="" class="w-full">
          <div class="absolute inset-0 flex">
            <div class="w-1/2 flex justify-center items-center">
              <div class="flex_center">
                <img class="w-68 h-68" :src="sign" alt="">
              </div>
              <div class="w-48">
                <div class="text-xl text-hex-32C5FF text-center">
                  {{ pData.school }}
                </div>
                <div class="text-lg text-center mt-9">
                  {{ pData.class }}
                </div>
              </div>
            </div>
            <div class="w-1/2 flex flex-col justify-center pl-8">
              <div class="title1">
                多媒体问答次数（次）
              </div>
              <NumbBlock :len="7" :n="pData.block1.dmtwdcs" />

              <div class="title1 mt-5">
                学生作业时间（h）
              </div>
              <NumbBlock :len="7" :n="pData.block1.xszysj" />
            </div>
          </div>
        </div>

        <div class="flex-auto flex_center bg-hex-01233760 py-4 px-4">
          <div class="my_table">
            <div class="thead">
              <div v-for="({ title, key, width }) in columns" :key="key" :style="`width:${width}rem`">
                {{ title }}
              </div>
            </div>

            <div class="tbody">
              <div v-for="item in pData.block2" :key="item.id" class="trow">
                <div v-for="({ key, width }) in columns" :key="key" class="tcell" :style="`width:${width}rem`">
                  {{ item[key] }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-40rem flex flex-col space-y-4 h-full">
        <div class="flex flex-col items-center justify-evenly h-28rem  bg-hex-01233760 py-4 px-4">
          <div class="title0">
            预习数据统计图
            <div />
          </div>
          <div class="flex flex-auto">
            <div class="flex-none w-25rem flex_center">
              <div ref="chart1Dom" class="flex-none w-25rem h-20rem" />
            </div>

            <div class="flex_center flex-col space-y-4">
              <div
                class="check_btn" :class="{ is_active: activeCheckbtn === 'class' }" value="class"
                @click="handleClickCheckbtn('class')"
              >
                班级数据
              </div>
              <div
                class="check_btn" :class="{ is_active: activeCheckbtn === 'student' }" value="student"
                @click="handleClickCheckbtn('student')"
              >
                学生数据
              </div>
            </div>
          </div>
        </div>

        <div class="flex flex-col items-center justify-evenly h-27rem  bg-hex-01233760 py-4 px-4">
          <div class="title0">
            学生作业分析
            <div />
          </div>
          <div class="flex flex-auto w-full">
            <div class="flex_center">
              <i:ic:sharp-arrow-left
                class="text-hex-0cd3dc cursor-pointer text-4xl"
                @click="handleClickSwitch('prev')"
              />
            </div>
            <div class="flex-auto flex-wrap flex">
              <div v-for="item in data_xszyfx" :key="item.id" class="w-1/5 h-1/2 flex_center flex-col">
                <div class="flex_center flex-col cursor-pointer" @click="handleClickStudent(item.id)">
                  <el-avatar :size="avatarSize" :src="item.avatar" />
                  <div class="name mt-5">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>

            <div class="flex_center">
              <i:ic:sharp-arrow-right
                class="text-hex-0cd3dc cursor-pointer text-4xl"
                @click="handleClickSwitch('next')"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="w-full relative flex-none">
      <img :src="FooterBanner" alt="" class="w-full">
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.bg_grid {
  background-color: #000;
  background-image: url('~/assets/img/dsj/bg-grid.webp');
  background-repeat: repeat;
}

.title0 {

  background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  &::before,
  &::after {
    content: '-';
    color: transparent;
    background-image: url('~/assets/img/dsj/wings.webp');
    background-repeat: no-repeat;
    background-size: 11.25rem;
    position: absolute;
    width: 2rem;
    height: 3.0rem;
  }

  &::before {
    left: -2.6rem;
    background-position: 0 -0.5rem;
  }

  &::after {
    right: -2.6rem;
    background-position: -9.25rem -0.5rem;
  }

  div {
    background: #6ff;
    width: 4.2rem;
    height: 2px;
    border-radius: 1px;
    margin-top: 2px;
  }
}

.title1 {
  background-image: url('~/assets/img/dsj/title.webp');
  background-repeat: no-repeat;
  background-size: contain;
  height: 2.5rem;
  line-height: 2.5rem;
  padding-left: 7rem;
  font-size: 1.123rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.my_table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .thead {
    padding: 0 0.25rem;

    flex: none;
    width: 100%;
    height: 3.25rem;
    background: rgba(102, 255, 255, 0.20);
    color: #66FFFF;
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .tbody {
    padding: 0 0.25rem;

    flex: auto;
    color: #fff;
    height: 0;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 0.2rem;
      // height: 10rem;
      background-color: transparent;
      cursor: pointer;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      background: #0cd3dc;
      border-radius: 0.2rem;
    }

    .trow {
      display: flex;
      justify-content: start;
      align-items: center;
      height: 4.875rem;

      &:nth-of-type(2n) {
        background: rgba(102, 255, 255, 0.10);
      }

      &:nth-of-type(2n+1) {
        background: rgba(0, 0, 0, 0.10);
      }
    }

  }
}

.check_btn {
  width: 12rem;
  height: 2.8rem;
  line-height: 2.8rem;
  border: 0.06rem solid #00e0db;
  border-radius: 0.5rem;

  cursor: pointer;

  background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  &.is_active {
    box-shadow: 0rem 0.06rem 2.44rem 0rem rgba(0, 255, 244, 0.50) inset;
  }
}

.name {

  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  line-height: 1.4rem;
  letter-spacing: 0.13rem;
}

.darks {
  --el-bg-color-overlay: #0e3d4e;
  --el-fill-color-blank: #0e3d4e;
  --el-text-color-primary: #E5EAF3;
  --el-text-color-regular: #CFD3DC;
  --el-text-color-secondary: #A3A6AD;
  --el-text-color-placeholder: #8D9095;
  --el-text-color-disabled: #6C6E72;

  :deep(.el-date-editor) {
    --el-date-editor-daterange-width: 14.5rem;

    .el-range-separator {
      padding: 0 0;
    }
  }

  :deep(.el-date-range-picker) {
    --el-datepicker-inrange-bg-color: #053241;
    --el-datepicker-inrange-hover-bg-color: #053241;

  }

  :deep(.el-cascader-panel) {
    --el-cascader-node-background-hover: #053241;
  }

}

.auto_size {
  --el-component-size-large: 3rem;
  --el-component-size: 2.5rem;
  --el-component-size-small: 2rem;

  // :deep(.el-date-table) {
  //   font-size: .75rem;
  // }
}
</style>
