<template>
  <view class="grades-page flex flex-col">
    <!-- 数据加载遮罩 -->
    <view v-if="pageLoading" class="page-loading-mask">
      <view class="page-loading-box">
        <view class="page-loading-spinner"></view>
        <text class="page-loading-text">加载中...</text>
      </view>
    </view>
    <!-- 顶部蓝色背景（与教师端一致） -->
    <view class="blue-header">
      <view class="header-content">
        <text class="exam-title">{{ kscc.ksmc || '考试场次' }}</text>
        <view class="student-info-section">
          <text class="student-name">{{ curXs.xm || curXs.name || '学生姓名' }}</text>
          <text class="student-class" v-if="curXs.njmc || curXs.bjmc">
            {{ [curXs.njmc, curXs.bjmc].filter(Boolean).join(' ') }}
          </text>
        </view>
        <view class="score-info-section">
          <view class="score-left">
            <text class="total-score">共{{ ksccKmList.length }}科</text>
            <text class="full-score">满分{{ totalKmFs }}分</text>
          </view>
          <text class="grade">{{ curKsdj.dj || '-' }}</text>
        </view>
      </view>
    </view>

    <!-- 白色内容区 -->
    <view style="background-color: #f6f6f6;">
      <view class="content-area">
        <!-- 选项卡（去掉分数趋势） -->
        <view class="tabs">
          <view
            v-if="ksccKmList && ksccKmList.length > 2"
            class="tab-item"
            :class="{ active: activeTab === 'diagnosis' }"
            @click="switchTab('diagnosis')"
          >
            <text>学科诊断</text>
          </view>
          <view
            class="tab-item"
            :class="{ active: activeTab === 'scores' }"
            @click="switchTab('scores')"
          >
            <text>学科成绩</text>
          </view>
        </view>

        <!-- 学科成绩视图（与教师端布局一致，分数按 sfXsFs 显示） -->
        <view class="score-view" v-if="activeTab === 'scores'">
          <view v-if="ksccKscjList.length > 0" class="score-content">
            <view
              class="subject-item"
              v-for="(kscj, index) in ksccKscjList"
              :key="index"
            >
              <view class="subject-header">
                <text class="subject-name">{{ kscj.km?.kmmc || kscj.kmmc || '未知科目' }}</text>
                <text class="detail-btn" :style="{ color: kscj.djclr || '#909399' }" v-if="kscj.dj">{{ kscj.djBx }}</text>
              </view>
              <view class="subject-body">
                <text class="subject-grade" :style="{ color: kscj.djclr || '#303133' }">{{ kscj.dj || '-' }}</text>
                <view class="grade-info-wrapper">
                  <text v-if="kscc.sfXsFs && kscj.ksfs" class="subject-score">{{ kscj.ksfs }}</text>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="empty-scores">
            <text>暂无成绩数据</text>
          </view>
          <!-- 班主任寄语（家长端只读展示） -->
          <view class="comment-section">
            <view class="comment-header">
              <text class="comment-title">班主任寄语</text>
            </view>
            <view class="comment-text-wrap">
              <text class="comment-text">{{ pjBzr || '暂无寄语' }}</text>
            </view>
          </view>
        </view>

        <!-- 学科诊断视图 -->
        <view class="diagnosis-view flex-1 po-re" v-if="activeTab === 'diagnosis'">
          <view class="po-ab inset-0 p-15" style="overflow: auto">
            <view class="radar-placeholder" id="chart-container">
              <canvas
                style="width: 100%; height: 100%"
                canvas-id="radarCanvas"
                id="radarCanvas"
                class="charts"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue";
import uCharts from "@/components/charts/u-charts.js";
import dayjs from "dayjs";
import { xsKscjApi, ksccPjFindByKsccAndXsApi } from "@/api/base/server";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";
const { getCurXs } = useUserStore();
const { getData } = useDataStore();
dayjs.locale("zh-cn");

const kmTabsRef = ref<any>(null)

const fsScale = 100;

const curXs = ref<any>({})
const kscc = ref<any>({})

const kscjList = ref<any>([])
const curKsdj = ref<any>({})

// 当前选中的选项卡
const activeTab = ref("scores");
// 页面数据加载中（显示遮罩）
const pageLoading = ref<boolean>(false);
// 班主任寄语（家长端只读）
const pjBzr = ref<string>("");

// 切换选项卡
const switchTab = (tab: string) => {
  activeTab.value = tab;
}

type ColorMapType = {
  [key: string]: string;
};
// 等级颜色与教师端一致
const colorMap: ColorMapType = {
  "A": "#4bb604",  // 优秀 - 绿色
  "B": "#FF8C00",  // 良好 - 橙色
  "C": "#FFD700",  // 中等 - 黄色
  "D": "#FF0000",  // 及格 - 红色
  "E": "#666666",  // 不及格 - 灰色
};

// 雷达图数据
const radarData = {
  categories: ["语文", "数学", "英语", "科学", "音乐", "美术", "体育"],
  series: [{ name: "分数", data: [85, 90, 88, 92, 86, 91, 89] }],
};

