<script setup lang="ts">
import * as echarts from 'echarts'
import { getTrueSize, initFontSize } from './utils'
import radar1Option from './store/radar1'
import line1Option from './store/line1'
import TopBanner from '~/assets/img/dsj/top-banner.webp'
import FooterBanner from '~/assets/img/dsj/footer-banner.webp'

const props = defineProps<{ uid: string }>()
const chart1Dom = $shallowRef<HTMLElement>()
let chart1Instance = $shallowRef<echarts.ECharts>()

const chart2Dom = $shallowRef<HTMLElement>()
let chart2Instance = $shallowRef<echarts.ECharts>()

const EchartsInitOpts = {
  // renderer: 'canvas',
  useDirtyRect: false,
  devicePixelRatio: 1.0 / getTrueSize(1),
}

initFontSize()

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

const columns = [
  {
    key: 'row-title',
    title: '',
  },
  {
    key: 'zs',
    title: '总数',
  },
  {
    key: 'zq',
    title: '正确',
  },
  {
    key: 'cw',
    title: '错误',
  },
  {
    key: 'bfd',
    title: '部分对',
  },
  {
    key: 'wpy',
    title: '未批阅',
  },
  {
    key: 'zql',
    title: '正确率',

  },
]
const pData = (await request({
  url: '/openapi/chart/task_data.php',
  data: {
    id: props.uid,
  },
})).data.task_data
radar1Option.radar.indicator = pData.block3.radarData.indicator
radar1Option.series[0].data[0].value = pData.block3.radarData.data
line1Option.xAxis.data = pData.block5.xAxis
line1Option.series[0].data = pData.block5.data

