<template >
  <div class='m-container'>
    <h2>
      <!-- <div class="squrt"></div> -->
      <el-page-header @back="goBack"
                      :content="studentName">
      </el-page-header>
    </h2>

    <el-card class="box-card"
             v-for="(card,index) in dataList"
             :key='index+"index"'
             style="width:1000px">
      <p class="timeTitle"> {{card.monday}} - {{card.sunday}}</p>
      <div class="listWrap"
           v-for="(item,subIndex) in card.data"
           :key="subIndex">
        <div class="m-row">
          <div class="textWrap">
            <p class="title">类型 : </p>
            <p class="contant">{{item.homeworkType=='HOMEWORK'?'课堂作业':'课外训练'}}</p>
          </div>
          <div class="
               textWrap">
            <p class="title">布置时间 : </p>
            <p class="contant"
               v-if="item.homeworkCreateTime"
               style="width:150px">{{ item.homeworkCreateTime | dateForMinFormat}}</p>
          </div>
          <div class="textWrap">
            <p class="title">是否点评 : </p>
            <p class="contant">{{item.isReplied?'是':'否'}}</p>
          </div>
        </div>
        <div class="m-row"
             v-if="item.homeworkType == 'HOMEWORK'">
          <div class="textWrap">
            <p class="title">课程组 : </p>
            <p class="contant">{{item.groupName}}</p>
          </div>
          <div class="textWrap">
            <p class="title">上课时间 : </p>
            <p class="contant"
               style="width:150px"
               v-if="item.courseStartTime">{{item.courseStartTime |  dateForMinFormat}}</p>
          </div>
        </div>
        <div class="m-row">
          <div class="textWrap">
            <p class="title">指导老师 : </p>
            <p class="contant">{{item.teacherName}}</p>
          </div>
          <div class="textWrap">
            <p class="title">提交时间 : </p>
            <p class="contant"
               v-if="item.submitTime"
               style="width:150px">{{item.submitTime | dateForMinFormat}}</p>
          </div>

        </div>
        <div class="arrowBox"
             @click="getComment(item,index,subIndex)">
          <div class="border">
            <i :class="item.up?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
          </div>

        </div>

        <div style="margin-top: 20px;">
          <el-collapse-transition>
            <div v-show="item.up">
              <div class="transition-box">
                <div class="cell">
                  <p style="width:80px; padding-top:4px;">作业内容:</p>
                  <el-input type="textarea"
                            :disabled='true'
                            :rows="3"
                            :value="item.content"
                            style="font-size:16px"
                            placeholder="老师布置的作业"></el-input>
                </div>
                <div class="cell">
                  <p style="width:80px;">查看作业:</p>
                  <div v-for='(some,index) in item.homeWork'
                       :key="index">
                    <p class="homeWork"
                       v-if="some"
                       @click="openVideo(some)">作业{{(index+1)}}</p>
                  </div>

                </div>
              </div>
              <div class="msgWrap">
                <div class="msgLi"
                     v-for='(msg,index) in activeCommit'
                     :key="index">
                  <div class="info">
                    <p>{{msg.userName}}</p>
                    <p style="color:#999"
                       v-if="msg.createTime">{{msg.createTime | dateForMinFormat}}</p>
                  </div>
                  <p class="contant"
                     v-if='msg.msgType=="TXT"'>{{msg.content}}</p>
                  <el-image style="width: 100px; height: 100px"
                            fit='cover'
                            v-if='msg.msgType=="IMG"'
                            :src="msg.content"
                            :preview-src-list="[msg.content]">
                  </el-image>
                  <p v-if='msg.msgType=="VC"'
                     class="contant"
                     style="color:#1890FF"
                     @click="openAideo(msg.content)">播放语音</p>
                </div>
              </div>
            </div>
          </el-collapse-transition>
        </div>
        <el-divider></el-divider>
      </div>
    </el-card>
    <el-dialog title="查看作业"
               width="360px"
               append-to-body
               :visible.sync="workVisible">
      <!-- activeUrl -->
      <video style="width:320px;"
             id='video'
             :src="activeUrl"
             ref="dialogVideo"
             controls="controls">您的浏览器不支持视频播放</video>
    </el-dialog>
    <el-dialog title="查看评论"
               width="680px"
               append-to-body
               :visible.sync="comVisible">
      <audio id='audio'
             controls
             style="width:640px;"
             :src="comUrl"
             ref="dialogVideo">您的浏览器不支持视频播放</audio>
    </el-dialog>
  </div>
