<template>
  <div class="app-container view_report">
    <el-card class="box-card">
      <el-row class="user" :gutter="12">
        <el-col :span="4" class="header_box">
          <span class="header">
            <img
              :src="
                getUserHeadImage(
                  studentInfo.personalImageNum === 1 ? 'boy' : 'girl'
                )
              "
              alt=""
            />
          </span>
          <span>{{ studentInfo.stuName }}</span>
        </el-col>
        <el-col :span="4"> 学号：{{ studentInfo.stuNo || "-" }}</el-col>
        <el-col :span="4">班级：{{ studentInfo.className || "-" }} </el-col>
        <el-col :span="4">学科：{{ studentInfo.subject || "-" }} </el-col>
        <el-col :span="4">所属小组：{{ studentInfo.groupName || "-" }}</el-col>
        <el-col :span="4"> 总经验值：{{ studentInfo.exp || "-" }}</el-col>
      </el-row>
    </el-card>
    <!-- 日期筛选 -->
    <div class="filter_time">
      <div>{{ studentInfo.period }}</div>
      <div>
        <SwitchState
          v-model="recentDate"
          :radioData="radioTime"
          @handleAction="handleFilterTime"
        />
      </div>
    </div>
    <div class="student_level">
      <h3>学生所处位置（按经验值）</h3>
      <div class="table">
        <div class="table_col" v-for="(i, idx) in studentLocation" :key="idx">
          <div class="table_col_cell">{{ i.title }}</div>
          <div class="table_col_cell">
            <template v-if="studentInfo.hasLogin">
              {{ i.rank }}
              <span class="level">
                <img :src="getLevelImage(i.rankFlag)" alt="" />
              </span>
            </template>
            <template v-else>
              <div>—</div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <h3>做题学习统计</h3>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card statistics_card">
          <CategoryChart :chartData="learnNumCount" />
        </el-card>
      </el-col>
      <el-col :span="12" class="exactRate_card">
        <el-card class="box-card statistics_card">
          <div class="exactRate_data">
            准确率{{ studentExactRate[0]?.value }}%
          </div>
          <div v-if="studentInfo.hasLogin" class="level">
            <img :src="getLevelImage(studentExactRate[0]?.flag)" alt="" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3>学习时长统计</h3>
        <el-card class="box-card statistics_card">
          <BasicBarChart :chartData="learnTimeCount" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <h3>成就勋章</h3>
        <el-card class="box-card statistics_card medal_card">
          <div class="medal_list">
            <div class="medal_item" v-for="item in studentMedal" :key="item.id">
              <span class="medal_pic"
                ><img
                  :src="
                    item.checkFlag === 1
                      ? getMedalImage(item.type)
                      : getGrayMedalImage(item.type)
                  "
                  alt=""
              /></span>
              <span class="name">{{ item.name }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="ViewPersonageReport">
import SwitchState from "@/views/smartCampus/components/Echarts/SwitchState.vue";
import BasicBarChart from "@/views/smartCampus/components/Echarts/BasicBarChart.vue";
import CategoryChart from "@/views/smartCampus/components/Echarts/CategoryChart.vue";
import {
  getPersonReportDetailsApi,
  getUserMedalApi,
} from "@/api/smartCampus/index";
import {
  getUserHeadImage,
  getLevelImage,
  getMedalImage,
  getGrayMedalImage,
} from "@/hooks/getImage";
import { formatDate } from "@/hooks/formatTime";
import { ElLoading } from "element-plus";
const route = useRoute();
const loading = ref(); //加载
const studentId = ref(); //学生id
const radioTime = ref([
  { text: "近7天", label: "7" },
  { text: "近30天", label: "30" },
]);
const recentDate = ref("7"); // 时间过滤
const studentInfo = ref({}); //学生报告信息
const studentLocation = ref([]); //学生所处位置
const studentExactRate = ref([]); //做题准确率
const studentMedal = ref([]); //成就勋章 1:百词入门，2：千词达人，3：拼写能手，4：拼写之星
const learnTimeCount = ref({
  title: "",
  xAxisData: [],
  xAxisName: "日期",
  yAxisName: "小时",
  seriesData: [],
  axisLabel: function (value) {
    return formatDate(value);
  },
}); //学习时长统计
const learnNumCount = ref({
  xAxisName: "日期",
  yAxisName: "单词数",
  xAxisData: [],
  legendData: ["熟悉单词数", "拼写单词数"],
  seriesData: [[], []],
  axisLabel: function (value) {
    return formatDate(value);
  },
}); //做题学习统计
function handleFilterTime() {
  getStudentDetail(studentId.value);
}
// 获取学生详细信息
function getStudentDetail(stuId) {
  learnTimeCount.value.xAxisData = [];
  learnTimeCount.value.seriesData = [];
  learnNumCount.value.xAxisData = [];
  learnNumCount.value.seriesData = [[], []];
  loading.value = ElLoading.service({
    text: "正在加载数据，请稍候",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getPersonReportDetailsApi(stuId, {
    recentDate: recentDate.value,
    subject: "英语",
  })
    .then((res) => {
      if (res.code === 200) {
        loading.value.close();
        studentInfo.value = res.data;
        studentLocation.value = res.data.stuLocationVos;
        studentExactRate.value = res.data.stuValueCollectVos.filter(
          (item) => item.title === "做题准确率"
        );

        let _stuTimeCollectVos =
          res.data.stuTimeCollectVos.length > 0
            ? res.data.stuTimeCollectVos
            : [];
        let learnTimeArrary = _stuTimeCollectVos.filter(
          (item) => item.title === "学习时长"
        );
        let learnTime = learnTimeArrary[0].stuTimeCollectListVos;

        let familiarWordsArrary = _stuTimeCollectVos.filter(
          (item) => item.title === "熟悉单词数"
        );
        let familiarWords = familiarWordsArrary[0].stuTimeCollectListVos;
        let spelledWordsArrary = _stuTimeCollectVos.filter(
          (item) => item.title === "拼写单词数"
        );
        let spelledWords = spelledWordsArrary[0].stuTimeCollectListVos;
        for (let i in learnTime) {
          console.log("learnTime.length", learnTime);
          learnTimeCount.value.xAxisData.push(learnTime[i].startDay);
          learnTimeCount.value.seriesData.push(learnTime[i].value);
          // 做题时间
          learnNumCount.value.xAxisData.push(learnTime[i].startDay);
        }
        for (let i in familiarWords) {
          learnNumCount.value.seriesData[0].push(familiarWords[i].value);
        }
        for (let i in spelledWords) {
          learnNumCount.value.seriesData[1].push(spelledWords[i].value);
        }
      }
    })
    .catch((err) => {
      console.log(err);
      loading.value.close();
    });
  getUserMedalApi(stuId).then((res) => {
    if (res.code === 200) {
      studentMedal.value = res.data;
    }
  });
}
(() => {
  studentId.value = route.params && route.params.stuId;
  if (studentId.value) {
    getStudentDetail(studentId.value);
  }
})();
</script>

<style lang="scss" scoped>
.view_report {
  .user {
    display: flex;
    align-items: center;
    .el-col {
      white-space: nowrap;
    }
    .header_box {
      display: flex;
      align-items: center;
      .header {
        display: inline-block;
        margin-right: 16px;
        width: 48px;
        height: 48px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .filter_time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
  }
  .student_level {
    .table {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #6e6e6e;
      .table_col {
        flex: 1;
        text-align: center;
        &:last-child {
          .table_col_cell {
            border-right: none;
          }
        }
        &_cell {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 40px;
          line-height: 40px;
          border-right: 1px solid #6e6e6e;
          border-bottom: 1px solid #6e6e6e;
          &:last-child {
            border-bottom: none;
          }

          .level {
            display: inline-block;
            margin-left: 4px;
            width: 24px;
            height: 24px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .statistics_card {
    height: 350px;
  }
  .exactRate_card {
    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .exactRate_data {
      width: 200px;
      height: 200px;
      border: 4px solid #f38f20;
      border-radius: 50%;
      line-height: 200px;
      text-align: center;
    }
    .level {
      margin-left: 20px;
      width: 24px;
      height: 24px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .medal_card {
    :deep(.el-card__body) {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      .empty {
        width: 100%;
        text-align: center;
        .name {
          font-size: 18px;
          margin-top: 6px;
        }
      }
      .medal_list {
        display: flex;
        width: 100%;
        padding: 24px 0;
        background-color: #fffef3;
        .medal_item {
          margin: 0 24px;
          text-align: center;

          span {
            display: block;
          }
          .name {
            font-weight: 500;
            font-size: 18px;
            margin-top: 6px;
          }
        }
      }
    }
  }
}
</style>
