<template>
  <!-- 选课建议 -->
  <div class="course_suggest">
    <Top :active="active"></Top>
    <div class="course_suggest_wrap">
      <h2>选课建议系统</h2>
      <div class="course_suggest_box">
        <!-- 导航栏 -->
        <div class="course_nav">
          <div
            class="nav_single"
            :class="{nav_bottom:isNav == index}"
            v-for="(item,index) in courseList"
            :key="index"
            @click="changeNav(index)"
            v-show="groupId == 1"
          >{{item}}</div>
          <div class="nav_single nav_bottom" v-show="groupId == 2">选课建议</div>
        </div>
        <!-- 选课建议 -->
        <div class="course_suggest_main" v-show="isNav == 0">
          <!-- 考试成绩 -->
          <div class="test_score">
            <h3>考试成绩</h3>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="changeHeader"
            >
              <el-table-column prop="name" label="科目" align="center"></el-table-column>
              <el-table-column prop="score" label="分数" align="center"></el-table-column>
              <el-table-column prop="date" label="时间" align="center"></el-table-column>
            </el-table>
          </div>
          <!-- 测评结果 -->
          <div class="course_result">
            <h3>测评结果</h3>
            <div class="course_result_box">
              <div class="course_res_top">多元性向潜能</div>
              <div class="course_res_bot no_mul" v-show="!resultList.average">暂未测评</div>
              <div class="course_res_bot" v-show="resultList.average">
                <div class="layout flex_row course_bottom">
                  <div class="result_l">结果分析</div>
                  <div
                    class="result_r"
                  >{{resultList.average+"%"}} 在多元性向潜能测评中，您超过了{{resultList.average+"%"}}的测评者</div>
                </div>
                <div class="layout flex_row course_bottom">
                  <div class="result_l">最高性向</div>
                  <div class="result_r">{{resultList.xx_highs}}</div>
                </div>
                <div class="layout flex_row course_bottom">
                  <div class="result_l">最低性向</div>
                  <div class="result_r">{{resultList.xx_lows}}</div>
                </div>
                <div class="layout flex_row course_bottom">
                  <div class="result_l">适合专业</div>
                  <div class="result_r">{{resultList.ss_profession}}</div>
                </div>
                <div class="layout flex_row">
                  <div class="result_l">学习风格</div>
                  <div class="result_r">{{resultList.fengge}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 综合建议 -->
          <div class="multiple_suggest">
            <h3>综合建议</h3>
            <div class="multiple_content no_course" v-show="!resultList.average">暂无数据</div>
            <div class="multiple_content" v-show="resultList.average">
              你的多元性向潜能暨学习风格测验结果，显示你最高的性向为 {{resultList.xx_high}}，是你较具有优势的部分，而你最低的性向为
              {{resultList.xx_low}}，是你可以在加强的部分。因此建议你可以选择 {{resultList.zhuanye}}的学科类别方向努力。你的学习风格为
              {{resultList.fengge_result}}，建议你可以使用适合你的学习方法和思考模式，以增进学习效率。
            </div>
          </div>
          <!-- 选课结果 -->
          <div class="multiple_suggest" v-show="groupId == 2">
            <h3>选课结果</h3>
            <div class="multiple_content no_course" v-show="parentView == 2">您的孩子暂未选课，请及时选课</div>
            <div class="multiple_content no_course" v-show="parentView == 0">该学校暂未开放选课请耐心等待</div>
            <div class="sbuject_choiced layout flex_row">
              <div
                v-show="parentView == 1"
                v-for="(item,index) in parentScore"
                :key="index"
                class="choiced_child"
                :class="{choiced_child_center:index == 1}"
              >{{item}}</div>
            </div>
          </div>
          <!-- 下一步 -->
          <div class="second_btn" @click="nextPage()" v-show="groupId == 1">下一步</div>
        </div>
        <!-- 选课意向 -->
        <div class="course_purpose" v-show="isNav == 1">
          <!-- 有选课 -->
          <div class="course_purpose_had" v-if="courseId">
            <div class="choice_tips">
              请选择一组
              <i class="choice_warn">(只能选择一次，请慎重选择)</i>
            </div>
            <div class="clearfix">
              <div
                class="layout flex_row align_center single_group"
                v-for="(item,index) in intentionList"
                :key="index"
                @click="choiceCourse(item)"
              >
                <div>
                  <img :src="item.is_choose?src2:src1" alt />
                </div>
                <div class="sbuject_choice layout flex_row">
                  <div
                    v-for="(items,index) in item.project_array"
                    :key="index"
                    :class="{sub_center:index == 1}"
                  >{{items}}</div>
                </div>
              </div>
            </div>
            <div class="second_btn have_btn" @click="submit()" v-show="isAllow != 0">提交</div>
          </div>
          <!-- 无选课 -->
          <div class="course_purpose_no" v-else>管理员后台未设置选课模式，请联系管理员</div>
        </div>
      </div>
    </div>
    <Bottom2></Bottom2>
  </div>
</template>
<script>
import Top from "../../common/Top";
import Bottom2 from "../../common/Bottom2";
import { post } from "@/api/http";
import { Notification } from "element-ui";
export default {
  data() {
    return {
      active: 2,
      isNav: 0,
      courseList: ["选课建议", "选课意向"],
      // 考试成绩
      tableData: [],
      // 选课结果
      resultList: [],
      // 选课意向
      intentionList: [],
      // 选课id
      courseId: "",
      // 是否可选课
      isAllow: "",
      isShow: false,
      // 选课
      src1: require("@/assets/img/9.png"),
      src2: require("@/assets/img/15.png"),
      // 选课套餐id
      courseMealId: "",
      parentScore: [],
      groupId: "",
      // 是否选课状态
      parentView: ""
    };
  },
  methods: {
    // 选课建议
    suggest() {
      let url = "/api/student/suggest";
      post(url).then(res => {
        // 考试成绩
        this.tableData = res.score_list;
        // 选课结果
        this.resultList = res.test_result;
        // 家长可看的选课结果
        this.parentScore = res.choose_subjects;
        this.parentView = res.choose_status;
      });
    },
    // 下一步
    nextPage() {
      this.isNav = 1;
      if (this.groupId == 1) {
        this.courseIntention();
      }
    },
    changeNav(index) {
      this.isNav = index;
      if (this.isNav == 1) {
        if (this.groupId == 1) {
          this.courseIntention();
        }
      }
    },
    // 选课意向
    courseIntention() {
      let url = "/api/student/yixiang";
      post(url).then(res => {
        this.intentionList = res.meal_list;
        this.courseId = res.mission_id;
        this.isAllow = res.is_allow;
      });
    },
    // 选课
    choiceCourse(item) {
      if (this.isAllow) {
        for (let obj of this.intentionList) {
          obj.is_choose = false;
        }
        item.is_choose = !item.is_choose;
        this.courseMealId = item.id;
      }
    },
    // 选课提交
    submit() {
      if (this.courseMealId) {
        let url = "/api/student/setUserMeal";
        let params = {
          id: this.courseId,
          project_meal_id: this.courseMealId
        };
        post(url, params).then(res => {
          localStorage.setItem("personalIndex", 3);
          Notification.info({
            title: "提示",
            message: "选择成功",
            duration: 1500
          });
          this.isAllow = 1;
          this.$router.push({ path: "/CourseSelect" });
        });
      } else {
        Notification.info({
          title: "提示",
          message: "请选择",
          duration: 1500
        });
      }
    },
    changeHeader({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "background-color:#409eff!important;color:#fff!important;font-weight:400";
      }
    }
  },
  components: {
    Top,
    Bottom2
  },
  mounted() {
    this.groupId = localStorage.getItem("groupId");
    this.suggest();
  }
};
</script>
<style scoped>
@import "../../../style/btn.css";

.course_suggest {
  width: 100%;
  background-color: #f2f5fa;
}

.course_suggest_wrap {
  width: 1200px;
  margin: 0 auto;
  text-align: left;
}

h2 {
  color: #34485e;
  font-size: 20px;
  margin: 28px 0 20px 14px;
  position: relative;
}

h2::after {
  content: "";
  width: 4px;
  height: 14px;
  background-color: #409eff;
  border-radius: 2px;
  position: absolute;
  top: 7px;
  left: -14px;
}

.course_suggest_box {
  width: 1200px;
  background-color: #fff;
}

/* 导航栏 */
.course_nav {
  height: 66px;
  width: 100%;
  border-bottom: 1px solid #eee;
  line-height: 65px;
}

.nav_single {
  width: 98px;
  margin-left: 36px;
  float: left;
  color: #34485e;
  font-size: 16px;
  text-align: center;
}

.nav_bottom {
  border-bottom: 2px solid #409eff;
}

/* 因素 */
.course_suggest_main {
  padding: 28px 36px;
}

h3 {
  color: #5b5e63;
  font-size: 16px;
  text-align: left;
  margin-bottom: 20px;
}

.test_score,
.course_result,
.multiple_suggest {
  margin-bottom: 28px;
}

/* 选课结果 */
.course_res_top {
  height: 40px;
  background: #409eff;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  border-radius: 3px 3px 0 0;
}

.course_res_bot {
  border: 1px solid #eee;
  border-radius: 0 0 3px 3px;
  font-size: 14px;
  color: #34485e;
}

.result_l {
  padding: 20px 33px;
  border-right: 1px solid #eee;
}

.course_bottom {
  border-bottom: 1px solid #eee;
}

.result_r {
  padding: 20px 0;
  width: 1000px;
  text-align: center;
}

/* 综合建议 */
.multiple_content {
  font-size: 14px;
  color: #34485e;
  text-align: left;
}
/* 家长端 无选课 */
.no_course {
  color: #909399;
}
/* 下一步 */
.second_btn {
  margin-top: 53px;
}

/* 选课意向 */
.course_purpose {
  padding: 28px 52px;
  font-size: 14px;
  color: #8c9198;
  text-align: left;
}

.choice_tips {
  margin-bottom: 18px;
}

/* 未测评 */
.no_mul {
  padding: 22px 0;
  text-align: center;
  color: #909399;
}

/* 有选课 */
.single_group {
  width: 40%;
  margin-bottom: 40px;
  float: left;
}

.sbuject_choice {
  border: 1px solid #8c9198;
  margin-left: 28px;
}

.sbuject_choice div {
  padding: 11px 30px;
}
.choiced_child {
  padding: 11px 30px;
  border: 1px solid #8c9198;
}
.choiced_child_center {
  border-left: none;
  border-right: none;
}
.sub_center {
  border: 1px solid #8c9198;
  border-top: none;
  border-bottom: none;
}

.have_btn {
  margin-top: 200px;
}

.choice_warn {
  color: #f44a5e;
}

/* 无选课 */
.course_purpose_no {
  height: 631px;
  text-align: center;
  line-height: 631px;
  font-size: 16px;
  color: #bdc4ce;
}
</style>