<template>
  <div v-loading="loading" class="app-container home">
    <!-- <div class="state_title">
      <h1>学校基本情况</h1>
      <div class="condition_box">
        <div v-if="userStore.id === 1" class="school">
          <SchoolSelect
            v-model="schoolSelected"
            @update:modelValue="changeSchool"
          />
        </div>
        <SwitchState
          v-model="recentDate"
          size="large"
          :radioData="radioTime"
          @handleAction="handleFilterTime"
        />
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <PieChart :chartData="schoolAvgExp" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <PieChart :chartData="schoolLearnTime" />
        </el-card>
      </el-col>
    </el-row>
    <h1>班级排行榜</h1>
    <div>
      <div class="show_rank">
        <el-card
          class="box-card rank_card"
          v-for="(item, index) in classRankList"
          :key="index"
        >
          <SwitchState
            v-model="classGroupRank"
            :radioData="classGroupRankType"
            :title="item.title"
            @handleAction="handleFilterClassGroupType(item, 'class')"
          />
          <template v-if="item.chartData.seriesData.length === 0">
            <div class="empty">
              <img src="@/assets/images/medal_empty.png" alt="" />
              <div class="name">暂无数据</div>
            </div>
          </template>
          <template v-else>
            <BarChart :chartData="item.chartData" />
          </template>
        </el-card>
      </div>
    </div>
    <h1>个人排行榜TOP10</h1>
    <div>
      <div class="show_rank">
        <el-card
          class="box-card rank_card"
          v-for="item in personRankList"
          :key="item.title"
        >
          <SwitchState
            v-model="personRank"
            :radioData="personRankType"
            :title="item.title"
            @handleAction="handleFilterPersonType(item)"
          />
          <template v-if="item.chartData.seriesData.length === 0">
            <div class="empty">
              <img src="@/assets/images/medal_empty.png" alt="" />
              <div class="name">暂无数据</div>
            </div>
          </template>
          <template v-else>
            <BarChart :chartData="item.chartData" />
          </template>
        </el-card>
      </div>
    </div>
    <h1>小组排行榜TOP10</h1>
    <div>
      <div class="show_rank">
        <el-card
          class="box-card rank_card"
          v-for="(item, index) in groupRankList"
          :key="index"
        >
          <SwitchState
            v-model="classGroupRank"
            :radioData="classGroupRankType"
            :title="item.title"
            @handleAction="handleFilterClassGroupType(item, 'group')"
          />
          <template v-if="item.chartData.seriesData.length === 0">
            <div class="empty">
              <img src="@/assets/images/medal_empty.png" alt="" />
              <div class="name">暂无数据</div>
            </div>
          </template>
          <template v-else>
            <BarChart :chartData="item.chartData" />
          </template>
        </el-card>
      </div>
    </div> -->
  </div>
</template>

<script setup name="Index">
import SwitchState from "@/views/smartCampus/components/Echarts/SwitchState.vue";
import PieChart from "@/views/smartCampus/components/Echarts/PieChart.vue";
import BarChart from "@/views/smartCampus/components/Echarts/BarChart.vue";
import { formatSecond } from "@/hooks/formatTime";
import { ElLoading } from "element-plus";
import { onUnmounted } from "vue";
import {
  getSchoolStatDataApi,
  getPersonRankApi,
  getGroupRankApi,
  getClassRankApi,
} from "@/api/smartCampus/index";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const loading = ref(false);

const radioTime = ref([
  { label: "7", text: "近7天" },
  { label: "30", text: "近30天" },
]);
const recentDate = ref("7");
const radioType = ref([
  { label: "平均经验值", text: "平均经验值" },
  { label: "学习时长", text: "学习时长" },
]);
const schoolList = ref([]);
const schoolSelected = ref("");

// 个人排行榜
const personRankList = ref([]);
const personRank = ref("expMap");
const personRankType = ref([
  {
    label: "expMap",
    text: "总经验值",
  },
  {
    label: "learnTimeMap",
    text: "学习时长",
  },
  {
    label: "rightRateMap",
    text: "准确率",
  },
]);
//学校平均经验值
const schoolAvgExp = ref({
  title: "学校平均经验值占比情况",
  seriesName: "平均经验值",
  pieRadius: ["40%", "70%"],
  seriesData: [],
  tooltipFormatter: "{a} <br/>{b} : {c} ({d}%)",
});
//学校平均学习时长
const schoolLearnTime = ref({
  title: "学校学习时长占比情况",
  seriesName: "学习时长",
  pieRadius: ["70%"],
  seriesData: [],
  tooltipFormatter: function (params) {
    let result =
      params.data.name +
      "平均学习时长：" +
      "<br>" +
      formatSecond(params.data.value) +
      "(" +
      params.percent +
      "%" +
      ")";
    return result;
  },
});
const classGroupRankType = ref([
  {
    label: "gradeExpMap",
    text: "平均经验值",
  },
  {
    label: "gradeLearnTimeMap",
    text: "平均学习时长",
  },
]);
const classGroupRank = ref("gradeExpMap");
// 班级排行榜
const classRankList = ref([]);

