
<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;
  }
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .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>

                <div style="width: 100%;background: #F0F5FB;border-radius: 5px;margin: 10px 0">

                  <q-input
                    style="background:#F0F5FB ;font-size: 12px"
                    v-model="x.Summary"
                    label="课后总结"
                    type="textarea"
                    filled
                    clearable
                    autogrow
                    :disable="AccountType"
                  />
                </div>
              </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"/>


      </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"
                    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">
          <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>
        </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
  } 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,
            },
            data:{},
            CommentList:[],
            AccountType: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;
        let userInfo = this.getLocalStorage();
        this.AccountType = userInfo.AccountType==2?false:true; //是否是教师

        this.getList()//备课内容
        this.getCommentList()//评价
      },
      methods:{
        getList() {
          getClassLessPlan(this.msg).then(res => {
            if (res.Code == 1) {
              this.data = res.Data
            }
          })
        },
        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.getCommentList()
            }
          })
        },
        saveOrderInfo(){
          this.Dloading= true;
          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'
              })
            }
          })
        }
      }
    }
</script>
