<template>
  <div class="list"
       :id="'journal-cell' + logIndex">
    <div class="list-content">
      <div class="header">
        <div v-photo="data.createUser"
             class="div-photo head-img header-circle"
             :key="data.createUser.img"
             v-lazy:background-image="$options.filters.filterUserLazyImg(data.createUser.img)">
        </div>
        <div class="row">
          <p class="row-title">
            <span class="name">{{data.createUser.realname}}</span>
            <span v-if="showWorkbench"
                  class="item-content">{{data.actionContent}}</span>
            <span v-else
                  class="read"
                  :style="{'color': data.isRead == 0 ? '#3E84E9' : '#ccc'}">{{data.isRead == 0 ? '未读' : '已读'}}</span>
          </p>
          <span class="time">{{data.createTime | moment("YYYY-MM-DD HH:mm")}}</span>
          <el-tooltip :disabled="!(data.sendUserList.length > 0 || data.sendDeptList.length > 0)"
                      placement="bottom"
                      effect="light"
                      popper-class="tooltip-change-border">
            <div slot="content">
              <div class="members-dep-title">
                <!-- hover员工 -->
                <span v-if="data.sendUserList">
                  <!-- 如果没有部门而且员工最后一个 - 不显示逗号 -->
                  <span v-for="(k, i) in data.sendUserList"
                        :key="i">
                    {{data.sendDeptList.length == 0 && i == data.sendUserList.length-1 ? k.realname : k.realname + "，"}}
                  </span>
                </span>
                <!-- hover部门 -->
                <span v-for="(dep, depIndex) in data.sendDeptList"
                      :key="depIndex"
                      v-if="data.sendDeptList.legnth != 0">
                  {{ depIndex == data.sendDeptList.length-1 ? dep.name : dep.name+"，"}}
                </span>
              </div>
            </div>
            <p class="row-title"
               style="display: inline-block;">
              <span v-if="data.sendDeptList">{{data.sendDeptList.length}} 个部门，</span>
              <span v-if="data.sendUserList">{{data.sendUserList.length}}个同事</span>
            </p>
          </el-tooltip>
        </div>
        <div class="rt-setting"
             v-if="!showWorkbench && (data.permission && (data.permission.isUpdate || data.permission.isDelete))">
          <el-dropdown @command="handleCommand"
                       trigger="click">
            <i style="color:#CDCDCD; cursor: pointer;"
               class="el-icon-arrow-down el-icon-more"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="data.permission.isUpdate"
                                command="edit">编辑</el-dropdown-item>
              <el-dropdown-item v-if="data.permission.isDelete"
                                command="delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="text">
        <p class="row"
           v-if="data.content">
          <span class="title">{{data.categoryId == 1 ? "今日工作内容" : data.categoryId == 2 ? "本周工作内容" : "本月工作内容"}}：</span>{{data.content}}</p>
        <p class="row"
           v-if="data.tomorrow">
          <span class="title">{{data.categoryId == 1 ? "明日工作内容" : data.categoryId == 2 ? "下周工作内容" : "下月工作内容"}}：</span>{{data.tomorrow}}</p>
        <p class="row"
           v-if="data.question">
          <span class="title">遇到的问题：</span>{{data.question}}</p>
      </div>
      <div class="accessory">
        <div class="upload-img-box"
             v-if="data.img.length != 0">
          <div v-for="(imgItem, k) in data.img"
               :key="k"
               class="img-list"
               @click="imgZoom(data.img, k)">
            <img v-lazy="imgItem.filePath"
                 :key="imgItem.filePath">
          </div>
        </div>
        <div class="accessory-box"
             v-if="data.file.length != 0">
          <file-cell v-for="(file, fileIndex) in data.file"
                     :key="fileIndex"
                     :data="file"
                     :cellIndex="fileIndex"></file-cell>
        </div>
      </div>
      <!-- 关联业务 -->
      <related-business v-if="allDataShow"
                        :marginLeft="'0'"
                        :alterable="false"
                        :allData="allData"
                        @checkRelatedDetail="checkRelatedDetail">
      </related-business>
      <!-- 评论 -->
      <div class="discuss"
           v-if="replyList && replyList.length != 0">
        <div class="border"></div>
        <div class="discuss-list"
             v-for="(discussItem, k) in replyList"
             :key="k">
          <div v-photo="discussItem.user"
               v-lazy:background-image="$options.filters.filterUserLazyImg(discussItem.user.img)"
               :key="discussItem.user.img"
               class="div-photo head-img header-circle"></div>
          <span class="name">{{discussItem.user.realname}}</span>
          <span class="time">{{discussItem.createTime}}</span>
          <div class="rt">
            <span @click="discussDelete(discussItem, replyList, k)">删除</span>
            <span @click="discussBtn(discussItem, -1)">回复</span>
          </div>

          <p class="reply-title">
            <span v-html="emoji(discussItem.content)"></span>
          </p>

          <!-- <p class="discuss-content"
             v-html="emoji(discussItem.replyContent)"></p> -->

          <div class="children-reply"
               v-if="discussItem.childCommentList && discussItem.childCommentList.length > 0">
            <div class="discuss-list"
                 v-for="(childDiscussItem, k) in discussItem.childCommentList"
                 :key="k">
              <div v-photo="childDiscussItem.user"
                   v-lazy:background-image="$options.filters.filterUserLazyImg(childDiscussItem.user.img)"
                   :key="childDiscussItem.user.img"
                   class="div-photo head-img header-circle"></div>
              <span class="name">{{childDiscussItem.user.realname}}</span>
              <span class="time">{{childDiscussItem.createTime}}</span>
              <div class="rt">
                <span @click="discussDelete(childDiscussItem, discussItem.childCommentList, k)">删除</span>
                <span @click="discussBtn(discussItem, k)">回复</span>
              </div>
              <p class="reply-title">
                <template>
                  <span>回复</span>
                  <span class="reply"
                        v-if="childDiscussItem.replyUser">@{{childDiscussItem.replyUser.realname}}：</span>
                </template>
                <span v-html="emoji(childDiscussItem.content)"></span>
              </p>
            </div>
          </div>

          <!-- 评论 -- 回复  -->
          <div class="comment-box"
               v-if="discussItem.show">
            <el-input type="textarea"
                      @blur="blurFun"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="childCommentsTextarea"></el-input>
            <div class="btn-group">
              <el-popover placement="top"
                          width="400"
                          v-model="childCommentsPopover"
                          trigger="click">
                <!-- 表情 -->
                <emoji @select="childSelectEmoji">
                </emoji>
                <img src="@/assets/img/smiling_face.png"
                     class="smiling-img"
                     slot="reference">
              </el-popover>
              <div class="btn-box">
                <el-button type="primary"
                           @click="childCommentSubmit()"
                           :loading="contentLoading">回复</el-button>
                <el-button @click="discussItem.show= false">取消</el-button>
              </div>
            </div>
          </div>
          <div class="border"></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary"
                 icon="el-icon-chat-line-round"
                 @click="commentBtn(data)">回复</el-button>
      <!-- <img @click="commentBtn(item)" class="comment" src="@/assets/img/journal_comment.png"> -->
    </div>
    <!-- 底部评论 -->
    <div class="comment-box"
         v-if="data.showComment">
      <el-input v-model="commentsTextarea"
                @blur="blurFun"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"></el-input>
      <div class="btn-group">
        <el-popover placement="top"
                    width="400"
                    v-model="commentsPopover"
                    trigger="click">
          <!-- 表情 -->
          <emoji @select="selectEmoji">
          </emoji>
          <img src="@/assets/img/smiling_face.png"
               class="smiling-img"
               slot="reference">
        </el-popover>
        <div class="btn-box">
          <el-button type="primary"
                     @click="commentSubmit()"
                     :loading="contentLoading">回复</el-button>
          <el-button @click="data.showComment = false">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import xss from 'xss'
