<template>
  <div class="comment-popup-div">
    <div class="commit-popup-black" v-show="!bottomclass" @click="bottomClassChange()"></div>
    <div class="comment-popup-box" :class="bottomclass?'bottomDown':'bottomOn'">
      <div class="comment-popup-head" @click="bottomClassChange()">
        <div class="comment-popup-head-box">
          <rt-icon name="rt-xrm-comment" size="15"></rt-icon>
          <span class="comment-popup-head-text">评论</span>
          <span
            class="comment-popup-head-number"
          >{{TotalRecords==''?commentList2.length:TotalRecords}}</span>
        </div>
      </div>
      <div class="comment-popup-content">
        <rt-list ref="listWrapper" :fetch="fetchData" v-if="isrtListPage">
          <rt-list-item slot-scope="{row}">
            <div style="display: flex;align-items: center;">
              <div class="comment-popup-content-avatar">
                <rt-avatar backgroundColor="rgba(180,189,207,1)" size="36">{{row.CreatedByName[0]}}</rt-avatar>
              </div>
              <div style="display:inline-block">
                <div>
                  <span class="comment-popup-content-name">{{row.CreatedByName}}</span>
                  <span
                    class="comment-popup-content-time"
                  >{{row.ModifiedOn | moment('YYYY-MM-DD HH:mm')}}</span>
                </div>
                <div v-if="isStar" class="comment-popup-content-star">
                  <span v-for="n in row.score_value/2" :key="n" style="margin-right:3px">
                    <rt-icon name="rt-xrm-star" size="10"></rt-icon>
                  </span>
                </div>
              </div>
            </div>
            <div class="comment-popup-content-text">{{row.text}}</div>
          </rt-list-item>
        </rt-list>
        <div v-if="!isrtListPage" ref="dailycomment">
          <div style="width:100%;height:20px;"></div>
          <div v-for="(row,index) in commentList2" :key="index" style="position: relative;">
            <div style="display: flex;">
              <div class="comment-popup-content-avatar2">
                <rt-avatar backgroundColor="rgba(180,189,207,1)" size="36">{{row.CreatedByName[0]}}</rt-avatar>
              </div>
              <div style="display:inline-block2;width: 80%;">
                <div>
                  <span class="comment-popup-content-name2">{{row.CreatedByName}}</span>
                  <span
                    class="comment-popup-content-time2"
                  >{{row.CreatedOn | moment('YYYY-MM-DD HH:mm')}}</span>
                </div>
              </div>
              <div class="more" @click.stop="postIconClick(index)">
                <rt-icon name="rt-xrm-moremenu" color="#53A4FC" size="16"></rt-icon>
              </div>
              <div class="comment-fab" v-if="postIndex === index && showPostFab">
                <div class="comment-fab-item" @click.stop="replyComment(row,'replyPost')">
                  <rt-icon name="rt-xrm-replycomment" color="#53A4FC" size="16"></rt-icon>
                  <p>回复</p>
                </div>
                <div class="comment-fab-item" @click.stop="deleteComment(row)">
                  <rt-icon name="rt-xrm-delcomment" color="#FF440E" size="16"></rt-icon>
                  <p>删除</p>
                </div>
              </div>
            </div>
            <div class="comment-popup-content-text2">{{row.text}}</div>
            <div
              v-for="(item, index2) in row.DetailList"
              :key="item.post_commentId"
              style="padding-left: 46px;"
            >
              <div style="display: flex;">
                <div class="comment-popup-content-avatar2">
                  <rt-avatar
                    backgroundColor="rgba(180,189,207,1)"
                    size="26"
                  >{{item.CreatedByName[0]}}</rt-avatar>
                </div>
                <div style="display:inline-block2;width: 80%;">
                  <div>
                    <span class="comment-popup-content-name2">{{item.CreatedByName}}</span>
                    <span
                      class="comment-popup-content-time2"
                    >{{item.CreatedOn | moment('YYYY-MM-DD HH:mm')}}</span>
                  </div>
                </div>
                <div class="more2" @click.stop="commentIconClick(index,index2)">
                  <rt-icon name="rt-xrm-moremenu" color="#53A4FC" size="16"></rt-icon>
                </div>
                <div
                  class="comment-fab"
                  v-if="commentIndex === index2 && postIndex === index && showCommentFab"
                >
                  <div class="comment-fab-item" @click.stop="replyComment(item,'replyComment')">
                    <rt-icon name="rt-xrm-replycomment" color="#53A4FC" size="16"></rt-icon>
                    <p>回复</p>
                  </div>
                  <div class="comment-fab-item" @click.stop="deleteComment(item)">
                    <rt-icon name="rt-xrm-delcomment" color="#FF440E" size="16"></rt-icon>
                    <p>删除</p>
                  </div>
                </div>
              </div>
              <div class="comment-popup-content-text3">
                <span v-if="item.reply_userinfoidName != null">
                  回复
                  <span style="color:#53A4FD">@{{item.reply_userinfoidName}}</span>：
                </span>
                {{item.text}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment-popup-footer">
        <div class="comment-popup-footer-input" @click="gotoComment()" :style="footInputStyle">
          <rt-icon name="rt-xrm-pen" size="15" class="comment-popup-footer-input-penicon"></rt-icon>
          <span class="comment-popup-footer-input-text">说点什么吧~</span>
        </div>
        <div class="comment-popup-footer-icon" @click="showquickanswer()" v-if="!isrtListPage">
          <rt-icon name="rt-xrm-reply" size="23"></rt-icon>
        </div>
      </div>
    </div>
    <div class="fast-comment-box" v-if="quickanswerdisable" @click="showquickanswer()">
      <div class="fast-comment-table">
        <div v-for="(answer,index) in quickanswer" :key="index">
          <span class="fast-comment-table-answer" @click="quickanswering(answer)">{{answer}}</span>
        </div>
        <div class="fast-comment-table-arrow"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { type } from 'os';

export default {
  name: 'rtCommentPopup',
  props: {
    value: {
      type: [String, Number]
    },
    url: {
      type: String,
      default: () => ''
    },
    isStar: {
      type: Boolean,
      default: false
    },
    quickanswer: {
      type: Array,
      default: ['没有快捷评论']
    },
    isrtListPage: {
      type: Boolean,
      default: true
    },
    commentList2: {
      type: Array,
      default: () => []
    },
    //是否显示默认评论页面
    showCommentView: {
      type: Boolean,
      default: false
    },
    ObjectId: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      commentList: [],
      TotalRecords: '',
      bottomclass: true,
      quickanswerdisable: false,
      screenHeight: '',
      postIndex: -1, //评论的下标
      showPostFab: false, //展示评论的icon点击弹出框
      commentIndex: -1, //评论里的回复下标
      showCommentFab: false, //展示评论里的回复的icon点击弹出框
      replyItem: {} //回复的该评论对象
    };
  },
  mounted() {
    this.screenHeight = document.body.clientHeight * 0.8;
  },
  computed: {
    footInputStyle() {
      if (this.isrtListPage) {
        return { width: '95%' };
      } else {
        return { width: '84%' };
      }
    }
  },
  updated() {
    this.isScroll();
  },
  methods: {
    fetchData(page) {
      var vm = this;
      return this.GetCommentList(page.pageSize, page.pageIndex).then(resp => {
        if (resp.DataList === undefined) {
          vm.commentList = resp;
          vm.TotalRecords = resp.length;
          return resp;
        } else {
          vm.commentList = resp.DataList;
          vm.TotalRecords = resp.DataList.length;
          return resp.DataList;
        }
      });
    },
    GetCommentList(pageSize, pageIndex) {
      return rt.get('api/' + this.url + '&pageSize=' + pageSize + '&pageIndex=' + pageIndex);
    },
    gotoComment() {
      if (this.showCommentView) {
        this.$router.push({
          name: 'CommentView-comment',
          params: {
            id: this.ObjectId,
            isrtListPage: false,
            commentStatus: 'newComment',
            replyItem: JSON.stringify(this.replyItem)
          }
        });
      }
      this.$bus.$emit('rt-go-comment', 'newComment', JSON.stringify(this.replyItem));
    },
    touchStart() {
      event.preventDefault();
    },
    isScroll() {
      if (!this.bottomclass) {
        let commentH = this.$refs.dailycomment.offsetHeight;
        let screenH = this.screenHeight;
        if (commentH <= screenH) {
          document.body.classList.add('dialog-open');
          document.addEventListener('touchmove', this.touchStart, { passive: false });
        } else {
          document.body.classList.remove('dialog-open');
          document.removeEventListener('touchmove', this.touchStart, { passive: false });
        }
      }
    },
    bottomClassChange() {
      this.bottomclass = !this.bottomclass;
      if (this.bottomclass) {
        document.body.classList.remove('dialog-open');
        document.removeEventListener('touchmove', this.touchStart, { passive: false });
        let body = document.body;
        body.style.position = '';
        let top = body.style.top;
        document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
        body.style.top = '';
      } else {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';
        this.isScroll();
      }
    },
    showquickanswer() {
      this.quickanswerdisable = !this.quickanswerdisable;
    },
    quickanswering(value) {
      if (value != '没有快捷评论') {
        this.$bus.$emit('rt-quick-comment', value);
      }
    },
    getData() {
      this.quickanswerdisable = false;
      if (this.isrtListPage) {
        this.$refs.listWrapper.loadData();
      }
    },
    //评论的icon点击
    postIconClick(index) {
      this.showCommentFab = false;
      this.showPostFab = !this.showPostFab;
      this.postIndex = index;
    },
    //评论里的回复的icon点击
    commentIconClick(index, index2) {
      this.showPostFab = false;
      this.showCommentFab = !this.showCommentFab;
      this.postIndex = index;
      this.commentIndex = index2;
    },
    //回复评论点击事件
    replyComment(item, type) {
      this.replyItem = item;
      this.showCommentFab = false;
      this.showPostFab = false;
      this.commentStatus = type;
      if (this.showCommentView) {
        this.$router.push({
          name: 'CommentView-comment',
          params: {
            id: this.ObjectId,
            isrtListPage: false,
            commentStatus: type,
            replyItem: JSON.stringify(item)
          }
        });
      }
      this.$bus.$emit('rt-go-comment', this.commentStatus, JSON.stringify(this.replyItem));
    },
    //删除评论
    deleteComment(item) {
      this.replyItem = item;
      this.showPostFab = false;
      this.showCommentFab = false;
      this.$bus.$emit('rt-del-comment', JSON.stringify(this.replyItem));
    }
  }
};
</script>

 <style scoped lang="less">
