<template>
  <div class="app-container view_report">
    <el-card class="box-card">
      <el-row
        class="user"
        :gutter="12"
        v-for="item in groupMember"
        :key="item.userId"
      >
        <el-col :span="6" class="header_box">
          <span class="header"
            ><img
              :src="
                getUserHeadImage(item.personalImageNum === 1 ? 'boy' : 'girl')
              "
              alt=""
          /></span>
          <span>{{ item.stuName }}</span>
        </el-col>
        <el-col :span="5"> 学号：{{ item.stuNo }}1</el-col>
        <el-col :span="4">班级：{{ item.className }} </el-col>
        <el-col :span="4">学科：{{ item.subject }} </el-col>
        <el-col :span="4"> 总经验值：{{ item.exp }}</el-col>
      </el-row>
    </el-card>
    <!-- 日期筛选 -->
    <div class="filter_time">
      <div>2023.12.16-2023.12.22</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 groupLocation" :key="idx">
          <div class="table_col_cell">{{ i.title }}</div>
          <div class="table_col_cell">
            <template v-if="hasMemberLogin">
              {{ allMemberZero ? "" : i.rank }}
              <span class="level">
                <img :src="getLevelImage(i.rankFlag)" alt="" />
              </span>
            </template>
            <template v-else>
              <div>-</div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3>做题学习统计</h3>
        <el-card class="box-card">
          <CategoryChart :chartData="learnNumCount" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <h3>学习时长统计</h3>
        <el-card class="box-card">
          <BasicBarChart :chartData="learnTimeCount" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3>小组成员排名（按经验值）</h3>
        <el-card class="box-card">
          <div class="table_2">
            <el-row class="table_header">
              <el-col :span="6" class="table_col"> 姓名 </el-col>
              <el-col :span="6" class="table_col"> 小组内排名 </el-col>
              <el-col :span="6" class="table_col"> 班级个人排名 </el-col>
              <el-col :span="6" class="table_col"> 年级个人排名 </el-col>
            </el-row>
            <el-row
              class="table_header"
              v-for="item in groupRankList"
              :key="item.userId"
            >
              <el-col :span="6" class="table_col"> {{ item.stuName }} </el-col>
              <el-col :span="6" class="table_col">
                {{ item.groupRankNum }}
              </el-col>
              <el-col :span="6" class="table_col">
                {{ item.hasLogin ? item.classRankNum : "-" }}
                <span class="level" v-if="item.hasLogin">
                  <img :src="getLevelImage(item.classRankFlag)" alt="" />
                </span>
              </el-col>
              <el-col :span="6" class="table_col">
                {{ item.hasLogin ? item.gradeRankNum : "-" }}
                <span class="level" v-if="item.hasLogin">
                  <img :src="getLevelImage(item.gradeRankFlag)" alt="" />
                </span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <h3>学习详情统计</h3>
        <el-card class="box-card">
          <div class="table_3">
            <div class="table_col">
              <div class="table_col_cell">姓名</div>
              <div
                class="table_col_cell"
                v-for="(i, idx) in groupLearnCase.studentName"
                :key="idx"
              >
                {{ i.stuName }}
              </div>
            </div>
            <div
              v-for="(i, index) in groupLearnCase.caseList"
              :key="index"
              class="table_col"
            >
              <div class="table_col_cell">{{ i.title }}</div>
              <div
                v-for="(o, idx2) in i.groupValueCollectListVos"
                :key="idx2"
                class="table_col_cell"
              >
                <!-- 学生有登录 -->
                <template v-if="o.hasLogin">
                  <template v-if="i.title === '学习时长'">
                    {{ formatSecond(o.value) }}
                  </template>
                  <template v-if="i.title === '准确率'">
                    {{ o.value }}{{ o.value ? "%" : "" }}
                  </template>
                  <template
                    v-if="i.title !== '学习时长' && i.title !== '准确率'"
                  >
                    {{ o.value }}
                  </template>
                  <span class="level">
                    <img :src="getLevelImage(o.flag)" alt="" />
                  </span>
                </template>
                <!-- 学生没有登录 -->
                <template v-else>
                  <span>-</span>
                </template>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="viewGroupReport">
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 { formatSecond } from "@/hooks/formatTime";
import {
  getGroupReportDetailsApi,
  getGroupStuInfoApi,
} from "@/api/smartCampus/index";
import {
  getUserHeadImage,
  getLevelImage,
  getMedalImage,
} from "@/hooks/getImage";
import { ElLoading } from "element-plus";
const route = useRoute();
const loading = ref(); //加载
const radioTime = ref([
  { text: "近7天", label: "7" },
  { text: "近30天", label: "30" },
]);
const recentDate = ref("7"); // 时间过滤
const allMemberZero = ref(false); //成员经验值都为0
const hasMemberLogin = ref(false); //小组中有成员登录
const groupId = ref(); //小组id
const groupLocation = ref([]); //小组所处位置
const groupMember = ref([]); //小组成员
const groupRankList = ref([]); //小组排行
const groupLearnCase = ref({ studentName: [], caseList: [] }); //小组学习情况
const groupInfo = ref({}); //小组信息
const learnTimeCount = ref({
  title: "平均学习时长统计",
  xAxisData: [],
  xAxisName: "日期",
  yAxisName: "小时",
  seriesData: [],
}); //学习时长统计
const learnNumCount = ref({
  xAxisName: "日期",
  yAxisName: "单词数",
  xAxisData: [],
  legendData: ["熟悉单词数", "拼写单词数"],
  seriesData: [[], []],
}); //做题学习统计
function handleFilterTime() {
  fecthGroupReport();
}