// 小组排行榜
const groupRankList = ref([]);
// 时间选择
function handleFilterTime() {
  fetchDataOverView();
}
// 过滤班级小组排行榜
// function handleFilterClassGroupType(item, type) {
//   item.chartData.seriesData = [];
//   item.chartData.yAxisData = [];
//   let typeData = item[classGroupRank.value];
//   if (classGroupRank.value === "gradeExpMap") {
//     for (let o = typeData.length - 1; o >= 0; o--) {
//       if (typeData[o].avgExp !== 0) {
//         item.chartData.seriesData.push(typeData[o].avgExp);
//         let title =
//           type === "class" ? typeData[o].className : typeData[o].groupName;
//         item.chartData.yAxisData.push(title);
//       }
//     }
//     item.chartData.tooltipFormatter = function (params) {
//       let result = params.name + "：" + "<br>" + params.value;
//       return result;
//     };
//   } else if (classGroupRank.value === "gradeLearnTimeMap") {
//     for (let o = typeData.length - 1; o >= 0; o--) {
//       if (typeData[o].avgLearnTime !== 0) {
//         item.chartData.seriesData.push(typeData[o].avgLearnTime);
//         let title =
//           type === "class" ? typeData[o].className : typeData[o].groupName;
//         item.chartData.yAxisData.push(title);
//       }
//     }
//     item.chartData.tooltipFormatter = function (params) {
//       let result = params.name + "：" + "<br>" + formatSecond(params.value);
//       return result;
//     };
//   }
// }
// // 过滤个人排行榜
// function handleFilterPersonType(item) {
//   item.chartData.seriesData = [];
//   item.chartData.yAxisData = [];
//   let typeData = item[personRank.value];
//   if (personRank.value === "expMap") {
//     // 总经验值
//     for (let o = typeData.length - 1; o >= 0; o--) {
//       if (typeData[o].exp !== 0) {
//         item.chartData.seriesData.push(typeData[o].exp);
//         item.chartData.yAxisData.push(typeData[o].stuName);
//       }
//     }
//     item.chartData.tooltipFormatter = function (params) {
//       let result = params.name + "：" + "<br>" + params.value;
//       return result;
//     };
//   } else if (personRank.value === "learnTimeMap") {
//     // 学习时长
//     for (let o = typeData.length - 1; o >= 0; o--) {
//       if (typeData[o].learnTime !== 0) {
//         item.chartData.seriesData.push(typeData[o].learnTime);
//         item.chartData.yAxisData.push(typeData[o].stuName);
//       }
//     }
//     item.chartData.tooltipFormatter = function (params) {
//       let result = params.name + "：" + "<br>" + formatSecond(params.value);
//       return result;
//     };
//   } else if (personRank.value === "rightRateMap") {
//     // 准确率
//     for (let o = typeData.length - 1; o >= 0; o--) {
//       if (typeData[o].wordRightRateDecimal !== "0.00") {
//         item.chartData.seriesData.push(typeData[o].wordRightRateDecimal);
//         item.chartData.yAxisData.push(typeData[o].stuName);
//       }
//     }
//     item.chartData.tooltipFormatter = function (params) {
//       let result = params.name + "：" + "<br>" + params.value + "%";
//       return result;
//     };
//   }
// }
// // 获取学校概览
// async function fetchSchoolStatData() {
//   try {
//     const res = await getSchoolStatDataApi({
//       recentDate: recentDate.value,
//       tenantId: schoolSelected.value,
//     });
//     if (res.code === 200) {
//       let data = res.data;
//       for (let i in data) {
//         if (Number(data[i].avgExp) !== 0) {
//           schoolAvgExp.value.seriesData.push({
//             value: data[i].avgExp,
//             name: data[i].gradeName,
//           });
//         }
//         if (Number(data[i].avgLearnTime) !== 0) {
//           schoolLearnTime.value.seriesData.push({
//             value: data[i].avgLearnTime,
//             name: data[i].gradeName,
//           });
//         }
//       }
//     }
//   } catch (err) {
//     console.log(err);
//     loading.value.close();
//   }
// }
// // 获取班级排行榜
// async function fetchClassRank() {
//   try {
//     const res = await getClassRankApi({
//       recentDate: recentDate.value,
//       tenantId: schoolSelected.value,
//     });
//     if (res.code === 200) {
//       let data = res.data.length > 0 ? res.data : [];
//       for (let i in data) {
//         let yAxisData = [];
//         let seriesData = [];
//         //默认-平均经验值
//         let _expMap = data[i]["gradeExpMap"];
//         for (let o in _expMap) {
//           if (_expMap[o].avgExp !== 0) {
//             yAxisData.push(_expMap[o].className);
//             seriesData.push(_expMap[o].avgExp);
//           }
//         }

