<template>
  <div class="course_select">
    <!--选课管理  -->
    <!-- 未选课 -->
    <div class="no_course" v-show="isCourse == 2&&groupId == 1">
      <p class="no_cour_content">您还未选课，请您先去选课</p>
      <button @click="choiceCourse">选课</button>
    </div>
    <div class="no_course" v-show="isCourse == 0&&groupId == 1">
      <p class="no_cour_content">该学校暂未开放选课请耐心等待</p>
    </div>
    <div class="no_course" v-show="isCourse == 2&&groupId == 2">
      <p class="no_cour_content">您的孩子暂未选课</p>
    </div>
    <div class="no_course" v-show="isCourse == 0&&groupId == 2">
      <p class="no_cour_content">该学校暂未开放选课请耐心等待</p>
    </div>
    <!-- 选课 -->
    <div class="choice_course" v-show="isCourse == 1">
      <el-table :data="tableData" style="width: 995px" :header-cell-style="changeHeader">
        <el-table-column label="科目名称" align="center" width="207px">
          <template slot-scope="scope">
            <div class="cell_color">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="任课教师" align="center" width="206px">
          <template slot-scope="scope">
            <div class="cell_color" v-if="scope.row.teacher == '-'&&scope.row.zhiwu=='-'">
              <div>{{scope.row.teacher}}</div>
              <!-- <div>{{scope.row.zhiwu}}</div> -->
            </div>
            <div class="cell_color" v-else>
              <div>{{scope.row.teacher}}</div>
              <div>{{scope.row.zhiwu}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="考试日期" align="center" width="210px">
          <template slot-scope="scope">
            <div class="cell_color">{{scope.row.date}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="370">
          <template slot-scope="scope">
            <div class="operation" @click="watchScore(scope.row)">查看成绩</div>
            <div class="operation2" @click="watchComment(scope.row)">查看评语</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 查看成绩弹窗 -->
    <div class="score_dialog clearfix">
      <el-dialog :title="scoreTitle" :visible.sync="scoreVisible" :close-on-click-modal="false">
        <el-table :data="scoreData" :header-cell-style="changeHeader" v-if="groupId == 1">
          <el-table-column property="name" label="考试名称" width="300"></el-table-column>
          <el-table-column property="date" label="考试时间" width="300"></el-table-column>
          <el-table-column property="max" label="满分值" width="300"></el-table-column>
          <el-table-column property="score" label="考试成绩" width="300"></el-table-column>
          
        </el-table>
        <el-table :data="scoreData" :header-cell-style="changeHeader" v-if="groupId != 1">
          <el-table-column property="name" label="考试名称" width="200"></el-table-column>
          <el-table-column property="date" label="考试时间" width="200"></el-table-column>
          <el-table-column property="max" label="满分值" width="200"></el-table-column>
          <el-table-column property="score" label="考试成绩" width="200"></el-table-column>
          <el-table-column property="rank" label="科目班级排名" width="200" >
            
          </el-table-column>
          <el-table-column property="group_rank" label="科目年级排名" width="200" >
            
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>

    <!-- 查看评语弹窗 -->
    <div class="comment_dialog clearfix">
      <el-dialog title="查看评语" :visible.sync="commentVisible" :close-on-click-modal="false">
        <!-- 评语 -->
        <div class="comment_content clearfix">
          <div class="comment_single clearfix" v-for="(item,index) in commentData" :key="index">
            <!-- 评语老师 -->
            <div class="comment_title layout flex_row justify">
              <div class="title_teacher">{{item.teacher}}</div>
              <div class="title_date">{{item.date}}</div>
            </div>
            <!-- 评语内容 -->
            <div class="comment_det">{{item.pingyu?item.pingyu:"未填写评语"}}</div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { post } from "@/api/http";
import { Notification } from "element-ui";
export default {
  data() {
    return {
      isCourse: "",
      // 已选课程
      tableData: [],
      // 查看成绩弹窗
      scoreVisible: false,
      scoreData: [],
      scoreTitle: "",
      // 查看评语弹窗
      commentVisible: false,
      commentData: [],
      groupId: "",
      groupNumber: ""
    };
  },
  methods: {
    // 选课
    choiceCourse() {
      if (this.groupNumber == 1) {
        this.$router.push({ path: "/CourseSuggest" });
      } else {
        Notification.info({
          title: "提示",
          message: "非高一学生无法选课",
          duration: 1500
        });
      }
    },
    // 表头样式
    changeHeader({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "background-color:#f1f1f1;color:#5B5E63!important;font-weight:400";
      }
    },
    // 查看成绩
    watchScore(scope) {
      this.scoreTitle = scope.name + "成绩与排名情况统计";
      let url = "/api/student/chengjiDetail";
      let params = {
        id: scope.id
      };
      post(url, params).then(res => {
        this.scoreData = res.score_list;
        this.scoreVisible = true;
      });
    },
    // 查看评语
    watchComment(scope) {
      let url = "/api/student/pingyuDetail";
      let params = {
        id: scope.id
      };
      post(url, params).then(res => {
        this.commentData = res.score_list;
        this.commentVisible = true;
      });
    },
    // 选课管理
    courseChoice() {
      let url = "/api/student/xuanke";
      post(url).then(res => {
        this.tableData = res.score_list;
        this.isCourse = res.choose_status;
      });
    }
  },
  mounted() {
    this.groupNumber = localStorage.getItem("groupNumber");
    this.groupId = localStorage.getItem("groupId");
    this.courseChoice();
  }
};
</script>
<style scoped>
@import "../../../style/personal.css";

/* 未选课 */
.no_cour_content {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 21px;
  color: rgba(52, 72, 94, 1);
  margin-top: 120px;
}

button {
  outline: none;
  border: none;
  width: 92px;
  height: 40px;
  background: #409eff;
  font-size: 16px;
  color: #fff;
  margin-top: 36px;
  cursor: pointer;
}

/* 操作 */

/* 查看评语 */
.operation2 {
  color: #409eff;
}

/* 查看评语弹窗 */

.comment_single {
  margin-bottom: 48px;
}

/* 教师名称 */
.comment_title {
  font-size: 16px;
  margin-bottom: 24px;
}

.title_teacher {
  font-weight: bold;
  color: #34485e;
}

.title_date {
  color: #bdc4ce;
}

/* 评语内容 */
.comment_det {
  padding: 24px;
  background-color: #eeeeee;
  font-size: 14px;
  color: #8c9198;
  text-align: left;
}
</style>