<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 {
    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 .width50 {
    width: 50px;
  }

  .prepareTopTitle {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .prePare_Line {
    width: 3px;
    height: 14px;
    background-color: #3FC4FF;
    margin-right: 10px;
  }

  .preSecond {
    font-size: 36px;
    color: #000000;
    position: relative;
    margin: 20px 0;
  }

  .preSecond:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 120px;
    height: 14px;
    background: #3FC4FF;
    position: absolute;
    left: 0;
    top: 34px;
    opacity: 0.8;
  }

  .prePare_Content {
    /* width:430px; */
    min-height: 100px;
    height: auto;
    background-color: #F0F5FB;
    padding: 20px;
    margin: 20px auto;
    font-family: '微软雅黑' !important;
  }

  .prePare_Content h6,
  .prePare_Content h5,
  .prePare_Content h4,
  .prePare_Content h3,
  .prePare_Content h2,
  .prePare_Content h1 {
    font-size: unset !important;
    line-height: unset !important;
    letter-spacing: unset !important;
  }

  .prepareclassDetails .el-upload--picture-card {
    width: 120px;
    height: 120px;
    line-height: 130px;
  }

  .prepareDuty {
    display: inline-block;
    width: 100px;
    height: 100px;
    font-size: 50px;
    border: 1px dashed #d9d9d9;
    line-height: 100px;
  }

  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #8c939d;
    position: relative;
    overflow: hidden;
  }

  .pre-ImgDiv {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-block;
  }
  .Pre-ComBg{
    background-color: #e8e8e8;
  }
</style>