//         let chartData = {
//           seriesData: seriesData.reverse(),
//           yAxisData: yAxisData.reverse(),
//         };
//         classRankList.value.push({ ...data[i], chartData });
//       }
//     }
//   } catch (err) {
//     loading.value.close();
//   }
// }
// // 个人排行前十
// async function fecthPersonRank() {
//   try {
//     const res = await getPersonRankApi({
//       recentDate: recentDate.value,
//       tenantId: schoolSelected.value,
//     });
//     if (res.code === 200) {
//       let data = res.data.length > 0 ? res.data : [];
//       for (let i in data) {
//         //默认-总经验值
//         let yAxisData = [];
//         let seriesData = [];
//         let _expMap = data[i]["expMap"];
//         for (let o in _expMap) {
//           if (_expMap[o].exp !== 0) {
//             yAxisData.push(_expMap[o].stuName);
//             seriesData.push(_expMap[o].exp);
//           }
//         }
//         let chartData = {
//           seriesData: seriesData.reverse(),
//           yAxisData: yAxisData.reverse(),
//         };
//         personRankList.value.push({ ...data[i], chartData });
//       }
//     }
//   } catch (err) {
//     loading.value.close();
//   }
// }

// // 小组排行前十
// async function fecthGroupRank() {
//   try {
//     const res = await getGroupRankApi({
//       recentDate: recentDate.value,
//       tenantId: schoolSelected.value,
//     });
//     if (res.code === 200) {
//       let data = res.data.length > 0 ? res.data : [];
//       for (let i in data) {
//         //默认-平均经验值
//         let yAxisData = [];
//         let seriesData = [];
//         let _expMap = data[i]["gradeExpMap"];
//         for (let o in _expMap) {
//           if (_expMap[o].avgExp !== 0) {
//             yAxisData.push(_expMap[o].groupName);
//             seriesData.push(_expMap[o].avgExp);
//           }
//         }
//         let chartData = {
//           seriesData: seriesData.reverse(),
//           yAxisData: yAxisData.reverse(),
//         };
//         groupRankList.value.push({ ...data[i], chartData });
//       }
//     }
//   } catch (err) {
//     loading.value.close();
//   }
// }

// // 获取数据概览
// async function fetchDataOverView() {
//   schoolAvgExp.value.seriesData = [];
//   schoolLearnTime.value.seriesData = [];
//   classRankList.value = [];
//   personRankList.value = [];
//   groupRankList.value = [];
//   loading.value = ElLoading.service({
//     text: "正在加载数据，请稍候",
//     background: "rgba(0, 0, 0, 0.7)",
//   });
//   await fetchSchoolStatData();
//   await fetchClassRank();
//   await fecthPersonRank();
//   await fecthGroupRank();
//   loading.value.close();
// }

// function changeSchool(val) {
//   schoolSelected.value = val;
//   fetchDataOverView();
// }
// async function handleDifferentRole() {
//   if (userStore.id === 1) {
//     // 超管
//     setTimeout(() => {
//       schoolList.value = userStore.schoolList;
//       schoolSelected.value =
//         schoolList.value.length > 0 ? schoolList.value[0].id : "";
//       fetchDataOverView();
//     }, 200);
//   } else {
//     fetchDataOverView();
//   }
// }
// handleDifferentRole();
</script>

<style scoped lang="scss">
.home {
  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 600px;
    text-align: center;
    img {
      width: 300px;
      height: 300px;
    }
    .name {
      font-size: 18px;
      margin-top: 6px;
    }
  }
  .echart_item {
    background-color: #fff;
  }
  .state_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .condition_box {
      display: flex;
      align-items: center;
      .school {
        margin-right: 16px;
      }
    }
  }
  .show_rank {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    .rank_card {
      width: calc(33% - 5px);
      margin-right: 5px;
      margin-bottom: 5px;
    }
  }
}
</style>
