<script setup lang="ts">
import * as echarts from 'echarts'
import dayjs from '@/plugins/dayjs'
import Card from '@/page/subject/components/Card.vue'
import { $font_color } from '@/styles/variate'

const props = defineProps<{
  data: {
    level?: number
    stability?: number
    jobScoringAbilityDataVoList?: {
      level: number
      scoreRate: number
      submitDate: string
    }[]
  }
  table?: anyObj[]
  tableLoading: boolean
  type: number
}>()

const emit = defineEmits(['update:type'])
/*
level 级别：0-优秀 1-良 2-中 3-弱
stability 稳定性 0-稳定 1-相对波动
jobScoringAbilityDataVoList {
    level 级别：0-优秀 1-良 2-中 3-弱
    scoreRate  得分率
    submitDate 日期
}
*/
const levelConfig: anyObj = {
  0: { label: '优秀' },
  1: { label: '良好' },
  2: { label: '合格' },
  3: { label: '薄弱' },
}

const stabilityConfig: anyObj = {
  0: { label: '稳定' },
  1: { label: '相对波动' },
}

const configColor = {
  success: '#2F8A5B',
  primary: '#2D39BC',
  warning: '#A13C00',
  error: '#B22731',
}
// 正确率的颜色
function getColor(rate: number) {
  return rate === 100 ? 'success' : rate >= 80 ? 'primary' : rate >= 60 ? 'warning' : 'error'
}

// 最近得分情况 0-零分 1-失分 2-满分
const recentScoreType = [
  { label: '零分', color: $font_color },
  { label: '失分', color: '#B22731' },
  { label: '满分', color: '#2F8A5B' },
]
const lossFrequency = computed(() => {
  return (item: anyObj) => {
    if (item) {
      const { lostPointsNum, jobNum } = item
      if (lostPointsNum / jobNum >= 1) {
        return '每次'
      } else if (lostPointsNum / jobNum >= 0.5) {
        return '高频'
      } else if (lostPointsNum / jobNum < 0.5) {
        return '低频'
      }
    }
  }
})

//  type  类型 0-薄弱 1-合格 2-良好 3-优秀
const typeConfig = [
  {
    label: '薄弱',
    value: 0,
  },
  {
    label: '合格',
    value: 1,
  },
  {
    label: '良好',
    value: 2,
  },
  {
    label: '优秀',
    value: 3,
  },
]

const widthRate = window.screen.width / 1920

const echartRef = ref<HTMLDivElement | null>(null)

let myChart = reactive<anyObj>({})

const option = reactive<anyObj>({
  legend: {
    show: true,
    data: ['我的得分能力'],
    textStyle: {
      color: '#666',
      fontSize: widthRate * 24,
      fontFamily: 'OPPOSans',
      padding: [0, 8],
    },
  },
  xAxis: {
    data: [],
    boundaryGap: false,
    axisLabel: {
      show: true,
      textStyle: {
        fontSize: widthRate * 22, // 修改字体大小
        color: $font_color,
      },
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#31BCFF',
        width: widthRate * 4,
      },
    },
    axisTick: {
      alignWithLabel: true,
    },
    splitLine: {
      show: true,
      interval: 0,
      lineStyle: {
        type: 'solid',
        color: '#C3ECFF',
        width: widthRate * 4,
      },
    },
  },
  yAxis: {
    type: 'value',

    minInterval: 1,
    nameLocation: 'end',
    nameTextStyle: {
      color: $font_color,
      fontSize: widthRate * 22,
    },
    axisLabel: {
      show: true,
      textStyle: {
        fontSize: widthRate * 22, // 修改字体大小
        color: $font_color,
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#C3ECFF',
        width: widthRate * 4,
      },
    },
    splitLine: {
      lineStyle: {
        type: 'solid',
        color: '#C3ECFF',
        width: widthRate * 4,
      },
    },
  },
  series: [
    {
      data: [],
      name: '我的得分能力',
      type: 'line',
      lineStyle: {
        color: '#00AEFF',
        width: widthRate * 4,
      },
      symbol: 'circle',
      symbolSize: widthRate * 12,
      itemStyle: {
        color: '#fff',
        borderColor: '#00AEFF',
        borderWidth: widthRate * 4,
      },
      markLine: {
        symbol: ['none', 'triangle'],
        data: [
          {
            yAxis: 85,
            lineStyle: {
              type: [10, 15],
              color: '#F3B0B4',
              width: widthRate * 5,
            },
            label: {
              formatter: '优秀',
              color: '#F3B0B4',
              fontSize: widthRate * 30,
              padding: [0, widthRate * 16],
            },
          },
          {
            yAxis: 70,
            lineStyle: {
              type: [10, 15],
              color: '#F3B0B4',
              width: widthRate * 5,
            },
            label: {
              formatter: '良好',
              color: '#F3B0B4',
              fontSize: widthRate * 30,
              padding: [0, widthRate * 16],
            },
          },
          {
            yAxis: 60,
            lineStyle: {
              type: [10, 15],
              color: '#F3B0B4',
              width: widthRate * 5,
            },
            label: {
              formatter: '合格',
              color: '#F3B0B4',
              fontSize: widthRate * 30,
              padding: [0, widthRate * 16],
            },
          },
        ],
      },
      animation: false,
    },
  ],
})
function drawGraph() {
  if (myChart) {
    myChart.dispose?.() // 清除上一次已经画过得图，这样才能实时才到最新数据的图
    myChart = echarts.init(echartRef.value)
  }
  option.xAxis.data =
    props.data.jobScoringAbilityDataVoList?.map(i => dayjs(i.submitDate).format('MM/DD')) || []
  option.series[0].data = props.data.jobScoringAbilityDataVoList?.map(i => i.scoreRate / 100) || []
  myChart.setOption(option)
  myChart.resize()
}