// 所有科目列表
const sysKmList = ref<any>([]);
// 当前考试科目列表
const ksccKmList = ref<any>([]);
// 科目卷面分总数
const totalKmFs = ref<number>(0);

// 科目等级列表
const kmDjList = ref<any>([]);
// 考试场次等级列表
const djList = ref<any>([]);
// 考试场次成绩列表
const ksccKscjList = ref<any>([]);

// 绘制雷达图
const drawRadarChart = () => {
  nextTick(() => {
    try {
      // 获取容器信息
      const query = uni.createSelectorQuery();
      query
        .select("#chart-container")
        .boundingClientRect((data) => {
          if (!data) {
            console.error("未找到雷达图容器");
            return;
          }

          // 安全类型判断
          const rect = data as any;
          const canvasWidth = rect.width || 300;
          const canvasHeight = rect.height || 300;

          const ctx = uni.createCanvasContext("radarCanvas");

          // 绘制雷达图配置
          const options = {
            type: "radar",
            context: ctx,
            width: canvasWidth,
            height: canvasHeight,
            categories: radarData.categories,
            series: radarData.series,
            animation: true,
            background: "#FFFFFF",
            padding: [10, 10, 10, 10],
            dataLabel: false,
            legend: {
              show: false,
            },
            extra: {
              radar: {
                gridType: "radar",
                gridColor: "#CCCCCC",
                gridCount: 3,
                opacity: 0.2,
                labelShow: true,
              },
            },
          };

          new uCharts(options);
        })
        .exec();
    } catch (error) {
      console.error("绘制雷达图出错:", error);
    }
  });
};

// 监听选项卡变化，重新渲染对应图表
watch(activeTab, (newValue) => {
  if (newValue === "diagnosis") {
    setTimeout(drawRadarChart, 50);
  }
});

// Float乘以倍数，然后四舍五入转int
const floatToInt = (floatNum: number, scale: number) => {
  return Math.round(floatNum * scale);
}

let singleFlag = false;

// 初始化考试等级列表
const initKsdj = () => {
  let maxDj = 0.0;
  let maxKmDj = 0.0; 
  djList.value.forEach((ksdj: any) => {
    ksdj.zdf = floatToInt(ksdj.zdf, fsScale); // 等级最低分
    ksdj.zgf = floatToInt(ksdj.zgf, fsScale); // 等级最高分
    ksdj.djclr = colorMap[ksdj.dj] || ''; // 等级颜色
    maxDj = Math.max(maxDj, ksdj.zgf);
  });
  kmDjList.value.forEach((kmdj: any) => {
    kmdj.zdf = floatToInt(kmdj.zdf, fsScale); // 等级最低分
    kmdj.zgf = floatToInt(kmdj.zgf, fsScale); // 等级最高分
    kmdj.djclr = colorMap[kmdj.dj] || ''; // 等级颜色
    maxKmDj = Math.max(maxKmDj, kmdj.zgf);
  });
  singleFlag = maxDj < maxKmDj + 100;
};

const rebuildData = () => { 
  let ksfsList: any[] = [];
  let totalFs = 0.00;
  ksccKscjList.value = ksccKscjList.value.map((cj: any) => { 
    ksfsList.push(cj.ksfs);
    totalFs += cj.ksfs;
    let fs = floatToInt(cj.ksfs, fsScale);
    cj.djclr = colorMap[cj.dj] || '';
    // 查询考试等级
    cj.km = ksccKmList.value.find((item: any) => item.kmId === cj.kmId) || {};
    return cj;
  });
  // 雷达图数据
  radarData.categories = ksccKmList.value.map((item: any) => { 
    totalKmFs.value += item.kmfs;
    return item.kmmc; 
  });
  radarData.series = [{ name: "分数", data: ksfsList }];
  // 当前成绩列表
  totalFs = floatToInt(totalFs, fsScale);
  if (singleFlag) {
    totalFs = totalFs / ksccKmList.value.length;
  }
  curKsdj.value = djList.value.find((item: any) => item.zdf <= totalFs && item.zgf >= totalFs) || {};
}

onMounted(async () => {
  pageLoading.value = true;
  try {
    curXs.value = getCurXs;
    kscc.value = getData;
    const res = await xsKscjApi({
      xsId: getCurXs.id,
      ksccId: getData.id,
      njmcId: getData.njmcId
    });
    if (res.resultCode == 1) {
      sysKmList.value = res.result.kmList || [];
      ksccKmList.value = res.result.ksccKmList || [];
      kmDjList.value = res.result.kmDjList || [];
      djList.value = res.result.djList || [];
      ksccKscjList.value = res.result.ksccKscjList || [];
      initKsdj();
      rebuildData();
    }
    // 加载班主任寄语
    try {
      const pjRes = await ksccPjFindByKsccAndXsApi({
        ksccId: getData.id,
        xsId: getCurXs.id,
      });
      if (pjRes && pjRes.resultCode === 1 && pjRes.result && pjRes.result.pjBzr) {
        pjBzr.value = pjRes.result.pjBzr;
      }
    } catch (_) {}
    setTimeout(() => {
      if (activeTab.value === "diagnosis") {
        drawRadarChart();
      }
    }, 300);
  } finally {
    pageLoading.value = false;
  }
});
</script>

