<script setup lang="ts">
import dayjs from 'dayjs'
import { rateType } from '@/hooks'
import { colorConfig } from './hooks'
import EchartsPie from './EchartsPie.vue'
import EchartsBar from './EchartsBar.vue'
import { dialog } from '@/components/mj/mj-dialog'

const props = withDefaults(
  defineProps<{
    params: anyObj
    jobAnalyse: anyObj
  }>(),
  {
    jobAnalyse: () => ({}),
    pageLoading: false,
  },
)

const difficultyBaseColorMap: Record<string, string> = {
  容易: '#8FCC00',
  较易: '#48A3FE',
  一般: '#FFD04D',
  普通: '#FFD04D',
  中等: '#FFD04D',
  较难: '#FF8200',
  困难: '#FF5151',
}
const difficultyFallbackColors = ['#00B8D9', '#9B51E0', '#FF6B6B', '#26A69A', '#F7B731']

const difficultyColorMap = computed(() => {
  const colorMap: Record<string, string> = {}
  let fallbackIndex = 0
  ;(props.jobAnalyse.paperDifficultyAnalyzeList || []).forEach((item: anyObj) => {
    const name = item?.difficultyName || ''
    if (!name || colorMap[name]) return
    colorMap[name] =
      difficultyBaseColorMap[name] ||
      difficultyFallbackColors[fallbackIndex++ % difficultyFallbackColors.length]
  })
  return colorMap
})

const getDifficultyColor = (name: string) =>
  difficultyColorMap.value[name] || difficultyBaseColorMap[name] || difficultyFallbackColors[0]

const report = computed(() => props.jobAnalyse.jobReportVo)
const analyze = computed(() =>
  props.jobAnalyse.paperChanelAnalyzeList.map((i: anyObj) => {
    return {
      value: i.titleCount,
      name: i.chanelTypeName,
    }
  }),
)
const difficultyPie = computed(() =>
  props.jobAnalyse.paperDifficultyAnalyzeList.map((i: anyObj) => {
    return {
      value: i.titleCount,
      name: i.difficultyName,
      itemStyle: {
        color: getDifficultyColor(i.difficultyName),
      },
    }
  }),
)

const difficultyBar = computed(() => {
  const xData: string[] = []
  const seriesVal: anyObj[] = []
  props.jobAnalyse.paperDifficultyAnalyzeList.forEach((i: anyObj) => {
    xData.push(`${i?.difficultyName}\n(${i?.score}分)`)
    seriesVal.push({
      value: i.score,
      itemStyle: {
        color: getDifficultyColor(i.difficultyName),
      },
    })
  })
  return {
    xData,
    seriesVal,
  }
})

const costTimeText = computed(() => {
  const ms = Number(report.value?.costTime || 0)
  const total = Math.floor(ms / 1000)
  const h = Math.floor(total / 3600)
  const m = Math.floor((total % 3600) / 60)
  const s = total % 60
  return `${String(h).padStart(2, '0')}时${String(m).padStart(2, '0')}分${String(s).padStart(2, '0')}秒`
})

