
<style>
  .prepareclassDetails{
    height: 100%;
    margin: 0;

  }
  .prepareclassDetails .page-body{
      margin: 5px!important;
  }
  .prepareclassDetails .q-table__title{
    font-size: 16px;
    font-family: perfectFont;
    color: #000000;
    font-weight: bold;
  }
  .prepareclassDetails .comment{
    height: 600px;
    overflow: auto;
    padding:0 15px;
  }
  .prepareclassDetails .comment-item{
    border-bottom: 1px solid #E2E2E2;
    padding: 20px 0;
  }
  .prepareclassDetails .c-i-t-l{
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: rgba(41, 97, 254, 0.2);
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #2961FE;
    font-weight: bold;
    font-family: perfectFont;
  }
  .prepareclassDetails .c-i-t-r{
    flex:1;
    height: 40px;
    justify-content: space-between;
    font-size: 14px;
    color: #2D2D2D;
    margin-left: 10px;
  }
  .prepareclassDetails .c-i-Comment{
    font-size: 14px;
    color: #2D2D2D;
    margin-top: 18px;
  }
  .prepareclassDetails .pl{
    background: #ffffff;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #E2E2E2;
    padding: 15px;
    font-size: 13px;
  }
  .prepareclassDetails .ratestyle{
    margin-left: 10px;
  }
  .prepareclassDetails .beike-jan{
    width: 15px;
  }
  .prepareclassDetails .marginl-15{
    margin-left: 15px;
  }
  .prepareclassDetails .margint-15{
    margin-top: 15px;
  }
  .prepareclassDetails .jan-l{
    width: 3px;
    height: 12px;
    background: #3FC4FF;
  }
  .prepareclassDetails .text12-o{
    font-size: 12px;
    color: #111111;
  }
  .prepareclassDetails .text12-o p{
    margin:0;
  }
  .prepareclassDetails .text12-n{
    font-size: 12px;
    color: #999999;
  }
  .prepareclassDetails .text14-o{
    font-size: 14px;
    color: #2D2D2D;
  }
  .prepareclassDetails .text-title{
    font-size: 14px;
    color: #111111;
  }
  .prepareclassDetails .text14-l{
    font-size: 12px;
    color: #2961FE;
  }
  .comment::-webkit-scrollbar {
    display: none; 
  }
  .prepareclassDetails .width70{
    width: 70px;
  }
</style>