<style lang="scss" scoped>
.grades-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;
}

/* 数据加载遮罩 */
.page-loading-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
}
.page-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e8e8e8;
  border-top-color: #2672ff;
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}
.page-loading-text {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}
@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 顶部蓝色背景（与教师端一致） */
.blue-header {
  background-color: #2672ff;
  padding: 15px 15px 20px 15px;
  position: relative;
  color: white;
  box-sizing: border-box;

  .back-icon {
    position: absolute;
    top: 15px;
    left: 15px;
  }

  .more-icon {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .header-content {
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .exam-title {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 10px;
      opacity: 0.95;
    }

    .student-info-section {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      width: 100%;
      gap: 8px;

      .student-name {
        font-size: 22px;
        font-weight: 600;
        text-align: center;
      }

      .student-class {
        font-size: 15px;
        text-align: center;
        opacity: 0.9;
        padding: 4px 12px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
      }
    }

    .score-info-section {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 20px;
      gap: 30px;

      .score-left {
        display: flex;
        flex-direction: column;
        align-items: center;

        .total-score {
          font-size: 14px;
          margin-bottom: 5px;
          opacity: 0.9;
        }

        .full-score {
          font-size: 14px;
          opacity: 0.9;
        }
      }

      .grade {
        font-size: 48px;
        font-weight: bold;
        line-height: 1;
      }
    }
  }
}

/* 内容区域（与教师端一致） */
.content-area {
  background-color: white;
  padding: 20px 20px 40px 20px;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  min-height: calc(100vh - 200px);

  /* 选项卡 */
  .tabs {
    display: flex;
    border-bottom: 1px solid #ebeef5;

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 15px 0;
      position: relative;
      color: #606266;
      font-size: 15px;

      &.active {
        color: #1976d2;
        font-weight: 500;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 25%;
          width: 50%;
          height: 2px;
          background-color: #1976d2;
        }
      }
    }
  }

  /* 学科成绩视图（与教师端一致） */
  .score-view {
    margin-top: 15px;
    display: flex;
    flex-direction: column;

    .score-content {
      padding: 0;
      flex: 1;
    }

    .subject-item {
      padding: 15px 0;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .subject-header {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .subject-name {
          font-size: 15px;
          color: #606266;
          font-weight: 500;
        }

        .detail-btn {
          font-size: 15px;
          font-weight: 500;
          color: #909399;
        }
      }

      .subject-body {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .subject-grade {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }

        .grade-info-wrapper {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: center;

          .subject-score {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            line-height: 1;
          }
        }
      }
    }

    .empty-scores {
      padding: 50px 15px;
      text-align: center;
      color: #999;
      font-size: 14px;
    }

    /* 班主任寄语（家长端只读） */
    .comment-section {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #ebeef5;
      background-color: #fff;

      .comment-header {
        margin-bottom: 10px;
      }

      .comment-title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }

      .comment-text-wrap {
        padding: 12px 0;
      }

      .comment-text {
        font-size: 14px;
        color: #606266;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
      }
    }
  }

  .radar-placeholder {
    height: 300px;
    background-color: #f8f8f8;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    .placeholder-text {
      color: #909399;
      font-size: 16px;
    }
  }

  /* 学科诊断视图 */
  .diagnosis-view {
    padding: 15px;

    .diagnosis-comment {
      padding: 15px;
      border-radius: 8px;
      background-color: #f8f8f8;

      .comment-title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 10px;
        display: block;
      }

      .comment-text {
        font-size: 14px;
        color: #606266;
        line-height: 1.6;
        margin-bottom: 10px;
        display: block;
      }
    }
  }
}

/* 学生选择器弹窗样式 */
.student-selector {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-bottom: 30px;
  
  .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f2f5;
    
    .selector-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      line-height: 1;
    }
    
    .close-btn {
      width: 32px;
      height: 32px;
      background-color: #f5f7fa;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      flex-shrink: 0;
      
      &:active {
        transform: scale(0.9);
        background-color: #e6e8eb;
      }
    }
  }
  
  .student-list {
    padding: 0 20px;
    max-height: 50%;
    overflow-y: auto;
    
    .student-item {
      display: flex;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f5f7fa;
      transition: all 0.3s ease;
      border-radius: 12px;
      margin-bottom: 8px;
      
      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }
      
      &-active {
        background: linear-gradient(135deg, rgba(74, 144, 226, 0.08) 0%, rgba(53, 122, 189, 0.05) 100%);
        padding: 16px 12px;
      }
      
      .student-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
        border: 2px solid #ffffff;
        
        .avatar-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .student-info {
        flex: 1;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        
        .student-name {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 4px;
          line-height: 1.2;
        }
        
        .student-class {
          font-size: 13px;
          color: #606266;
          font-weight: 400;
          line-height: 1;
        }
      }
      
      .check-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
        flex-shrink: 0;
      }
    }
  }
}

</style>