watch(
  () => props.data,
  () => {
    nextTick(() => {
      drawGraph()
    })
  },
  { immediate: true },
)
</script>
<template>
  <div class="single-analysis hidden_scroll">
    <div class="score-ability">
      <div class="title" data-content="得分能力">得分能力</div>
      <template v-if="data.jobScoringAbilityDataVoList?.length">
        <div ref="echartRef" class="chartContainer"></div>
        <div>
          <div class="cards">
            <Card
              width="404"
              height="160"
              title="得分能力综合评估"
              :text="levelConfig[data.level || 0].label"
            ></Card>
            <Card
              type="warning"
              width="404"
              height="160"
              title="得分能力稳定性"
              :text="stabilityConfig[data.stability || 0].label"
            ></Card>
          </div>
          <p class="tips">
            注：得分能力是通过均分、得分率等数据综合计算得出，反映学生对该科目知识掌握程度和答题能力
          </p>
        </div>
      </template>
      <Empty v-else type="learn" style="height: 600px"></Empty>
    </div>

    <div class="knowledge-table">
      <div class="title" data-content="知识点分析">知识点分析</div>
      <div style="text-align: center">
        <SelectTab
          :modelValue="type"
          :dataList="typeConfig"
          @update:modelValue="emit('update:type', $event)"
        ></SelectTab>
      </div>
      <el-table v-if="table?.length" :data="table">
        <el-table-column label="知识点名称" prop="knowledgeName" align="center" minWidth="42.8%">
        </el-table-column>
        <el-table-column
          label="失分频率"
          prop="lostFrequency"
          sortable
          align="center"
          minWidth="22%"
        >
          <template #default="{ row }">
            {{ lossFrequency(row) }} ({{ row.lostPointsNum }}/{{ row.jobNum }})
          </template>
        </el-table-column>
        <el-table-column label="得分率" prop="scoreRate" sortable align="center" minWidth="17.6%">
          <template #default="{ row }">
            <span :style="{ color: configColor[getColor(row.scoreRate / 100)] }">
              {{ row.scoreRate / 100 }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column label="最近情况" prop="recentScoreType" align="center" minWidth="17.6%">
          <template #default="{ row }">
            <span :style="{ color: recentScoreType[row.recentScoreType].color }">
              {{ recentScoreType[row.recentScoreType].label }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <Empty v-else :type="tableLoading ? 'loading' : 'learn'" style="height: 600px"></Empty>
    </div>
  </div>
</template>
<style scoped lang="scss">
.single-analysis {
  line-height: 1.5;
  height: calc(100%);
  .title {
    color: #fff;
    font-family: $font-special;
    font-size: 3vh;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    @include font-stroke($font-color, 4px);
  }
  .score-ability {
    .chartContainer {
      width: 100%;
      margin-top: 4vh;
      height: 60.83vh;
    }
    .cards {
      display: flex;
      justify-content: center;
      .xxl-card {
        margin: 0 16px;
      }
    }
    .tips {
      width: 1208px;
      height: 9.67vh;
      border-radius: 1.67vh;
      background: #fff;
      box-shadow: 0 0.33vh 0.17vh 0 rgba(0, 0, 0, 0.15);
      color: #ff8d3b;
      font-family: OPPOSans;
      font-size: 2.67vh;
      padding: 1vh 32px 0;
      margin: 5vh auto 6vh;
    }
  }
  .knowledge-table {
    min-height: calc(100% + 210px);
    :deep(.select-list) {
      display: inline-flex;
      margin: 4vh auto;
      .data-item {
        width: 298px;
        &.active {
          background: linear-gradient(269deg, #86e6ff 2.25%, #9effda 51.93%, #5fdcfd 99.65%);
        }
      }
    }
    :deep(.el-table) {
      box-sizing: border-box;
      border: 0.33vh #31bcff solid;
      border-radius: 3.33vh;
      background: transparent;

      .cell {
        line-height: 1.5;
        color: $font-color;
        font-size: 2.33vh;
        padding: 0 4px;
        // @include single_ellipsis;
      }
      th.el-table__cell {
        background: #c2ebff;
        font-family: $font-special;
        padding: 1.5vh 0;
      }
      .el-table__cell {
        height: 7.5vh;
        color: $font-color;
        font-family: OPPOSans;
        font-size: 2.33vh;
        position: relative;
        border: none;
        background-color: #fff;
        .cell {
          line-height: 1.5;
        }
        &::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 /* 线条间隔 */
          );
        }
        &::before {
          position: absolute;
          right: 0;
          top: 0;
          content: '';
          display: block;
          width: 2px;
          height: 100%;
          background: repeating-linear-gradient(
            to bottom,
            #deedfc,
            #deedfc 8px,
            transparent 8px,
            transparent 16px /* 线条间隔 */
          );
        }
        &:last-child {
          &::before {
            display: none;
          }
        }
      }
      tr {
        background: transparent;
        td {
          font-family: OPPOSans;
          padding: 1.5vh 0;
        }
      }
    }
  }
}
</style>
