<template>
  <!-- 学期总结 -->
  <div class="term_summary clearfix">
    <!-- 学期列表 -->
    <div class="term_list clearfix layout flex_row">
      <div
        class="term_msg layout justify_around flex_diection"
        v-for="item in termList"
        :key="item.id"
        :class="{term_bot:isBot == item.id}"
        @click="changeBot(item.id)"
      >
        <div class="term_group">{{item.year}} {{item.group}}</div>
        <div class="term_det">{{item.term}}</div>
      </div>
    </div>
    <!-- 个人信息 未提交-->
    <div class="term_personal clearfix" v-show="allowUpdate == 1&&groupId == 1">
      <!-- 自我评价 -->
      <div class="self_evalution">
        <!-- 标题 -->
        <div class="self_title">一.自我评价</div>
        <!-- 评价范围 -->
        <div class="evalute_range">
          <div class="evalute_title">
            <i class="term_star">*</i>我的兴趣
          </div>
          <el-input type="textarea" :rows="4" v-model="textarea"></el-input>
        </div>
        <div class="evalute_range">
          <div class="evalute_title">
            <i class="term_star">*</i>我擅长的技能
          </div>
          <el-input type="textarea" :rows="4" v-model="textarea1"></el-input>
        </div>
        <div class="evalute_range">
          <div class="evalute_title">
            <i class="term_star">*</i>我不擅长的技能
          </div>
          <el-input type="textarea" :rows="4" v-model="textarea2"></el-input>
        </div>
      </div>
      <!-- 他人眼中的我 -->
      <div class="self_evalution">
        <!-- 标题 -->
        <div class="self_title">二.他人眼中的我</div>
        <!-- 评价范围 -->
        <div class="evalute_range">
          <div class="evalute_title">
            <i class="term_star">*</i>家长
          </div>
          <el-input type="textarea" :rows="4" v-model="textarea3"></el-input>
        </div>
        <div class="evalute_range">
          <div class="evalute_title">
            <i class="term_star">*</i>老师
          </div>
          <el-input type="textarea" :rows="4" v-model="textarea4"></el-input>
        </div>
        <div class="evalute_range">
          <div class="evalute_title">
            <i class="term_star">*</i>同学
          </div>
          <el-input type="textarea" :rows="4" v-model="textarea5"></el-input>
        </div>
      </div>
      <!-- 荣誉 -->
      <div class="self_evalution">
        <!-- 标题 -->
        <div class="self_title"><i class="term_star">*</i>三.荣誉及获奖情况</div>
        <!-- 评价范围 -->
        <div class="evalute_range">
          <el-input type="textarea" :rows="4" v-model="textarea6"></el-input>
        </div>
      </div>
      <!-- 提交 -->
      <div class="second_btn" @click="submit()">提交</div>
    </div>
    <!-- 已提交 -->
    <div class="term_personal clearfix" v-show="allowUpdate == 0||groupId == 2">
      <!-- 自我评价 -->
      <div class="self_evalution">
        <!-- 标题 -->
        <div class="self_title layout justify align_center">
          <div>一.自我评价</div>
          <div class="submit_time" v-show="completeList.interest">提交时间：{{completeList.date}}</div>
        </div>
        <!-- 评价内容 -->
        <div class="evalute_range">
          <div class="evalute_title complete_title">我的兴趣</div>
          <div class="evalute_complete">{{completeList.interest?completeList.interest:"暂无评价"}}</div>
        </div>
        <div class="evalute_range">
          <div class="evalute_title complete_title">我擅长的技能</div>
          <div class="evalute_complete">{{completeList.skill?completeList.skill:"暂无评价"}}</div>
        </div>
        <div class="evalute_range">
          <div class="evalute_title complete_title">我不擅长的技能</div>
          <div class="evalute_complete">{{completeList.unskill?completeList.unskill:"暂无评价"}}</div>
        </div>
      </div>
      <!-- 他人眼中的我 -->
      <div class="self_evalution">
        <!-- 标题 -->
        <div class="self_title">二.他人眼中的我</div>
        <!-- 评价内容 -->
        <div class="evalute_range">
          <div class="evalute_title complete_title">家长</div>
          <div class="evalute_complete">{{completeList.parent?completeList.parent:"暂无评价"}}</div>
        </div>
        <div class="evalute_range">
          <div class="evalute_title complete_title">老师</div>
          <div class="evalute_complete">{{completeList.teacher?completeList.teacher:"暂无评价"}}</div>
        </div>
        <div class="evalute_range">
          <div class="evalute_title complete_title">同学</div>
          <div class="evalute_complete">{{completeList.classmate?completeList.classmate:"暂无评价"}}</div>
        </div>
      </div>
      <!-- 荣誉 -->
      <div class="self_evalution">
        <!-- 标题 -->
        <div class="self_title">三.荣誉及获奖情况</div>
        <!-- 评价内容 -->
        <div class="evalute_range">
          <div class="evalute_complete">{{completeList.honour?completeList.honour:"暂无评价"}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Notification } from "element-ui";