// 小组成员
function fecthGroupMember() {
  getGroupStuInfoApi({
    groupId: groupId.value,
    recentDate: recentDate.value,
    subject: "英语",
  }).then((res) => {
    if (res.code === 200) {
      groupMember.value = res.data;
      hasMemberLogin.value = groupMember.value.some(
        (obj) => obj.hasLogin === true
      );
    }
  });
}
//获取小组报告
function fecthGroupReport() {
  learnTimeCount.value.xAxisData = [];
  learnTimeCount.value.seriesData = [];
  learnNumCount.value.xAxisData = [];
  learnNumCount.value.seriesData = [[], []];
  loading.value = ElLoading.service({
    text: "正在加载数据，请稍候",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getGroupReportDetailsApi({
    groupId: groupId.value,
    recentDate: recentDate.value,
    subject: "英语",
  })
    .then((res) => {
      if (res.code === 200) {
        loading.value.close();
        groupInfo.value = res.data;
        //小组所处位置
        groupLocation.value = res.data.groupLocationVos;
        // 学习详情
        groupLearnCase.value.caseList = res.data.groupValueCollectVos || [];
        groupLearnCase.value.studentName =
          res.data.groupValueCollectVos.length > 0
            ? res.data.groupValueCollectVos[0].groupValueCollectListVos
            : [];
        // 小组排名
        groupRankList.value =
          res.data.groupMemberRankVos[0].groupMemberRankListVos;
        // 学习统计
        let _groupTimeCollectVos =
          res.data.groupTimeCollectVos.length > 0
            ? res.data.groupTimeCollectVos
            : [];

        let learnTimeArrary = _groupTimeCollectVos.filter(
          (item) => item.title === "学习时长"
        );
        let learnTime = learnTimeArrary[0].groupTimeCollectListVos;

        let familiarWordsArrary = _groupTimeCollectVos.filter(
          (item) => item.title === "熟悉单词数"
        );
        let familiarWords = familiarWordsArrary[0].groupTimeCollectListVos;
        let spelledWordsArrary = _groupTimeCollectVos.filter(
          (item) => item.title === "拼写单词数"
        );
        let spelledWords = spelledWordsArrary[0].groupTimeCollectListVos;
        for (let i = learnTime.length - 1; i >= 0; i--) {
          learnTimeCount.value.xAxisData.push(learnTime[i].startDay);
          learnTimeCount.value.seriesData.push(learnTime[i].value);
          // 做题时间
          learnNumCount.value.xAxisData.push(learnTime[i].startDay);
        }
        for (let i = familiarWords.length - 1; i >= 0; i--) {
          learnNumCount.value.seriesData[0].push(familiarWords[i].value);
        }
        for (let i = spelledWords.length - 1; i >= 0; i--) {
          learnNumCount.value.seriesData[1].push(spelledWords[i].value);
        }
      }
    })
    .catch((err) => {
      console.log(err);
      loading.value.close();
    });
}
(() => {
  groupId.value = route.params && route.params.groupId;
  if (groupId.value) {
    fecthGroupMember();
    fecthGroupReport();
  }
})();
</script>

<style lang="scss" scoped>
.view_report {
  .user {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .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;
  }
  .table {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6e6e6e;
    background-color: #fff;
    .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%;
          }
        }
      }
    }
  }
  .table_3 {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6e6e6e;
    background-color: #fff;
    .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-bottom: 1px solid #6e6e6e;
        border-right: 1px solid #6e6e6e;
        .level {
          display: inline-block;
          margin-left: 4px;
          width: 24px;
          height: 24px;

          img {
            width: 100%;
            height: 100%;
          }
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
  .table_2 {
    border: 1px solid #6e6e6e;
    .table_header {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #6e6e6e;
      background-color: #fff;
      &:last-child {
        border-bottom: none;
      }
      .table_col {
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #6e6e6e;
        white-space: nowrap;
        overflow: hidden;
        .level {
          display: inline-block;
          margin-left: 4px;
          width: 24px;
          height: 24px;

          img {
            width: 100%;
            height: 100%;
          }
        }
        &:last-child {
          border-right: none;
        }
      }
    }
  }
}
</style>