<template>
  <div class="row prepareclassDetails">
    <div class="page-body col">
      <div class="q-table__title">备课内容</div>
      <div style="width: 100%;">
        <div class="row" style="margin-top: 10px;align-items: center">
          <div class="beike-jan">
            <div class="jan-l"></div>
          </div>
          <div class="row" style="font-size: 14px;color: #000000;font-weight: bold;font-family: perfectFont">
            教案·{{data.ClassId}}班
            <span class="text12-o marginl-15" style="line-height: 21px;font-weight: inherit">{{data.LessonPlan}}·第{{data.CourseNum}}课</span>
          </div>
        </div>
        <div class="row marginl-15 margint-15">
          <div class="row">
            <span class="text12-n">时间：</span>
            <span class="text12-o">{{data.WorkDate}} ({{data.WeekStr}}) {{data.DayTime}}</span>
          </div>
          <div class="row" style="margin-left: 100px">
            <span class="text12-n">担当者：</span>
            <span class="text12-o">{{data.TeacherName}}</span>
          </div>
        </div>
        <div class="marginl-15 margint-15 ">
          <div class="text-title">指導内容</div>
          <div class="marginl-15 margint-15 row" style="align-items: flex-start" v-for="(item,index) in data.LessonPlanList" :key="index">
            <div class="text12-n width70">{{item.CourseName}}：</div>
            <div class="text14-o " style="flex:1">{{item.CourseTitle}}</div>
          </div>

        </div>
        <div class="marginl-15 margint-15 ">
          <div class="text-title">指導項目</div>
          <div class="marginl-15 margint-15 row" style="align-items: flex-start" v-for="(item,index) in data.LessonPlanList" :key="index">
            <div class="text12-n width70">{{item.CourseName}}：</div>
            <div class="text14-o" style="flex:1" v-for="(x,y) in item.LessonPlanProjectsList" :key="y" >
              <div v-html="x.ProjectContent">

              </div>
            </div>

          </div>
        </div>

        <div class="marginl-15 margint-15 ">
          <div class="text-title">上课内容</div>
          <div class="marginl-15 margint-15 row" style="align-items: flex-start;flex-wrap: nowrap" v-for="(item,index) in data.LessonPlanList" :key="index">
            <div class="text12-n width70">{{item.CourseName}}：</div>
            <div class="text14-o" style="flex:1">
              <div class="column"  v-for="(x,y) in item.LessonPlanDetailsList" :key="y">
                <div class="text14-l">{{x.Duration}}分钟-{{x.DurationEndTime}}</div>
                <div class="text14-o" v-html="x.ProjectContent"></div>
                <template v-if="data.IsEditSummary>0">
                  <div v-if="x.Summary" style="width: 100%;background: #F0F5FB;border-radius: 5px;padding:10px;margin-bottom:20px;">
                    {{x.Summary}}
                  </div>
                </template>
                <template v-else>
                  <div style="width: 100%;background: #F0F5FB;border-radius: 5px;margin-bottom:20px;">
                    <q-input
                      style="background:#F0F5FB ;font-size: 12px"
                      v-model="x.Summary"
                      label="课后总结"
                      type="textarea"
                      filled
                      clearable
                      autogrow
                      :disable="AccountType||!isCanEdit"
                    />
                  </div>
                </template>
              </div>

            </div>
          </div>
        </div>
        <q-btn color="accent" size="sm" class="q-mr-md marginl-15 margint-15" label="提交" @click="saveOrderInfo()" :loading="Dloading" 
          v-if="(AccountType==false&&data.IsEditSummary<=0)&&isUpData"/>


      </div>
    </div>

    <div class="col-3" style="position: relative;overflow: hidden;border-radius: 6px;background: #FFF;margin: 5px;height: 800px">
      <div class="q-table__title" style="padding: 15px;">评价</div>

      <div class="comment" >
        <div class="row" style="width: 100%;height: 50px;align-items: center;justify-content: center;font-size: 16px;color: #999999" v-if="CommentList.length==0">
          暂无评论
        </div>
        <div class="comment-item" v-for="(item,index) in CommentList" :key="index" v-if="CommentList.length>0">
          <div class="row">
<!--              <div class="c-i-t-l row">{{item.CreateByName.substr(0, 1)}}</div>-->
              <q-avatar size="35px" rounded color="primary" text-color="white">
                <img :src="userInfo.UserIcon" v-if="item.UserIcon">
                <span v-else>{{item.CreateByName.substring(0,1)}}</span>
              </q-avatar>
              <div class="c-i-t-r column">
                <div class="row" style="align-items: center">
                  <span style="margin-right: 10px">{{item.CreateByName}}</span>
                  <q-rating
                    v-model="item.Score"
                    size="1em"
                    v-if="item.Score!=-1"
                    icon="thumb_up"
                    readonly
                  />
                </div>
                <span style="font-size: 12px;color: #999999">
                  {{item.CreateTimeStr}}
                </span>
              </div>
          </div>
          <div class="c-i-Comment">
            {{item.Comment}}
          </div>
        </div>
      </div>
<!--       评论区域-->
      <div class="pl column">
        <div class="row" style="align-items: center">
          <template v-if="Score!=-1">
            <span style="margin-right: 5px">备课打分：</span>
            <q-rating
              v-model="plmsg.Score"
              size="1.5em"
              icon="thumb_up"
            />
            <span class="ratestyle" v-if="plmsg.Score==5">非常满意</span>
            <span class="ratestyle" v-if="plmsg.Score==4">满意</span>
            <span class="ratestyle" v-if="plmsg.Score==3">感觉一般</span>
            <span class="ratestyle" v-if="plmsg.Score==2">不满意</span>
            <span class="ratestyle" v-if="plmsg.Score==1">非常不满意</span>
          </template>
        </div>
        <div class="row" style="margin-top: 20px;align-items: center">
          <q-input filled v-model="plmsg.Comment" label="写下你想评价的内容"  style="flex:1"/>
          <img src="../../assets/images/course/fasong.png" alt="" style="width: 35px;height: 35px;margin-left: 20px" @click="btnpl()">
        </div>
      </div>


    </div>
  </div>

</template>