</template>
<script>
import { findServiceStudentDetail, findStudentHomeworkComments } from "@/api/operateManager";
export default {
  data () {
    return {
      studentId: null,
      monday: null,
      sunday: null,
      studentName: null,
      show3: false,
      dataList: [],
      activeCommit: [],
      activeUrl: null,
      workVisible: false,
      comUrl: null,
      comVisible: null,
      Fsearch: null,
      Frules: null
    }
  },
  mounted () {
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.studentId = this.$route.query.studentId;
      this.studentName = this.$route.query.studentName;
      this.monday = this.$route.query.startTime;
      this.sunday = this.$route.query.endTime;
      // 判断是否带缓存参数
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules
      }
      findServiceStudentDetail({ studentId: this.studentId, monday: this.monday, sunday: this.sunday, rows: 9999 }).then(res => {
        if (res.code == 200) {
          this.dataList = res.data;
          for (let i in this.dataList) {
            this.dataList[i].sunday = this.getNowDateAndSunday(this.dataList[i].monday)
            this.dataList[i].data = this.dataList[i].data.map(res => {
              res.up = false;
              res.homeWork = res.attachments.split(',')
              return res;
            });
          }
          // this.dataList = res.data.rows.
        }
      })

    },
    goBack () {
      this.$router.push({ path: '/operateManager/serverIndexList', query: { search: this.Fsearch, rules: this.Frules } })
    },
    getComment (item, index, subIndex) {
      // 数据处理
      if (item.up) {
        item.up = false;
        this.$forceUpdate()
        // item.up = false;
      } else {
        let extra;
        if (item.homeworkType == 'EXTRA') {
          extra = 1;
        } else {
          extra = 0;
        }

        findStudentHomeworkComments({ studentCourseHomeworkId: item.studentHomeworkId, extra, rows: 9999 }).then(res => {
          if (res.code == 200) {
            this.activeCommit = res.data.rows;
            // item.up = false
            for (let i in this.dataList) {
              this.dataList[i].data = this.dataList[i].data.map(res => {
                res.up = false;
                return res;
              });
            }
            item.up = true;
          }
        })
      }


    },
    openAideo (src) {
      this.comUrl = src;
      this.comVisible = true;
    },
    openVideo (src) {
      this.activeUrl = src;
      this.workVisible = true;
    },
    getNowDateAndSunday (time) {
      let timestamp = new Date(time.replace(/-/g, "/")).getTime();
      let serverDate = new Date(time);

      let num = 7 - serverDate.getDay();
      if (num == 7) {
        num = 0;
      }
      let sundayTiem = timestamp + num * 24 * 60 * 60 * 1000;
      let SundayData = new Date(sundayTiem);
      //年
      let tomorrowY = SundayData.getFullYear(); //月
      let tomorrowM =
        SundayData.getMonth() + 1 < 10
          ? "0" + (SundayData.getMonth() + 1)
          : SundayData.getMonth() + 1;
      //日
      let tomorrowD =
        SundayData.getDate() < 10
          ? "0" + SundayData.getDate()
          : SundayData.getDate();
      let str = tomorrowY + "-" + tomorrowM + "-" + tomorrowD;
      return str;
    },

  },
  watch: {
    workVisible (val) {
      if (!val) {
        let video = document.querySelector('#video');
        video.pause();
        video.currentTime = 0;
        this.activeUrl = null;
      }
    },
    comVisible (val) {
      if (!val) {
        let audio = document.querySelector('#audio');
        audio.pause();
        audio.currentTime = 0;
        this.comUrl = null
      }
    },
  }

}
</script>
<style lang='scss' scoped>
.timeTitle {
  margin-bottom: 20px;
}
.box-card {
  margin-bottom: 30px;
  .listWrap {
    cursor: pointer;
    margin-bottom: 50px;
    .m-row {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 14px;
      .textWrap {
        margin-right: 150px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        p {
          line-height: 30px;
        }
        .title {
          width: 80px;
          margin-right: 10px;
          text-align: left;
        }
        .contant {
          text-align: left;
          width: 150px;
        }
      }
    }
    .arrowBox {
      display: flex;
      flex-direction: row;
      justify-content: center;

      .border {
        margin-top: 20px;
        width: 120px;
        border: 1px solid #dedede;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 30px;
        line-height: 30px;
        i {
          font-size: 18px;
          line-height: 30px;
          color: #999;
        }
      }
    }
  }
  .cell {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 20px;
    line-height: 30px;
    font-size: 14px;
    .homeWork {
      width: 80px;
      text-align: center;
      border: 1px solid #e5e5e5;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      margin-right: 20px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .msgWrap {
    border: 1px solid #e5e5e5;
    padding: 5px 20px;
    border-radius: 5px;
    height: 300px;
    overflow: auto;
    font-size: 14px;
    .msgLi {
      padding: 10px 0;
      .info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 0 10px;
      }
      .contant {
        border-bottom: 1px solid #ededed;
        line-height: 30px;
        padding: 0 10px;
        color: #666;
      }
    }
  }
}
</style>