<template>
  <!-- 分析报告主页 -->
  <div class="page_report_main">
    <div class="page_search">
      <FiltersItem :filtersData="filtersData" @selectItem="ChangeFilters" />
      <div class="page_jg"></div>
    </div>
    <div class="list_content" v-loading="loading" element-loading-text="加载中……" element-loading-spinner="el-icon-loading"
      element-loading-background="#ffffff">
      <div class="list_item" v-for="item in TablePageData" :key="item.examData._id">
        <div class="item_header">
          <div class="header_left">
            <div class="exam_type" :style="{
              background: $global.getExamBackgroundColor(
                item.examData.examType
              ),
            }">
              {{ GxamTypeList(item.examData.examType) }}
            </div>
            <div class="exam_title">{{ item.examData.examName }}</div>
            <div class="title_score" v-if="item.examData.rateScoreAnalysisStatus == 1">赋分</div>
            <div class="title_Level" v-if="item.examData.examLevel == 1">
              联
            </div>
          </div>
          <div class="header_right">
            <span class="exam_time">考试时间：{{ item.examData.examDate }}</span>
            <span class="exam_time">年级：{{ item.examData.gradeName }}</span>
            <!-- <span class="exam_time">报告更新时间：{{ item.examData.analysisTime }}</span> -->
          </div>
        </div>
        <div class="item_content">
          <div class="course_img" v-for="(course, i) in item?.examData?.examSubjectVoList || []" :key="i"
            @click="GoDetail(item, course, item?.examData?.examSubjectVoList || [])">
            <img :src="require(`@/assets/fxReport/${GetSubjectsName(course.subjectName, course.subjectNum)}`)" />
            <span class="paper_remark" v-if="course.subjectNum">
              <el-tooltip :disabled="!course.subjectNum || course.subjectName.length <= 4" placement="top"
                :content="course.subjectName">
                <span :style="{
                  color: GetSubjectsColor(
                    course.subjectName,
                    course.subjectNum
                  ),
                  'border-color': GetSubjectsColor(
                    course.subjectName,
                    course.subjectNum
                  ),
                }">{{ course.subjectName }}</span>
              </el-tooltip>
            </span>
            <span class="paper_remark" v-if="course.subjectNotes">
              <el-tooltip :disabled="!course.subjectNotes || course.subjectNotes.length<=4" placement="top" :content="course.subjectNotes">
                <span :style="{'color': GetSubjectsColor(course.subjectName, course.subjectNum), 'border-color': GetSubjectsColor(course.subjectName,course.subjectNum)}">{{ course.subjectNotes }}</span>
              </el-tooltip>
            </span>
          </div>
        </div>
      </div>
      <div class="no_content_data" v-if="isNoData">暂无数据</div>
    </div>
    <div class="page_pagination" v-if="pageInfo.total > 10">
      <el-pagination @current-change="ChangePage" background layout="prev, pager, next" :page-size="10"
        :current-page="pageInfo.pageNum" :total="pageInfo.total">
      </el-pagination>
    </div>
    <div class="page_jg_20"></div>
  </div>
