<template>
  <div class="teachers">
    <div class="flex">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">班级平均成绩走势图</div>
        </template>
        <div class="el-card-body">
          <div id="trend"></div>
          <div class="trend-title">班级成绩统计分析</div>
        </div>
      </el-card>
      <el-card shadow="never">
        <template #header>
          <div class="card-header">班级成绩统计分析</div>
        </template>
        <div class="el-card-body">
          <div class="serch">
            <el-form :inline="true">
              <el-form-item label="日期：">
                <el-date-picker v-model="classParams.time" style="width: 185.6px" type="datetime" placeholder="请选择" format="YYYY/MM/DD HH:mm:ss" />
              </el-form-item>
              <el-form-item label="班级：">
                <el-select placeholder="全部" v-model="classParams.classId" style="width: 185.6px">
                  <el-option v-for="item in userStore.classList" :key="item" :label="item.class_name" :value="item.class_id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button  type="warning" @click="getClassGradeStatistics">查看成绩</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div id="statistics"></div>
          <div class="maxpoints">
            <div class="maxpoints-item" v-for="item in circularData2" :key="item.name">
              <!-- <img style="width: 55px; height: 55px" :src="getAssetsFile(`images/${item.name}.png`)" alt="" /> -->
              <div class="ri">
                <span style="color: #333333; font-weight: bold; font-size: 16px; letter-spacing: 4px">{{ item.name }}:</span>
                <span style="font-family: Source Han Sans CN; font-weight: bold; font-size: 20px; color: #ff6400">{{ item.value ?? 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import * as teacherApi from "@/api/teacher.js";
const { proxy } = getCurrentInstance();
import { getAssetsFile } from "@/utils/index.js";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const classTime = ref([]);
const className = ref([]);
const classList = ref([]);
const classParams = ref({
  classId: "",
  time: "",
});
const initstatus = ref(false);
const circularData = ref([
  { value: 0, name: "一般", key: "generalCount" },
  { value: 0, name: "优秀", key: "excellentCount" },
  { value: 0, name: "良好", key: "goodCount" },
  { value: 0, name: "不及格", key: "failCount" },
]);
const circularData2 = ref([
  { score: 0, name: "最高分", key: "maxScore" },
  { score: 0, name: "最低分", key: "minScore" },
  { score: 0, name: "平均分", key: "averageScore" },
]);
// 获取成绩走势图数据
const getTrendData = async () => {
  var myinde = echarts.init(document.getElementById("trend"));
  myinde.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: className.value,
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "1%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: classTime.value,
    },
    yAxis: {
      type: "value",
      //显示0~100
      min: 0,
      max: 100,
    },
    series: classList.value,
  });
  // 自适应
  window.addEventListener("resize", () => {
    myinde.resize();
  });
};
// 成绩统计分析
const getStatisticsData = async () => {
  var myChart = echarts.init(document.getElementById("statistics"));
  myChart.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      left: "right",
      top: "center",
      data: ["一般", "优秀", "良好", "不及格"],
    },
    series: [
      {
        type: "pie",
        radius: "70%",
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        data: circularData.value,
        // 修改颜色
        color: ["#f7b844", "#51bcb5", "#5d92f7", "#ca5038"],
      },
    ],
  });
  // 自适应
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
// 获取班级成绩走势函数功能函数
const getClassGradeTrend = () => {
  teacherApi.getAverageScoreTrend().then((res) => {
    const trends = Array.isArray(res) ? res : [];
    classTime.value = trends[0]?.startTime || [];
    className.value = trends.map((item) => item.className);
    classList.value = trends.map((item) => {
      return {
        name: item.className,
        type: "line",
        stack: "Total",
        data: item.classAverageScore,
      };
    });
    getTrendData();
  });
};
// 获取班级成绩统计分析函数功能函数
const getClassGradeStatistics = () => {
  if (!classParams.value.time) {
    classParams.value.time = new Date().toString();
  } else {
    classParams.value.time = classParams.value.time.toString();
  }
  if (initstatus.value && !classParams.value.classId) {
    proxy.$modal.msgWarning("请选择班级");
  }
  teacherApi.getScoreStatisticsTrend(classParams.value).then((res) => {
    circularData.value.forEach((item, index) => {
      item.value = res[item.key];
      if (res.hasOwnProperty(item.key)) {
        item.value = res[item.key];
      }
    });
    circularData2.value.forEach((item, index) => {
      item.value = res[item.key];
      if (res.hasOwnProperty(item.key)) {
        item.value = res[item.key];
      }
    });
    getStatisticsData();
  });
};
// 获取班级
const getClassList = () => {
  teacherApi.getOwnedTeachingClasses().then((res) => {
    userStore.classList = (res.data || []).map((item) => ({
      class_name: item.className,
      class_id: item.schoolClassId,
    }));
  });
};
onMounted(() => {
  getClassGradeTrend();
  getClassGradeStatistics()
  getClassList()
  initstatus.value = true;
});
</script>
<style lang='scss'  scoped>
.teachers {
  .flex {
    display: flex;
    flex-wrap: wrap;
    // gap: 15px;
    :deep(.el-card) {
      padding: 0px 15px;
      height: calc(100vh - 80px);
      border: none;
      #trend {
        height: 500px;
      }
      #statistics {
        height: 360px;
      }
      .maxpoints {
        display: flex;
        justify-content: center;
        gap: 60px;
        margin-top: 70px;
        .maxpoints-item {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0;
          width: 181px;
          height: 50px;
          background: #fff8e5;
          border-radius: 10px;
          border: 1px solid #ffb900;
          .ri {
            display: flex;
            align-items: center;
            gap: 15px;
          }
        }
      }
      .trend-title {
        margin-top: 28px;
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #999999;
      }
      .serch {
      }
      .el-card__header {
        padding: 13px 15px 13px 21px !important;
        border-bottom: 2px dashed #e5e5e5;
      }
      .card-header {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        position: relative;
        margin-left: 17px;
        letter-spacing: 4px; /* 设置文字间隔为2像素 */
        &::before {
          content: "";
          position: absolute;
          left: -40px;
          top: 25%;
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url(@/assets/images/分析.png) no-repeat;
          background-size: 100% 100%;

          // border-radius: 4px;
          // margin-right: 20px;
        }
      }
    }
    .el-card:nth-child(1) {
      width: calc(100% - 47% - 15px);
      border-right: 2px dashed #e5e5e5;
    }
    .el-card:nth-child(2) {
      width: calc(100% - 53%);
      .card-header {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        margin-left: 17px;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: -40px;
          top: 25%;
          display: inline-block;
          width: 16px;
          height: 16px;
          // background: url(@/assets/images/统计.png) no-repeat;
          // background-size: 100% 100%;
        }
      }
    }
  }
}
.btnOne {
  // background: url("@/assets/images/tea查看.png") no-repeat;
  // background-size: 100% 100%;
  border: none;
  min-width: 118px;
  padding-left: 30px;
  height: 40px;
}
:deep(.el-form) {
  .el-form-item:nth-child(2) {
    margin-right: 15px !important;
  }
  .el-form-item:nth-child(3) {
    margin-right: 0px !important;
  }
}
</style>