import { post } from "@/api/http";
export default {
  data() {
    return {
      isBot: "",
      textarea: "",
      textarea1: "",
      textarea2: "",
      textarea3: "",
      textarea4: "",
      textarea5: "",
      textarea6: "",
      termList: [],
      completeList: "",
      id: "",
      groupId: "",
      allowUpdate: ""
    };
  },
  methods: {
    //   边框
    changeBot(index) {
      this.isBot = index;
      this.id = index;
      this.termSummary();
    },
    // 提交
    // 学期总结更新
    submit() {
      console.log(this.textarea.length)
      if (
        this.textarea.trim().length >0 &&
        this.textarea1.trim().length >0 &&
        this.textarea2.trim().length >0 &&
        this.textarea3.trim().length >0 &&
        this.textarea4.trim().length >0 &&
        this.textarea5.trim().length >0 &&
        this.textarea6.trim().length >0
      ) {
        let url = "/api/student/setTermSummary";
        let params = {
          id: this.id,
          interest: this.textarea,
          skill: this.textarea1,
          unskill: this.textarea2,
          parent: this.textarea3,
          teacher: this.textarea4,
          classmate: this.textarea5,
          honour: this.textarea6
        };
        post(url, params).then(res => {
          Notification.info({
            title: "提示",
            message: "提交成功",
            duration: 1500
          });
        });
      } else {
        Notification.info({
          title: "提示",
          message: "请填写完整信息",
          duration: 1500
        });
      }
    },
    // 学期总结
    termSummary() {
      let url = "/api/student/termSummary";
      let params = {
        id: this.id
      };
      post(url, params).then(res => {
        this.allowUpdate = res.allow_update;
        this.completeList = res.user_summary;
        this.textarea = res.user_summary.interest;
        this.textarea1 = res.user_summary.skill;
        this.textarea2 = res.user_summary.unskill;
        this.textarea3 = res.user_summary.parent;
        this.textarea4 = res.user_summary.teacher;
        this.textarea5 = res.user_summary.classmate;
        this.textarea6 = res.user_summary.honour;
      });
    },
    // 获取学期列表
    getTermList: function() {
      let url = "/api/test/getTermList";
      post(url)
        .then(res => {
          this.termList = res;
          for(let obj of res){
            if(obj.this_term == 1){
              this.isBot = obj.id;
              this.id = obj.id;
            }
          }
          this.termSummary();
          for (var obj of this.termList) {
            if (obj.term == "first") {
              obj.term = "第一学期";
            } else if (obj.term == "second") {
              obj.term = "第二学期";
            }
          }
        })
        .catch(err => {
          console.log("err=" + err);
        });
    }
  },
  mounted() {
    this.getTermList();
    this.groupId = localStorage.getItem("groupId");
  }
};
</script>
<style scoped>
/* 按钮 */
@import "../../../style/btn.css";
/* 学期 */
@import "../../../style/term.css";

.term_summary {
  background-color: #fff;
}

/* 个人信息 */
.term_personal {
  padding: 0 27px;
}

/* 自我评价 */
.self_evalution {
  margin-top: 27px;
}

/* 标题 */
.self_title {
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 14px;
}

/* 评价范围 */
.evalute_range {
  text-align: left;
  margin-bottom: 36px;
}

.evalute_title {
  margin-bottom: 12px;
  font-size: 16px;
  color: #5b5e63;
}

/* 星 */
.term_star {
  color: #f44a5e;
}

/* 提交按钮 */
.second_btn {
  margin-top: 44px;
  margin-bottom: 48px;
}

.evalute_complete {
  color: #8c9198;
  font-size: 14px;
}

/* .complete_title {
  color: #409eff;
} */
.submit_time {
  font-weight: 400;
  font-size: 14px;
  color: #5b5e63;
}
</style>