</template>
<script>
import FiltersItem from "@/components/FiltersItem_ruoyan.vue";
import {getApiName} from '@/utils/common';
export default {
  components: { FiltersItem },
  data() {
    return {
      pageInfo: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      }, //分页数据
      gradeList: [], //年级数据
      examTypeList: [], //考试类型数据
      params: {
        gradeCode: "", //年级code
        examType: "", //考试类型
      },
      filtersData: [
        {
          name: "年级",
          value: "",
          list: [
            {
              label: "全部",
              value: "",
            },
          ],
        },
        {
          name: "类型",
          value: "",
          list: [
            {
              label: "全部",
              value: "",
            },
          ],
        },
      ], //筛选数据
      filterData: [
        {
          name: "科目名称",
          value: "", // 数据匹配
          type: "subjectName",
          list: [], //选项
        },
      ], //考试顶部的筛选数据

      listData: [], //页面列表数据
      loading: false, //加载动画
      isNoData: false, //没有数据
      fiveRate: {
        3: "三率",
        4: "四率",
        5: "五率",
      },
    };
  },
  watch: {},
  created() {
    //登录
    this.GetLocalFilterData(); //从本地读取数据
    this.GetListData(true); //获取列表数据
  },
  computed: {
    TablePageData() {
      const { pageSize, pageNum } = this.pageInfo;
      const start = (pageNum - 1) * pageSize;
      const end = start + pageSize;
      return this.listData.slice(start, end);
    }
  },
  methods: {
    //从本地读取数据
    GetLocalFilterData() {
      if (localStorage.getItem("filterDataObject") != null) {
        let filterDataObject = JSON.parse(
          localStorage.getItem("filterDataObject")
        );

        this.filtersData = [
          {
            name: "年级",
            value: "",
            list: [
              {
                label: "全部",
                value: "",
              },
            ],
          },
          {
            name: "类型",
            value: "",
            list: [
              {
                label: "全部",
                value: "",
              },
            ],
          },
        ]; //筛选数据

        this.gradeList = filterDataObject.gradeList; //年级list
        this.gradeList.forEach((item) => {
          let obj = {
            label: item.gradeName,
            value: item.gradeCode,
          };
          this.filtersData[0].list.push(obj);
        });
        this.examTypeList = filterDataObject.examTypeList; //examTypeList考试类型
        this.examTypeList.forEach((item) => {
          let obj = {
            label: item.examName,
            value: item.examType,
          };
          this.filtersData[1].list.push(obj);
        });
      }
    },

    //获取考试类型
    GxamTypeList(value) {
      const examTypeItem = this.examTypeList.find(
        (item) => item.examType === value
      );
      return examTypeItem ? examTypeItem.examName : "";
    },

    //获取科目图片
    GetSubjectsName(name, count) {
      return this.$global.getSubjectsName(name, count);
    },
    GetSubjectsColor(name, count) {
      return this.$global.getSubjectsName(name, count, "color");
    },
    //获取顶部筛选数据
    GetFilterData(gradeData, examTypeData) {
      let filterDataObject = {
        gradeList: [], //年级列表
        examTypeList: [], //考试类型列表
      };
      this.filtersData = [
        {
          name: "年级",
          value: "",
          list: [
            {
              label: "全部",
              value: "",
            },
          ],
        },
        {
          name: "类型",
          value: "",
          list: [
            {
              label: "全部",
              value: "",
            },
          ],
        },
      ]; //初始筛选数据

      this.gradeList = gradeData; //年级list
      filterDataObject.gradeList = this.gradeList;
      this.gradeList.forEach((item) => {
        let obj = {
          label: item.gradeName,
          value: item.gradeCode,
        };
        this.filtersData[0].list.push(obj);
      });
      this.examTypeList = examTypeData; //examTypeList考试类型
      filterDataObject.examTypeList = this.examTypeList;
      this.examTypeList.forEach((item) => {
        let obj = {
          label: item.examName,
          value: item.examType,
        };
        this.filtersData[1].list.push(obj);
      });
      // 设置考试表头数据存储
      this.$store.commit("report/set_state", {
        key: "filterDataObject",
        value: filterDataObject,
      });
      localStorage.setItem(
        "filterDataObject",
        JSON.stringify(filterDataObject)
      ); //选择的考生科目信息
      console.log(
        "打印顶部筛选数据",
        this.$store.state.report.filterDataObject
      );
    },
    //条件改变更新列表
    ChangeUpdateList() {
      //重置分页到第一页
      this.pageInfo.pageNum = 1;
      this.GetListData(); //获取分析列表管理数据
    },
    //筛选切换
    ChangeFilters(e) {
      this.filtersData[e.index].value = e.value;
      this.params.gradeCode = this.filtersData[0].value;
      this.params.examType = this.filtersData[1].value;
      this.ChangeUpdateList(); //条件改变更新列表
    },
    // 获取列表数据
    GetListData(init) {
      this.loading = true;
      let param = {
        // pageNum: this.pageInfo.pageNum,
        // pageSize: this.pageInfo.pageSize,
        gradeCode: this.params.gradeCode, // 年级
        examTypeCode: this.params.examType, // 考试类型
      };
      // 获取考试分析列表数据
      this.$api.reportStudent[getApiName()].queryStudentExamDataList(param).then((res) => {
          if (res.code === 200) {
            this.listData = res?.data?.examData || [];
            this.pageInfo.total = this.listData.length;
            const gradeData = res?.data?.gradeData || []; //年级列表
            const examTypeData = res?.data?.examTypeData || []; //考试类型
            if (init) {
              this.GetFilterData(gradeData, examTypeData);
            }
            // 报告列表
            if (this.listData.length == 0) {
              this.isNoData = true;
            } else {
              this.isNoData = false;
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    //获取考试基础配置信息
    GetExamInfo(id) {
      return new Promise((resolve, reject) => {
        let param = {
          examId: id, //考试id
        };
        this.$api.reportSchool
          .getExamInfo(param)
          .then((res) => {
            console.log("打印获取五率名称接口返回数据", res);
            if (res.code == 200) {
              resolve(res.data);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    //跳转到详情
    GoDetail(item, course,examSubjectVoList) {
      let reportExamItem = item?.examData;
      // let data = await this.GetExamInfo(item._id)
      // console.log(data)
      // reportExamItem.levelCode = data.levelCode
      // reportExamItem.fiveRateType = data.fiveRateType
      // reportExamItem.fiveRateName = this.fiveRate[data.fiveRateType]
      // reportExamItem.fiveRateList = data.fiveRateList
      // reportExamItem.laseExamId = data.laseExamId
      // reportExamItem.laseExamName = data.laseExamName
      // reportExamItem.manyLaseExamIds = data.manyLaseExamIds
      // reportExamItem.examLevel = data.examLevel

      // this.$store.commit("report/SetExamLevel", data.examLevel)
      // this.$store.commit("report/SetLastExamRadioId", data.laseExamId)
      // this.$store.commit("report/SetLastExamRadioName", data.laseExamName)
      // this.$store.commit("report/SetLastExamSelectIds", data.manyLaseExamIds)
      // this.$store.commit("report/set_state", {
      //   key: "rateName",
      //   value: reportExamItem.fiveRateName,
      // });
      // this.$store.commit("report/set_state", {
      //   key: "fiveRateList",
      //   value: reportExamItem.fiveRateList,
      // });
      // localStorage.setItem('analysisExamId',reportExamItem._id);//分析管理考试id
      // localStorage.setItem('reportExamId',reportExamItem._id)//分析报告考试主Id
      // localStorage.setItem('reportExamCourseId', course.id);//单科的考试科目id
      // localStorage.setItem('reportExamCourseCode',course.subjectCode);//选择的科目code
      localStorage.setItem("ExamInfoItem", JSON.stringify(item)); //分析管理考试id
      localStorage.setItem("reportExamItem", JSON.stringify(reportExamItem)); //考试信息
      localStorage.setItem("reportExamCourseItem", JSON.stringify(course)); //选择的考生科目信息

      //设置选中的考试id
      this.$store.commit("report/set_state", {
        key: "examId",
        value: item._id, //考试id
      });
      // 设置选中的科目code
      this.$store.commit("report/set_state", {
        key: "examCourseCode",
        value: course.subjectCode,
      });
      // 设置选中的科目Item
      this.$store.commit("report/set_state", {
        key: "examSelectCourseItem",
        value: course,
      });
      this.GetExamFilterData(item, course, examSubjectVoList);
      this.$store
        .dispatch("report/SET_STATE", {
          key: "examSelectItem",
          value: reportExamItem,
        })
        .then(() => {
          this.$router.push({
            path: `/studentAnalysisReport/reportDetails/scrolReport`,
          });
        });
    },
    // 分页变更当前页码
    ChangePage(num) {
      this.pageInfo.pageNum = num;
      this.GetListData();
    },

    //获取考试顶部的筛选数据
    GetExamFilterData(examItem, course, examSubjectVoList) {
      //科目名称  单科
      let subjectList = [];
      examSubjectVoList.forEach((item) => {
        let subjectItem = {
          label: item.subjectNotes || item.subjectName,
          value: item.subjectCode,
          examLevel: examItem?.examData?.examLevel ?? '',//1-联考 2-单校
          contrastExamIds: examItem?.historyExamIds ?? [],//多次考试任务对比ID，不包含当前任务ID	
          ...item
        };
        subjectList.push(subjectItem);
      });
      this.filterData[0].list = subjectList;
      //设置分析报告首页选择的科目
      this.filterData[0].value = course.subjectCode;
      //科目选择的项
      const selectedItem = this.filterData[0].list.find(
        (item) => item.value === course.subjectCode
      ); //选择的项
      if (selectedItem == undefined) {
        this.$message({
          message: "该科目没有数据!",
          type: 'error',
          offset: 100
        });
        return;
      }
      this.$store.commit("report/set_state", {
        key: "isTotalScore",
        value: selectedItem.isTotal == 1 || selectedItem.subjectGroupType == 1,//1为总分 0为非总分 1为组合科目 0为非组合科目
      });
      localStorage.setItem("reportIsTotalScore", selectedItem.isTotal == 1 || selectedItem.subjectGroupType == 1);
      localStorage.setItem("reportFilterData", JSON.stringify(this.filterData));
      //数据存储到store里
      this.$store.commit("report/set_state", {
        key: "filterData",
        value: this.filterData,
      });
      // 选中科目数据
      let courseObj = this.filterData[0].list.find(
        (item) => item.value == this.filterData[0].value
      );
      let filterObject = {
        examLevel: courseObj.examLevel,//1-联考 2-单校
        contrastExamIds: courseObj.contrastExamIds,//多次考试任务对比ID，不包含当前任务ID	
        examId: courseObj.examId,//考试id	
        subjectCode: courseObj.subjectCode, //科目code
        subjectGroupType: courseObj.subjectGroupType, //是否为组合科目 1为组合科目 0为非组合科目
        subjectName: courseObj.subjectName,//科目名称
        isTotal: courseObj.isTotal //是否为总分科目 1为总分 0为非总分
      };
      this.$store.dispatch("report/UpdateFilterObject", filterObject);
    },
  },
};
</script>
<style lang="scss" scoped>
.page_report_main {
  width: 80%;
  min-width: 1200px;
  min-height: calc(100vh - 100px);
  margin: 0 auto;
  background-color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  // height: calc(100% - 40px);
  // overflow-y: auto;
  border-radius: 10px 10px 10px 10px;
}

.page_search {
  padding-top: 12px;
  width: calc(100% - 40px);
  margin: auto;
}

.list_content {
  width: 100%;
  height: auto;
  min-height: calc(100% - 240px);
  min-height: 400px;

  // height: calc(100% - 240px);
  // overflow-y: auto;
  // overflow-x: hidden;
  .list_item {
    width: calc(100% - 40px);
    margin: auto;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #dcdfe6;
    margin-bottom: 20px;

    .item_header {
      width: 100%;
      height: 48px;
      background: rgba(46, 100, 250, 0.03);
      border-radius: 10px 10px 0px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        padding-left: 10px;
        gap: 10px;

        .exam_type {
          width: 40px;
          height: 30px;
          border-radius: 5px 5px 5px 5px;
          color: #fff;
          line-height: 30px;
          text-align: center;
        }

        .exam_title {
          font-weight: 600;
          font-size: 18px;
          color: #666666;
        }

        .title_score {
          width: 32px;
          height: 20px;
          background-color: #2bc64420;
          color: #2bc644;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          border-radius: 4px;
        }

        .title_Level {
          width: 20px;
          height: 20px;
          background-color: #f56c6c20;
          color: #f56c6c;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          border-radius: 4px;
        }
      }

      .header_right {
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        padding-right: 10px;

        .exam_time {
          font-weight: 400;
          font-size: 14px;
          color: #999;
        }
      }
    }

    .item_content {
      width: 100%;
      min-height: 120px;
      display: flex;
      justify-content: flex-start;
      padding: 20px;
      gap: 20px;
      box-sizing: border-box;
      flex-wrap: wrap;

      .course_img {
        position: relative;
        width: 75px;
        height: 100px;
        box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.08);
        box-shadow: 4px 4 8px 0px rgba(0, 0, 0, 0.08);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f3f3f3;

        .paper_remark {
          display: inline-block;
          position: absolute;
          width: 90%;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: 66px auto 0;
          text-align: center;

          span {
            box-sizing: border-box;
            display: inline-block;
            max-width: 65px;
            padding: 2px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid;
            border-radius: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        img {
          width: 100%;
        }

        &:hover {
          outline: 2px solid #2e64fa;
          cursor: pointer;
        }
      }
    }
  }
}

.no_content_data {
  width: calc(100% - 40px);
  margin: auto;
  height: calc(100vh - 340px);
}

.page_pagination {
  width: calc(100% - 40px);
  margin: auto;
}
</style>