function showWorkPoints() {
  dialog.show({
    title: '作业内容',
    content: report.value?.jobContent,
    hideCancel: true,
    hideClose: true,
  })
}
</script>
<template>
  <div class="analyse">
    <div v-if="jobAnalyse.jobReportVo" class="analyse-main">
      <div class="analyse-info analyse-item">
        <div class="analyse-item-title">作业信息</div>
        <div class="analyse-info-main">
          <p>
            <span>作业名称：</span>
            <span class="job-title">{{ report?.jobName }}</span>
            <Icon name="report_detail" class="pointer" width="42" @click="showWorkPoints"></Icon>
          </p>
          <p>
            <span>发布日期：</span>
            {{ dayjs(report?.beginTime).format('YYYY/MM/DD HH:mm') }}
          </p>
          <p>
            <span>截止日期：</span>
            {{ dayjs(report?.submitEndTime).format('YYYY/MM/DD HH:mm') }}
          </p>
          <p>
            <span>总&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分：</span>
            {{ report?.totalScore }}分
          </p>
          <p>
            <span>作答时长：</span>
            {{ costTimeText }}
          </p>
        </div>
      </div>
      <div class="analyse-structure analyse-item">
        <div class="analyse-item-title">试卷结构</div>
        <div class="echarts-pie">
          <div class="echarts-pie-item">
            <EchartsPie :data="analyze" title="题型分布"></EchartsPie>
          </div>
          <div class="echarts-pie-item">
            <EchartsPie :data="difficultyPie" title="难度分布"></EchartsPie>
          </div>
        </div>
        <div class="echarts-bar">
          <EchartsBar :data="difficultyBar" title="试卷难易度显示"></EchartsBar>
        </div>
      </div>
      <div class="analyse-rank analyse-item">
        <el-table
          v-if="jobAnalyse.stuRankVoList?.length"
          :data="jobAnalyse.stuRankVoList"
          :row-class-name="({ row }) => (row.selfFlag ? 'self' : '')"
        >
          <el-table-column label="序号" align="center" minWidth="30%">
            <template #default="{ row }">
              {{ row.rankNum ? row.rankNum : '' }}
            </template>
          </el-table-column>
          <el-table-column prop="stuName" label="姓名" align="center" minWidth="30%" />
          <el-table-column label="得分" align="center" minWidth="40%">
            <template #default="{ row }">
              <span
                :style="{
                  color: colorConfig[rateType((Number(row.scoreRate) || 0) * 100)],
                }"
                >{{ row.markScore }}</span
              >/{{ row.scoreRate }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <Empty v-else class="empty" :type="pageLoading ? 'loading' : 'network'"></Empty> -->
  </div>
</template>
<style scoped lang="scss">
.analyse {
  width: 100%;
  height: 100%;
  line-height: 1.5;
  &-main {
    display: grid;
    grid-template-areas:
      'a b'
      'c b';
    grid-template-columns: 563px 895px;
    grid-template-rows: 36vh 1fr;
    gap: 24px;
    height: 100%;
  }
  &-item {
    border-radius: 3.33vh;
    border: 0.67vh solid #fff;
    background: linear-gradient(179deg, #fff 0.69%, #dfebf7 99.53%);
    box-shadow: 0 0.33vh 0.67vh 0 rgba(0, 0, 0, 0.25);

    &-title {
      color: $font-color;
      font-family: $font-special;
      font-size: 3.33vh;
      text-align: center;
      margin-bottom: 2vh;
    }
  }
  &-info {
    grid-area: a;
    padding: 1.33vh;
    &-main {
      color: $font-color;
      font-family: OPPOSans;
      font-size: 2.33vh;
      p {
        display: flex;
        align-items: center;
        margin-bottom: 1.67vh;
        line-height: 3.5vh;
        .job-title {
          width: calc(100% - 185px);
          @include single_ellipsis;
        }
      }
    }
  }
  &-structure {
    grid-area: b;
    padding: 1.33vh 44px;
    .echarts-pie {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 32vh;
      margin-bottom: 2vh;
      &-item {
        height: 100%;
        width: 50%;
      }
    }
    .echarts-bar {
      height: 34vh;
    }
  }
  &-rank {
    grid-area: c;
    overflow-y: hidden;
    :deep(.el-table) {
      // border-radius: 3.33vh;
      height: 100%;
      background: transparent;
      .cell {
        line-height: 1.5;
        color: $font-color;
        font-size: 2.33vh;
        padding: 0 4px;
      }
      th.el-table__cell {
        background: #ccdeff;
        font-family: $font-special;
        padding: 1.5vh 0;
      }
      .el-table__cell {
        &::after {
          position: absolute;
          left: 0;
          bottom: 0;
          content: '';
          display: block;
          width: 100%;
          height: 0.17vh;
          background: repeating-linear-gradient(
            to right,
            #deedfc,
            #deedfc 8px,
            transparent 8px,
            transparent 16px /* 线条间隔 */
          );
        }
      }
      tr {
        background: transparent;
        td {
          font-family: OPPOSans;
          padding: 1.5vh 0;
        }
      }
      .el-table__row.self {
        background: #fff7e0;
      }
    }
  }
}
</style>
