<template>
  <div style="width: 100%; height: 100%">
    <div class="sr_head">学生成长报告</div>
    <div class="sr_body">
      <div class="sr_box">
        <div class="sr_first">
          <div class="first">
            <div class="sub_title"><span>学生基本信息</span></div>
            <StudentInfo class="r_box" :userid="userid" :courseid="courseid"></StudentInfo>
          </div>
          <div class="second">
            <div class="sub_title"><span>项目基本信息</span></div>
            <CourseInfo class="r_box" :courseid="courseid"></CourseInfo>
          </div>
        </div>
        <div class="sr_second" v-if="false">
          <div class="first">
            <div class="sub_title"><span>学生综合能力评估</span></div>
            <StudentAbility class="r_box"  :userid="userid" :courseid="courseid"></StudentAbility>
          </div>
          <!-- <div class="second">
            <div class="sub_title"><span>项目详细报告</span></div>
            <CourseDetailReport class="r_box"></CourseDetailReport>
          </div> -->
        </div>
        <div class="sr_third">
          <div class="first">
            <div class="sub_title"><span>阶段完成情况</span></div>
            <CourseRadar class="r_box" :userid="userid" :courseid="courseid"></CourseRadar>
          </div>
          <div class="second">
            <div class="sub_title"><span>阶段评价平均分</span></div>
            <CoursePie class="r_box" :userid="userid" :courseid="courseid"></CoursePie>
          </div>
        </div>
      </div>
      <div style="height:100%;min-width: 1100px;">
        <worksDetail3 class="r_box" :cid="courseid" :uid="userid" :ooid="scoid"></worksDetail3>
      </div>
    </div>
  </div>
</template>

<script>
import StudentInfo from "./report/studentInfo.vue";
import CourseInfo from "./report/courseInfoGM.vue";
import StudentAbility from "./report/studentAbilityGM.vue";
import CourseRadar from "./report/courseRadar.vue";
import CoursePie from "./report/coursePieGM.vue";
import CourseDetailReport from "./report/courseDetailReport.vue";
import worksDetail3 from "./worksDetail3GM.vue";
export default {
  props: ["checkCourse", "checkStudent","oid"],
  components: {
    StudentInfo,
    CourseInfo,
    StudentAbility,
    CourseRadar,
    CoursePie,
    CourseDetailReport,
    worksDetail3
  },
  data() {
    return {
      userid: "",
      courseid: "",
      scoid:"",
    };
  },
  watch: {
    checkStudent(newValue, oldValue) {
      this.userid = this.checkStudent;
      this.courseid = this.checkCourse;
      this.scoid = this.oid;
    },
  },
  created() {
    this.userid = this.checkStudent;
    this.courseid = this.checkCourse;
    this.scoid = this.oid;
  },
};
</script>

<style scoped>
.sr_head {
  color: #5c549f;
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 15px;
}
.sr_body {
  width: 100%;
  height: calc(100% - 55px);
  overflow: auto;
}

.sr_box {
  width: 100%;
  height: 100%;
  display: flex;
  min-width: 1100px;
  min-height: 700px;
}

.sr_first {
  width: calc(100% / 3.75 * 1);
  height: 100%;
}

/* .sr_second {
  width: calc(100% / 3.75 * 2);
  height: 100%;
} */
.sr_third {
  width: calc(100% / 3.75 * 2.75);
  height: 100%;
}
.sr_first,
.sr_second,
.sr_third {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sr_first .first,
.sr_first .second,
.sr_second .first,
.sr_second .second,
.sr_third .first,
.sr_third .second {
  background: #fff;
  border-radius: 10px;
  width: 98%;
  overflow: hidden;
}
.sr_first .first {
  height: calc(100% / 3 * 1.1);
  margin-bottom: 20px;
}
.sr_first .second {
  height: calc(100% / 3 * 1.9);
}

.sr_second .first {
  /* height: calc(100% / 3.5 * 2); */
  height: calc(100%);
  /* margin-bottom: 20px; */
}
.sr_second .second {
  /* height: calc(100% / 3.5 * 1.5); */
}
.sr_third .first {
  height: calc(100% / 2.25 * 1.25);
  margin-bottom: 20px;
}
.sr_third .second {
  height: calc(100% / 2.25);
}
.sub_title {
  display: flex;
  color: #5c549f;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  width: 200px;
  margin: 0 auto;
}
.sub_title span {
}
.sub_title::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../../../assets/report/left_coinGM.png);
  background-size: 100% 100%;
}
.sub_title::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../../../assets/report/right_coinGM.png);
  background-size: 100% 100%;
}

.r_box {
  height: calc(100% - 40px);
  width: 100%;
}
</style>