onMounted(() => {
  chart1Dom && ((chart1Instance = echarts.init(chart1Dom, undefined, EchartsInitOpts)).setOption(radar1Option))

  chart2Dom && ((chart2Instance = echarts.init(chart2Dom, undefined, EchartsInitOpts)).setOption(line1Option))
})
</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 justify-center">
        <div class="text-2.125rem tracking-0.25rem flex_center w-46rem">
          {{ pData.title }}
        </div>
      </div>
    </header>
    <div class="flex flex-col flex-auto justify-center overflow-y-auto space-y-4">
      <div class="h-86 flex-auto flex justify-evenly flex-none">
        <div class="w-182 h-full py-9 px-7 bg-hex-01233760  flex flex-col justify-around ">
          <div class="grid grid-cols-3 gap-5">
            <div class="flex flex-col justify-between items-center">
              <el-avatar :size="getTrueSize(6.5 * 16)" :src="pData.avatar" />
              <div class="name mt-4">
                {{ pData.name }}
              </div>
            </div>

            <div class="border border-dashed space-y-2 w-52 h-28 flex flex-col items-center justify-center">
              <div class="val text-hex-6ff text-3xl">
                {{ pData.block1.wcl }}
              </div>
              <div class="key text-base">
                完成率
              </div>
            </div>
            <div class="border border-dashed space-y-2 w-52 h-28 flex flex-col items-center justify-center">
              <div class="val text-hex-6ff text-3xl">
                {{ pData.block1.hs }}
              </div>
              <div class="key text-base">
                耗时
              </div>
            </div>
          </div>
          <div class="grid grid-cols-3 gap-5">
            <div class="border border-dashed space-y-2 w-52 h-28 flex flex-col items-center justify-center">
              <div class="val text-hex-6ff text-3xl">
                {{ pData.block1.hspm }}
              </div>
              <div class="key text-base">
                耗时排名
              </div>
            </div>
            <div class="border border-dashed space-y-2 w-52 h-28 flex flex-col items-center justify-center">
              <div class="val text-hex-6ff text-3xl">
                {{ pData.block1.ztzl }}
              </div>
              <div class="key text-base">
                做题总量
              </div>
            </div>
            <div class="border border-dashed space-y-2 w-52 h-28 flex flex-col items-center justify-center">
              <div class="val text-hex-6ff text-3xl">
                {{ pData.block1.dfl }}
              </div>
              <div class="key text-base">
                得分率
              </div>
            </div>
          </div>
        </div>
        <div class="w-278 h-full bg-hex-01233760 flex flex-col items-center justify-around py-9 px-6">
          <div class="title0">
            答题详情
            <div />
          </div>
          <div class="w-full flex flex-col text-hex-6ff">
            <div class="grid h-3.25rem grid-cols-7">
              <div
                v-for="({ title, key }) in columns" :key="key" class="flex_center"
                :class="key === 'row-title' ? 'bg-hex-02020240' : 'bg-hex-66ffff20'"
              >
                {{ title }}
              </div>
            </div>

            <div class="flex flex-col">
              <div
                v-for="item in pData.block2" :key="item['row-title']"
                class="grid h-4.875rem grid-cols-7 odd:bg-hex-02020240 even:bg-hex-66ffff10"
              >
                <div
                  v-for="({ key }) in columns" :key="key" class="flex_center"
                  :class="key === 'row-title' ? 'bg-hex-66ffff20' : 'text-hex-fff'"
                >
                  {{ item[key] }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="h-120 flex justify-evenly flex-none">
        <div class="w-163 h-full bg-hex-01233760 flex flex-col items-center justify-between py-5 px-6">
          <div class="title0">
            得分能力网
            <div />
          </div>
          <div class="flex h-26rem w-full justify-around">
            <div class="flex flex-col justify-around">
              <div class="border border-dashed space-y-2 w-52 h-28 flex flex-col items-center justify-center">
                <div class="val text-hex-6ff text-3xl">
                  {{ pData.block3.dfbjpm }}
                </div>
                <div class="key text-base">
                  得分班级排名
                </div>
              </div>
              <div class="border border-dashed space-y-2 w-52 h-28 flex flex-col items-center justify-center">
                <div class="val text-hex-6ff text-3xl">
                  {{ pData.block3.dfnjpm }}
                </div>
                <div class="key text-base">
                  得分年级排名
                </div>
              </div>
            </div>
            <div>
              <div ref="chart1Dom" class="flex-none w-22.5rem h-26rem" />
            </div>
          </div>
        </div>
        <div class="w-123 h-full bg-hex-01233760 flex flex-col items-center justify-between py-5 px-6">
          <div class="title0">
            作业获取类型详情
            <div />
          </div>
          <div class="w-full">
            <div class="py-1">
              <div class="flex items-center justify-between h-4.875rem px-8 odd:bg-hex-66ffff10 even:bg-hex-00000010">
                <div>获得0/2次优秀作业</div>
                <div>优秀率 {{ pData.block4.yxl }}</div>
              </div>
              <div class="flex items-center justify-between h-4.875rem px-8 odd:bg-hex-66ffff10 even:bg-hex-00000010">
                <div>获得1/2次良好作业</div>
                <div>良好率 {{ pData.block4.lhl }}</div>
              </div>
              <div class="flex items-center justify-between h-4.875rem px-8 odd:bg-hex-66ffff10 even:bg-hex-00000010">
                <div>获得0/2次中等作业</div>
                <div>中等率 {{ pData.block4.zdl }}</div>
              </div>
              <div class="flex items-center justify-between h-4.875rem px-8 odd:bg-hex-66ffff10 even:bg-hex-00000010">
                <div>获得1/2次合格作业</div>
                <div>合格率 {{ pData.block4.hgl }}</div>
              </div>
              <div class="flex items-center justify-between h-4.875rem px-8 odd:bg-hex-66ffff10 even:bg-hex-00000010">
                <div>获得0/2次不及格作业</div>
                <div>不及格率 {{ pData.block4.bjgl }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-166 h-full bg-hex-01233760 flex flex-col items-center justify-between py-5 px-6">
          <div class="title0">
            近期作业得分曲线图
            <div />
          </div>
          <div ref="chart2Dom" class="flex-none w-140 h-26rem" />
        </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;

  // line-height: 2.25rem;
  &::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;
}

.name {

  font-size: 1.13rem;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  line-height: 1.4rem;
  letter-spacing: 0.13rem;
}
</style>