<template>
  <div class="row prepareclassDetails">
    <div class="page-body col"  style="height: calc(100% - 30px) !important;" v-if="data.Chapter">
        <q-scroll-area
            :thumb-style="thumbStyle"
            :content-style="contentStyle"
            :content-active-style="contentActiveStyle"
            class="full-width full-height"
        >
            <div class="row">
                <div class="prepareTopTitle q-table__title col">
                    <div class="prePare_Line"></div>
                    <div>{{data.CourseName}}</div>
                </div>
                <div class="prepareTopTitle q-table__title" v-if="data.Chapter && data.Chapter.length>0">
                    <div class="prePare_Line"></div>
                    <div>{{data.Chapter[0].ChapterName}}</div>
                </div>
            </div>
            <div v-if="data.Chapter && data.Chapter.length>0">
                <div v-for="(chapter,i) in data.Chapter[0].ChildList">
                    <div class="preSecond">
                        {{chapter.ChapterName}}
                    </div>
                    <div class="prepareTopTitle q-table__title">
                        <div class="prePare_Line" style="background-color:#2961FE"></div>
                        <div>章节学习内容</div>
                    </div>
                    <div class="prePare_Content" v-if="chapter.ChapterContent!=''" v-html="decodeURIComponent(chapter.ChapterContent)"></div>
                    <div class="prePare_Content text-center q-pa-lg" v-else>暂无内容</div>
                    <div class="prepareTopTitle q-table__title">
                        <div class="prePare_Line" style="background-color:#2961FE"></div>
                        <div>教学目标</div>
                    </div>
                    <div class="prePare_Content" style="background:#F7F0FB" v-if="chapter.Objectives!=''" v-html="decodeURIComponent(chapter.Objectives)">
                    </div>
                    <div class="prePare_Content text-center q-pa-lg" style="background:#F7F0FB" v-else>暂无内容</div>
                    <div class="prepareTopTitle q-table__title">
                        <div class="prePare_Line" style="background:#2961FE"></div>
                        <div>学生学习要求</div>
                    </div>
                    <div class="prePare_Content" style="background:#FBF6F0" v-if="chapter.Requirement!=''" v-html="decodeURIComponent(chapter.Requirement)">
                    </div>
                    <div class="prePare_Content text-center q-pa-lg" style="background:#FBF6F0" v-else>暂无内容</div>
                </div>
            </div>
            <div v-else class="q-pa-lg bg-grey-2 rounded-borders q-my-lg">暂无章节信息</div>
         </q-scroll-area>
    </div>
    <div class="page-body col" style="height: calc(100% - 30px) !important;">
      <q-scroll-area
            :thumb-style="thumbStyle"
            :content-style="contentStyle"
            :content-active-style="contentActiveStyle"
            class="full-width full-height"
        >
        <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="margint-15 row" style="align-items: flex-start"
              v-for="(item,index) in data.LessonPlanList" :key="index" v-if="index==0">
              <div class="text14-o q-pa-md Pre-ComBg rounded-borders" style="flex:1">{{item.CourseTitle}}</div>
            </div>

          </div>
          <div class="marginl-15 margint-15 ">
            <div class="text-title">教学难点</div>
            <div class="margint-15" style="align-items: flex-start"
              v-for="(item,index) in data.LessonPlanList" :key="index" v-if="index==0">
              <!-- <div class="text12-n width50">{{item.CourseName}}：</div> -->
              <div class="text14-o q-pa-md Pre-ComBg rounded-borders"  v-for="(x,y) in item.LessonPlanProjectsList" :key="y" v-if="x.ProjectContent!=''">
                <div v-html="x.ProjectContent">

                </div>
              </div>

            </div>
          </div>
          <div class="marginl-15 margint-15 ">
            <div class="text-title">教学流程</div>
            <div class="margint-15 row" style="align-items: flex-start;flex-wrap: nowrap"
              v-for="(item,index) in data.LessonPlanList" :key="index" v-if="index==0">
              <!-- <div class="text12-n width50">{{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" style="margin-bottom:10px;">{{x.Duration}}分钟-{{x.DurationEndTime}}</div>
                  <div class="text14-o q-pa-md Pre-ComBg rounded-borders" 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>
          <div class="marginl-15">
            <div class="row" style="margin: 20px 0;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">
                课后总结
              </div>
            </div>
            <template v-if="LessonPlanNum>0&&LessonPlanSummaryNum==0">
              <q-input type="textarea" filled label="课后总结" v-model="conclusion" :rows="3" style="flex:1;margin-top:20px;" />
              <div style="display:flex;flex-wrap: wrap;margin-top:20px;">
                <div v-if="ImgList.length>0" v-for="(item,index) in ImgList">
                  <div class="pre-ImgDiv">
                    
                    <el-image 
                      style="height: 100%;height:100%"
                      :src="item" 
                      fit="cover"
                      :preview-src-list="ImgList"></el-image>
                    <q-btn size="7px" @click="deleteItemImg(index)" style="position:absolute;right:-5px;top:-5px;" round
                      color="red" icon="iconfont icon-guanbi1" />
                  </div>
                </div>
                <el-upload action="" class="avatar-uploader prepareDuty" :before-upload="uploadFile"
                  :show-file-list="false">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </template>
            <template v-else>
              <div class="text14-o q-pa-md Pre-ComBg rounded-borders" style="margin-top:10px;background-color:rgb(251, 246, 240)">{{conclusion}}</div>
              <div style="display:flex;flex-wrap: wrap;margin-top:20px;">
                <div v-if="ImgList.length>0" v-for="(item,index) in ImgList">
                  <div class="pre-ImgDiv">
                  <el-image 
                    style="height: 100%;height:100%"
                    :src="item" 
                    fit="cover"
                    :preview-src-list="ImgList"></el-image>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <q-btn color="accent" size="sm" v-if="LessonPlanNum>0&&LessonPlanSummaryNum==0&&isShowBtn" class="margint-15" @click="saveOrderInfo()"
            style="margin:20px 0 0 15px;width:97%;height:40px;" label="提交" />

          <!-- <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>
      </q-scroll-area>
    </div>

    <div class="col-3"
      style="position: relative;overflow: hidden;border-radius: 6px;background: #FFF;margin: 5px;height: calc(100% - 30px) !important;">
      <div class="q-table__title" style="padding: 15px;">评价</div>
      <q-scroll-area
            :thumb-style="thumbStyle"
            :content-style="contentStyle"
            :content-active-style="contentActiveStyle"
            class="full-width"
            style="height:calc(100% - 161px);"
        >
        <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>
      </q-scroll-area>
      <!--       评论区域-->
      <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;cursor:pointer;"
            @click="btnpl()">
        </div>
      </div>


    </div>
  </div>

</template>

<script>
  import {
    getClassLessPlan,
    getLessonCommentList,
    setLessonComment,
    updateClassLessPlan,
    GetNowUserLessonComment
  } from '../../api/course/class';
  import {
    UploadSelfFile,
  } from '../../api/common/common'
  export default {
    name: "prepareclassDetails",
    data() {
      return {
        contentStyle: {},
        contentActiveStyle: {},
        thumbStyle: {
            right: '2px',
            borderRadius: '5px',
            backgroundColor: '#027be3',
            width: '5px',
            opacity: 0.75
        },
        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,
        conclusion: '', //课后总结
        ImgList: [], //总结图片数组
        LessonPlanNum:0,
        LessonPlanSummaryNum:0,
        TeacherId:0,
        isShowBtn:false
      }
    },
    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;

      this.LessonPlanNum = this.$route.query.LessonPlanNum ? this.$route.query.LessonPlanNum : 0;
      this.LessonPlanSummaryNum = this.$route.query.LessonPlanSummaryNum ? this.$route.query.LessonPlanSummaryNum : 0;
      this.TeacherId = this.$route.query.TeacherId ? this.$route.query.TeacherId : 0;


      let userInfo = this.getLocalStorage();
      this.AccountType = userInfo.AccountType == 2 ? false : true; //是否是教师
      let AccountId = userInfo.AccountId;
      if(AccountId==this.TeacherId){
        this.isShowBtn=true;
      }else{
        this.isShowBtn=false;
      }
      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) {
            let data=res.Data;
            if (data.Chapter && data.Chapter.length>0) {
                if(!data.Chapter[0].ChildList || data.Chapter[0].ChildList.length==0){
                    console.log(data.Chapter[0].ChildList.length)
                    data.Chapter[0].ChildList=[]
                    data.Chapter[0].ChildList.push(data.Chapter[0])
                }
                this.chapters = data.Chapter
            }
            this.data = 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;
            }
            if(this.data.LessonPlanList&&this.data.LessonPlanList.length>0){
              this.conclusion = this.data.LessonPlanList[0].Summary;
              this.ImgList = this.data.LessonPlanList[0].ProjectPicList;
              // this.isShowBtn=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() {
        if(this.data.LessonPlanList&&this.data.LessonPlanList.length>0){
          this.data.LessonPlanList[0].Summary = this.conclusion;
          this.data.LessonPlanList[0].ProjectPicList = this.ImgList;
        }
        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();
            var tempStr = '/course/teacherLesson'
            this.$router.push({
              path: tempStr
            });
          }
        })
      },
      uploadFile(files) {
        UploadSelfFile('studentIcon', files, res => {
          if (res.Code == 1) {
            this.ImgList.push(res.FileUrl);
          }
        })
      },
      //删除图片
      deleteItemImg(index) {
        this.ImgList.splice(index, 1);
      }
    }
  }

</script>
