<template>
  <div class="cb-container">
    <div class="title" v-if="pzList.length">评课笔记</div>
    <div class="pzListBox" v-if="pzList && pzList.length">
      <div class="pzList" v-for="(pz, pzIndex) in pzList" :key="pzIndex">
        <div class="pzNavTop">
          <div>批</div>
          <div>
            {{ pz.username && pz.username.length > 8 ? pz.username.substring(0, 8) + '...' : pz.username }}的批注
          </div>
          <!--  -->
          <div class="pzDelete" @click="deletePz(pz.id)" v-if="pz.userid == userinfo.userid">删除</div>
        </div>
        <div
          @click="checkImg(getImgList(pz.content))"
          class="pzContent cont navAndImg"
          v-html="pz.content"
          v-if="pz.type == '1'"
        ></div>
        <div class="pzContent" v-if="pz.type == '2'">
          <audio :src="pz.content" controls="controls" ref="audio">
            Your browser does not support the audio element.
          </audio>
        </div>
        <div class="pzContent" v-if="pz.type == '3'">
          <img
            :src="pz.content"
            style="width: 100%; margin: 0px auto; display: block"
            @click="previewImg(pz.content)"
          />
        </div>
        <div class="time">
          <div>{{ pz.time }}</div>
          <div @click="addHf(pz)">回复</div>
        </div>

        <!-- 回复区域 -->
        <div v-for="(rep, repIndex) in replyList" :key="rep.id">
          <div v-if="rep.pid == pz.id" class="replyCss">
            <div class="replyTop">
              <div>{{ rep.username }} <van-icon name="play" /> {{ pz.username }}</div>
            </div>
            <div class="pzContent cont navAndImg" @click="checkImg(getImgList(rep.content))" v-html="rep.content"></div>
            <div class="time" style="padding: 0 0 10px 0;">
              <div>{{ rep.time }}</div>
              <div class="pzDelete" @click="deletePz(rep.id)" v-if="rep.userid == userId">
                <img
                  style="height: 20px;"
                  src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/删除1716449608309.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="noPz" v-else>
      <img src="@/assets/images/course/noPz.png" alt="" />
    </div>

    <!-- 回复弹出框 -->
    <van-popup v-model="show" @close="closeRep" closeable round class="repPopup">
      <div style="font-size: 18px;">回复</div>
      <div class="cp-box">
        <div class="cp-conent">
          <!-- <div style="height: 120px;"> -->
          <van-field v-model="repText" rows="5" type="textarea" placeholder="请输入..." />
          <!-- </div> -->
          <div style="margin-top: 10px;">
            <image-component @getImage="getImage" :imgList.sync="imgList"></image-component>
          </div>
        </div>
      </div>
      <van-button size="small" type="info" @click="repAddHf">确定</van-button>
    </van-popup>
    <commentPanel
      @setPanelVisible="setPanelVisible"
      :panelVisible="panelVisible"
      :courseid="courseid"
      :courseType="courseType"
      :taskCount="taskCount"
    ></commentPanel>
  </div>
</template>