<script>
  import {
    getClassLessPlan,
    getLessonCommentList,
    setLessonComment,
    updateClassLessPlan,
    GetNowUserLessonComment
  } from '../../api/course/class';
    export default {
        name: "prepareclassDetails",
      data(){
          return{
            msg:{
              ClassId:0,
              School_Id:0,
              ClassPlanId:0,
            },
            Dloading:false,
            plmsg:{
              Comment:'',
              Score:5,
              LessonPlanId:0,
              ClassId:0,
              ClassPlanId:0,
              TeacherId:0
            },
            data:{},
            CommentList:[],
            AccountType:true,
            scoreMsg:{
              ClassPlanId:0,
              ClassId:0
            },
            Score:0,
            nowDate:'', //现在时间
            isCanEdit:false,
            isUpData:true
          }
      },
      created(){

      },
      mounted(){
        this.msg.ClassId = this.$route.query.ClassId ? this.$route.query.ClassId:0;
        this.msg.ClassPlanId = this.$route.query.ClassPlanId ? this.$route.query.ClassPlanId:0;
        this.plmsg.ClassId = this.$route.query.ClassId ? this.$route.query.ClassId:0;
        this.plmsg.ClassPlanId = this.$route.query.ClassPlanId ? this.$route.query.ClassPlanId:0;
        this.scoreMsg.ClassPlanId = this.$route.query.ClassPlanId ? this.$route.query.ClassPlanId:0;
        this.scoreMsg.ClassId = this.$route.query.ClassId ? this.$route.query.ClassId:0;
        let userInfo = this.getLocalStorage();
        this.AccountType = userInfo.AccountType==2?false:true; //是否是教师
        this.getList()//备课内容
        this.getCommentList()//评价
        this.getUserComment();

        var today=new Date();
        var y=today.getFullYear();
        var m=today.getMonth()+1;
        var d=today.getDate();
        var h=today.getHours();
        var i=today.getMinutes();
        var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
        this.nowDate = y+'-'+m+'-'+d+' '+ h +':'+i+':'+s;
      },
      methods:{
        //获取评论显示分数
        getUserComment(){
          GetNowUserLessonComment(this.scoreMsg).then(res => {
            if (res.Code == 1) {
              this.Score = res.Data.Score;
              this.plmsg.Score = this.Score;
            }
          })
        },
        getList() {
          getClassLessPlan(this.msg).then(res => {
            if (res.Code == 1) {
              this.data = res.Data;
              this.plmsg.TeacherId = res.Data.UpdateBy;
              var beginTimes =this.nowDate.replace(/-/g,"/"); //当前
              var endTimes =this.data.ClassEndTime.replace(/-/g,"/"); //结束
              var a =(Date.parse(endTimes)-Date.parse(beginTimes))/3600/1000;
              if(a<0){  
                this.isCanEdit=true; //可以编辑
              }
              if(a>0){
                this.isUpData=false;
              }
            }
          })
        },
        getCommentList(){
          getLessonCommentList({
            ClassId:this.msg.ClassId,
            ClassPlanId:this.msg.ClassPlanId,
          }).then(res => {
            if (res.Code == 1) {
                this.CommentList = res.Data
            }
          })
        },
        btnpl(){
          if(this.plmsg.Comment==''){
            this.$q.notify({
              type: 'negative',
              position: 'top',
              timeout: 1500,
              message: `请输入评论内容`
            })
            return
          }
          if(this.plmsg.Score==0 || this.plmsg.Score==''){
            this.$q.notify({
              type: 'negative',
              position: 'top',
              timeout: 1500,
              message: `请对备课评分`
            })
            return
          }

          setLessonComment(this.plmsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '评论成功',
                position: 'top'
              })
              this.plmsg.Score = 5;
              this.plmsg.Comment = '';
              this.getUserComment()
              this.getCommentList()
             

            }
          })
        },
        saveOrderInfo(){
          let count=0,LessonNum=0;
          this.data.LessonPlanList.forEach(x=>{
            x.LessonPlanDetailsList.forEach(y=>{
              if(y.Summary==null||y.Summary==''){
                count++;
              }
            })
            LessonNum+=x.LessonPlanDetailsList.length;
          })
          if(count==LessonNum){
            this.$q.notify({
              type: 'negative',
              position: 'top',
              timeout: 1500,
              message: `请至少填写一项课后总结`
            })
            return
          }
          updateClassLessPlan(this.data).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
              this.getList();
            }
          })
        }
      }
    }
</script>