import emoji from '@/components/emoji'
// API
import { journalSetread } from '@/api/oamanagement/journal'

import {
  setCommentAPI,
  deleteCommentAPI,
  queryCommentListAPI
} from '@/api/oamanagement/common'

// 关联业务 - 选中列表
import relatedBusiness from '@/components/relatedBusiness'

import { mapGetters } from 'vuex'
import FileCell from '@/views/OAManagement/components/fileCell'

export default {
  name: 'journal-cell', // 日志cell
  components: {
    emoji,
    relatedBusiness,
    FileCell
  },
  mixins: [],
  computed: {
    ...mapGetters(['userInfo']),
    allData() {
      let allData = {}
      allData.business = this.data.businessList
      allData.contacts = this.data.contactsList
      allData.contract = this.data.contractList
      allData.customer = this.data.customerList
      return allData
    },
    allDataShow() {
      if (
        this.data.businessList.length != 0 ||
        this.data.contactsList.length != 0 ||
        this.data.contractList.length != 0 ||
        this.data.customerList.length != 0
      ) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {},
  data() {
    return {
      // 评论
      commentsTextarea: '',
      // 回复数据
      childCommentsTextarea: '',
      // 评论 -- 表情
      commentsPopover: false,
      replyChildComment: null, // 被评论对象
      replyChildIndex: -1, // -1 是主评论 0以上为子评论
      childCommentsPopover: false,
      blurIndex: 0,
      contentLoading: false,
      // 父元素
      parentTarget: null,
      awaitMoment: false, // 等客户浏览
      // 评论列表
      replyList: []
    }
  },
  props: {
    data: Object,
    logIndex: {
      type: Number,
      default: 0
    },
    // 工作台操作动态展示
    showWorkbench: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    if (this.data.isRead == 0 && !this.showWorkbench) {
      this.$bus.on('journal-list-box-scroll', target => {
        this.observePreview(target)
      })
      this.observePreview(
        document.getElementById('journal-cell' + this.logIndex).parentNode
      )
    }

    this.replyList = this.data.replyList
  },
  methods: {
    /**
     * 观察预览
     */
    observePreview(target) {
      if (this.data.isRead == 0) {
        if (target) {
          this.parentTarget = target
        }
        let ispreview = this.whetherPreview()
        if (!this.awaitMoment && ispreview) {
          this.awaitMoment = true
          setTimeout(() => {
            this.awaitMoment = false
            let ispreview = this.whetherPreview()
            if (ispreview) {
              this.submiteIsRead()
            }
          }, 3000)
        }
      }
    },

    /**
     * 是否预览
     */
    whetherPreview() {
      let dom = this.parentTarget.children[this.logIndex]
      if (this.parentTarget.getBoundingClientRect()) {
        let offsetTop =
          this.parentTarget.getBoundingClientRect().top -
          dom.getBoundingClientRect().top
        let ispreview = false
        if (
          offsetTop <= 0 &&
          Math.abs(offsetTop) < this.parentTarget.clientHeight
        ) {
          ispreview = true
        } else if (offsetTop > 0 && offsetTop < dom.clientHeight) {
          ispreview = true
        }
        return ispreview
      } else {
        return false
      }
    },
    submiteIsRead() {
      journalSetread({
        logId: this.showWorkbench ? this.data.actionId : this.data.logId
      })
        .then(res => {
          this.$store.dispatch('GetOAMessageNum', 'log')
          this.data.isRead = 1
        })
        .catch(err => {})
    },

    // 获取评论信息
    getCommentList() {
      queryCommentListAPI({
        typeId: this.data.logId,
        type: 1
      })
        .then(res => {
          this.replyList = res.data
        })
        .catch(() => {})
    },

    verifyAwaitInfo() {},
    // 编辑 删除
    handleCommand(command) {
      this.$emit('on-handle', { type: command, data: { item: this.data } })
    },
    checkRelatedDetail(type, data) {
      this.$emit('on-handle', {
        type: 'related-detail',
        data: { type: type, item: data }
      })
    },
    // 评论删除
    discussDelete(val, items, index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCommentAPI({
            commentId: val.commentId
          }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            items.splice(index, 1)
            this.$emit('on-handle', {
              type: 'discuss-delete',
              data: { item: this.data }
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 回复 -- 显示输入框
    discussBtn(item, index) {
      if (item.show) {
        this.$set(item, 'show', false)
        this.replyChildComment = null
      } else {
        this.$set(item, 'show', true)
        this.$set(item, 'showComment', false)
        this.replyChildComment = item
        this.replyChildIndex = index
      }
    },
    //子评论 回复 -- 提交
    childCommentSubmit() {
      if (this.replyChildComment && this.childCommentsTextarea) {
        var item =
          this.replyChildIndex == -1
            ? this.replyChildComment
            : this.replyChildComment.childCommentList[this.replyChildIndex]
        this.contentLoading = true
        setCommentAPI({
          pid: item.userId,
          typeId: item.typeId,
          mainId: item.mainId == 0 ? item.commentId : item.mainId,
          type: 2,
          content: xss(this.childCommentsTextarea)
        })
          .then(res => {
            this.childCommentsPopover = false

            res.data.user = this.userInfo
            res.data.replyUser = item.user

            this.replyChildComment.childCommentList.push(res.data)
            this.$message.success('回复成功')
            this.replyChildComment.show = false
            this.replyChildComment = null

            this.contentLoading = false
            this.childCommentsTextarea = ''
            this.$emit('on-handle', {
              type: 'discuss-submit',
              data: { item: this.data }
            })
          })
          .catch(err => {
            this.$message.error('回复失败')
            this.contentLoading = false
          })
      }
    },
    // 评论 -- 提交
    commentSubmit() {
      if (this.commentsTextarea) {
        this.contentLoading = true
        setCommentAPI({
          typeId: this.showWorkbench ? this.data.actionId : this.data.logId,
          type: 2, // 1 任务 2 日志
          content: xss(this.commentsTextarea)
        })
          .then(res => {
            // 插入一条数据
            this.$set(this.data, 'showComment', false)
            res.data.childCommentList = []
            res.data.show = false
            res.data.user = this.userInfo

            this.replyList.push(res.data)
            this.commentsTextarea = ''
            this.$message.success('回复成功')
            this.contentLoading = false
          })
          .catch(err => {
            this.$message.error('回复失败')
            this.contentLoading = false
          })
      }
    },
    // 评论
    commentBtn(item) {
      if (item.showComment) {
        this.$set(item, 'showComment', false)
      } else {
        if (this.replyChildComment) {
          this.replyChildComment.show = false
        }
        this.$set(item, 'showComment', true)
      }
    },
    // 评论选中功能
    selectEmoji(val) {
      let list = this.commentsTextarea.split('')
      list.splice(this.blurIndex, 0, val)
      this.commentsTextarea = list.join('')
      this.commentsPopover = false
    },
    // 回复选中功能
    childSelectEmoji(val) {
      let list = this.childCommentsTextarea.split('')
      list.splice(this.blurIndex, 0, val)
      this.childCommentsTextarea = list.join('')
      this.childCommentsPopover = false
    },
    blurFun(eve) {
      this.blurIndex = eve.target.selectionEnd
    },
    // 放大图片
    imgZoom(val, k) {
      this.$bus.emit('preview-image-bus', {
        index: k,
        data: val.map(function(item, index, array) {
          return {
            url: item.filePath,
            name: item.name
          }
        })
      })
    }
  },
  beforeDestroy() {
    this.$bus.off('journal-list-box-scroll')
  }
}
</script>
<style lang="scss" scoped>
@import '../styles/content.scss';

.list {
  .list-content {
    padding: 20px;
    .header {
      margin-bottom: 15px;
      @include color9;
      font-size: 12px;
      .row {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        .row-title {
          margin-bottom: 7px;
          @include v-align;
        }
        .el-tooltip {
          margin-bottom: 0;
        }
        .el-popover__reference {
          margin-bottom: 0;
          cursor: pointer;
          display: inline-block;
        }
      }
      .head-img {
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 17.5px;
        @include v-align;
      }
      .name,
      .time,
      .read,
      .head-img {
        @include v-align;
      }
      .read,
      .time {
        display: inline-block;
        margin-right: 10px;
      }
      .name {
        font-size: 15px;
        margin: 0 10px 0 0;
        color: #333333;
      }
      .rt-setting {
        float: right;
        line-height: 30px;
        .dep {
          color: #333333;
          margin-right: 20px;
        }
        img {
          width: 16px;
          @include cursor;
          @include v-align;
        }
      }
    }
    .text {
      .row {
        margin-bottom: 7px;
        line-height: 22px;
        font-size: 13px;
        white-space: pre-wrap;
        word-wrap: break-word;
        .title {
          width: 95px;
          text-align: left;
          display: inline-block;
          @include color9;
          font-size: 13px;
        }
      }
    }
    .accessory {
      .upload-img-box {
        margin: 10px 0;
        .img-list {
          display: inline-block;
          position: relative;
          margin-right: 10px;
          width: 80px;
          height: 60px;
          line-height: 60px;
          cursor: pointer;
          img {
            max-width: 80px;
            max-height: 60px;
          }
        }
      }
    }
    .discuss {
      margin-top: 20px;
      .border {
        height: 1px;
        background: #e6e6e6;
        margin: 15px -20px;
      }
      .discuss-list {
        .name,
        .time,
        .head-img {
          @include v-align;
        }
        .head-img {
          width: 25px;
          height: 25px;
          display: inline-block;
          border-radius: 12.5px;
        }
        .name {
          margin: 0 10px;
          font-size: 15px;
        }
        .time {
          color: #999;
          font-size: 12px;
          display: inline-block;
          margin-top: 3px;
        }

        .reply-title {
          color: #333;
          font-size: 13px;
          margin: 10px 0 10px 40px;
          padding: 10px 10px 10px 40px;
          white-space: pre-wrap;
          word-wrap: break-word;
          span {
            letter-spacing: 0.5px;
            line-height: 18px;
          }
          .reply {
            color: #3e84e9;
          }
        }
        .reply-title /deep/ img {
          vertical-align: text-bottom;
          margin: 0 2px;
        }

        .children-reply {
          margin: 10px 0 10px 40px;
        }

        .rt {
          margin-top: 4px;
          color: #999;
          margin-right: 0;
          span {
            margin-left: 10px;
            cursor: pointer;
          }
        }
        .discuss-content {
          background: #f5f7fa;
          color: #777;
          line-height: 36px;
          margin-left: 40px;
          padding-left: 15px;
        }
        .discuss-content /deep/ img {
          vertical-align: middle;
          margin: 0 3px;
        }
        .border {
          margin: 15px 0 15px 40px;
        }
        .comment-box {
          margin-left: 40px;
          padding: 0;
          background: transparent;
          margin-top: 15px;
        }
      }
      .discuss-list:last-child {
        .border {
          display: none;
        }
      }
    }
  }
  .footer {
    background: #f4f7fd;
    height: 40px;
    line-height: 40px;
    color: #ccc;
    text-align: right;
    padding-right: 20px;
    img {
      @include v-align;
      @include cursor;
    }
    .comment {
      margin-right: 15px;
      color: #6c7a95;
      font-size: 13px;
      cursor: pointer;
    }
  }
  .comment-box {
    margin: 20px;
    border: 1px solid #e6e6e6;
    .btn-group {
      padding: 0 20px 10px 10px;
      overflow: hidden;
      .btn-box {
        float: right;
      }
    }
    .btn-group /deep/ img {
      cursor: pointer;
    }
    .el-textarea /deep/ .el-textarea__inner {
      resize: none;
      border: 0;
    }
  }
}

.wukong {
  cursor: pointer;
}
</style>