<script>
import ImageComponent from './ImageComponent.vue'
import AudioComponent from './AudioComponent.vue'
import commentPanel from './commentPanel.vue'
import { getCoursePz, deletePz, repHf } from '@/api/course'
import { mapGetters } from 'vuex'
export default {
  props: {
    courseid: {
      type: String,
      default: ''
    },
    panelVisible: {
      type: Boolean
    },
    repCon: {
      type: Boolean
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    }
  },
  components: {
    commentPanel,
    AudioComponent,
    ImageComponent
  },
  data() {
    return {
      pzList: [],
      replyList: [],
      show: false,
      repText: '',
      info: [],
      userId: this.$store.state.user.userinfo.userid,
      type: 1,
      imgList: []
    }
  },
  computed: {
    ...mapGetters(['userinfo']),
    getImgList() {
      return function(val) {
        const srcList = [] // 定义一个数组用来接收后面的img地址

        val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function(match, capture) {
          // 查找匹配的元素   match为整个img标签  capture为src中的内容
          srcList.push(capture)
        })
        return srcList
      }
    }
  },
  watch: {
    courseType(newValue, oldValue) {
      this.getData()
    },
    taskCount(newValue, oldValue) {
      this.getData()
    },
    panelVisible(newValue, oldValue) {
      this.getData()
    },
    show(newValue, oldValue) {
      this.$emit('update:repCon', newValue)
    }
  },
  methods: {
    closeRep() {
      this.repText = ''
      this.imgList = []
    },
    // setType(type) {
    //   this.type = type
    // },
    getImage(imgList) {
      this.imgList = imgList
      this.$forceUpdate()
    },
    repAddHf() {
      let a = ''
      if (this.repText == '' && this.imgList.length == 0) {
        this.$message.error('回复不能为空！')
        return
      }
      if (this.imgList.length) {
        var img = ''
        for (var i = 0; i < this.imgList.length; i++) {
          img += "<img src='" + this.imgList[i] + "' />"
        }
        a = this.repText.replaceAll(/%/g, '%25') + img
        // console.log('a', a)
      }
      // return
      let params = [
        {
          cid: this.info.courseId,
          uid: this.userId,
          s: this.info.stage, //阶段
          t: this.info.task, //任务
          type: '1', //1文本 2录音 3 图片
          ct: 2, //1批注2评论
          pid: this.info.id, //回复的哪条评论的id
          c: !!a ? a : this.repText //回复内容
        }
      ]
      // return console.log('params', params)
      repHf(params)
        .then(res => {
          console.log('发评论', res)
          this.$message.success('回复成功')
          this.show = false
          this.repText = ''
          this.imgList = []
          this.getData()
          // this.pzList = res[0]
          // this.replyList = res[1]
          // console.log(' this.pzList', res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    addHf(val) {
      this.show = true
      this.info = val
    },
    setPanelVisible(bool) {
      this.$emit('update:panelVisible', bool)
    },
    previewImg(url) {
      this.$hevueImgPreview(url)
    },
    checkImg(list) {
      if (!list.length) {
        return
      }
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        imgList: list // 需要预览的多图数组
      })
    },
    deletePz(id) {
      this.$dialog({
        message: '确定删除此批注吗？',
        showCancelButton: true,
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            const params = [
              {
                id: id
              }
            ]
            deletePz(params)
              .then(res => {
                this.$toast({
                  message: '删除成功',
                  type: 'success'
                })
                this.getData()
                done()
              })
              .catch(err => {
                console.error(err)
                done()
              })
          } else {
            // 拦截取消操作
            done()
          }
        }
      })
    },
    getData() {
      const params = {
        cid: this.courseid,
        s: this.courseType, //阶段
        t: this.taskCount //任务
      }
      getCoursePz(params)
        .then(res => {
          this.pzList = res[0]
          this.replyList = res[1]
          console.log(' this.pzList', res)
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.cb-container {
  width: 100%;
  padding-bottom: 1.6rem;
  .cp-box {
    width: 100%;
    height: calc(100% - 1.5rem);
    /deep/ .van-cell {
      box-sizing: border-box;
      padding: 10px 0;
    }
    .type-nav {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 0.3rem;
      box-sizing: border-box;

      .type-nav-box {
        height: 100%;
        opacity: 0.5;
        transition: all 0.5s;

        + .type-nav-box {
          margin-left: 0.3rem;
        }

        &.active {
          opacity: 1;
        }
        > img {
          height: 100%;
        }
      }
    }
    .cp-conent {
      height: calc(100% - 60px);
      overflow: auto;
      font-size: 14px;
      width: 100%;
      // /deep/ .van-field__control {
      //   // height: 60px !important;
      // }
    }
    .cp-audio {
      height: calc(100% - 60px);
      position: relative;
      width: 100%;
    }
  }
  .replyCss {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 10px 16px;
    min-height: 100px;
    .replyTop {
      display: flex;
      font-size: 14px;
      align-items: center;
      justify-content: space-between;
    }
    .replyCon {
      font-size: 14px;
    }
  }
  .repPopup {
    width: 60%;
    padding: 20px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /deep/ .van-overlay {
    z-index: 20 !important;
  }
  .commentInput {
    background: #fff;
    box-shadow: 0 -1px 3px 1px #dedede82;
    height: 1.5rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .input {
      width: 95%;
      height: 70%;
      border-radius: 5px;
      background: rgb(243, 243, 243);
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 0.4rem;
      font-size: 14px;
      color: #585858;
    }
  }
  .title {
    font-size: 14px;
    width: 95%;
    margin: 10px auto 0;
  }
  .pzBox,
  .noPzBox {
    height: calc(100% - 60px);
    /* background: #ededed; */
    background: #fff;
    /* border-radius: 0 0 15px 15px; */
  }

  .noPzBox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .pzList {
    background: #f7f7f7;
    width: 95%;
    margin: 0 auto 10px;
    border-radius: 5px;
  }

  .pzNavTop {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 10px 10px 0 10px;
    align-items: center;
  }

  .pzDelete {
    cursor: pointer;
    margin-left: auto;
    font-size: 14px;
    color: rgb(135, 135, 135);
  }

  .pzNavTop > div:nth-child(1) {
    background: #3760af;
    width: 30px;
    height: 30px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    font-size: 14px;
  }

  .pzNavTop > div:nth-child(2) {
    font-size: 16px;
    color: #959595;
    margin-left: 5px;
  }

  /deep/ .pzContent {
    padding: 10px;
    word-break: break-word;
    font-size: 14px;
    > p {
      margin: 0;
    }
  }

  /deep/.navAndImg img {
    min-width: auto;
    max-width: 60%;
  }

  .pzContent audio {
    width: 100%;
    height: 1.2rem;
  }

  .pzContent audio::-webkit-media-controls-panel {
    background: #fff;
  }

  .pzListBox {
    padding-top: 15px;
    height: calc(100% - 60px);
    overflow: auto;
  }

  .noPz {
    width: 100%;
    height: 5rem;
    margin: 0 auto 0;
    display: flex;
    align-items: center;
    justify-content: center;

    > img {
      width: 3rem;
    }
  }
  .pzList .time {
    text-align: right;
    box-sizing: border-box;
    padding: 0 10px 10px 10px;
    color: #949494;
    font-size: 14px;
    display: flex;
    border-bottom: 1px #ccc solid;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