body.dialog-open {
  position: fixed;
  width: 100%;
}
.comment-popup-div {
  height: 100%;
  .commit-popup-black {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 21;
  }
  .comment-popup-box {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px -2px 19px 0px rgba(180, 189, 207, 0.15);
    position: fixed;
    z-index: 22;
    .comment-popup-head {
      height: 44px;
      margin: auto;
      border-bottom: 1px solid rgba(232, 232, 232, 1);
      .comment-popup-head-box {
        width: 92%;
        position: relative;
        top: 5px;
        left: 4%;
        .comment-popup-head-text {
          color: rgba(34, 34, 34, 1);
          font-weight: 500;
          line-height: 42px;
          font-size: 15px;
          padding-left: 5px;
          position: relative;
          top: -2px;
        }
        .comment-popup-head-number {
          line-height: 36px;
          color: rgba(180, 189, 207, 1);
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
    .comment-popup-content {
      height: 80vh;
      width: 100%;
      overflow: auto;
      .comment-popup-content-text {
        font-weight: 400;
        font-size: 14px;
        color: rgba(85, 85, 85, 1);
        margin-left: 62px;
        margin-top: 5px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
      }
      .comment-popup-content-avatar {
        margin-left: 15px;
        display: inline-block;
        margin-top: 10px;
      }
      .comment-popup-content-name {
        font-size: 14px;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
        margin-left: 11px;
      }
      .comment-popup-content-time {
        font-size: 11px;
        font-weight: 400;
        color: rgba(204, 204, 204, 1);
      }
      .comment-popup-content-star {
        line-height: 10px;
        margin-left: 11px;
      }
      .comment-popup-content-text2 {
        font-weight: 400;
        font-size: 14px;
        color: rgba(85, 85, 85, 1);
        margin-left: 62px;
        margin-top: -8px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
      }
      .comment-popup-content-text3 {
        font-weight: 400;
        font-size: 14px;
        color: rgba(85, 85, 85, 1);
        margin-left: 53px;
        margin-top: -8px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
      }
      .comment-popup-content-avatar2 {
        margin-left: 15px;
        display: inline-block;
        padding-top: 5px;
      }
      .comment-popup-content-name2 {
        font-size: 14px;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        margin-left: 11px;
      }
      .comment-popup-content-time2 {
        font-size: 11px;
        font-weight: 400;
        color: rgba(204, 204, 204, 1);
      }
      .comment-popup-content-sta2 {
        line-height: 10px;
        margin-left: 11px;
      }
      .more {
        color: #555555;
        font-size: 13px;
      }
      .more2 {
        color: #555555;
        font-size: 13px;
      }
      .comment-fab {
        position: absolute;
        right: 5px;
        background-color: #f7f8fa;
        margin: 30px 10px 0 10px;
        border-radius: 5px;
        padding: 0 10px 0 10px;
        z-index: 20;

        .comment-fab-item {
          display: flex;
          align-items: center;
          line-height: 1;
          margin: 20px 54px 15px 0;

          p {
            font-size: 15px;
            color: #555;
            margin-left: 10px;
          }
        }

        &::before {
          content: '';
          width: 0px;
          height: 0px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid #f7f8fa;
          position: absolute;
          top: -6px;
          right: 10px;
        }
      }
    }
    .comment-popup-footer {
      width: 100%;
      background-color: rgba(255, 255, 255, 1);
      .comment-popup-footer-input {
        height: 28px;
        background-color: rgba(180, 189, 207, 0.1528);
        margin-left: 3%;
        border-radius: 17px;
        margin-bottom: 8px;
        display: inline-block;
        .comment-popup-footer-input-penicon {
          margin-left: 10px;
          margin-top: 5px;
        }
        .comment-popup-footer-input-text {
          font-size: 14px;
          color: #cccccc;
        }
      }
      .comment-popup-footer-icon {
        display: inline-block;
        margin-left: 10px;
        position: relative;
        top: 5px;
      }
    }
  }
  .fast-comment-box {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 24;
    position: fixed;
    top: 0;
    .fast-comment-table {
      width: 34%;
      position: fixed;
      bottom: 55px;
      right: 3%;
      background-color: white;
      border-radius: 5px;
      .fast-comment-table-answer {
        color: rgba(85, 85, 85, 1);
        line-height: 40px;
        font-size: 13px;
        margin-left: 10px;
      }
      .fast-comment-table-arrow {
        width: 0px;
        height: 0px;
        border: 10px solid transparent;
        border-top-color: white;
        position: absolute;
        bottom: -14px;
        right: 10px;
      }
    }
  }
}
.bottomOn {
  bottom: 0px;
}
.bottomDown {
  bottom: -86vh;
}
</style>


