<template>
  <div class="list"
       :id="'notice-cell' + cellIndex">
    <div class="header">
      <div v-photo="data"
           v-lazy:background-image="$options.filters.filterUserLazyImg(data.img)"
           class="div-photo"></div>
      <div class="name-time">
        <p class="name">{{data.realname}}</p>
        <p class="time">{{data.createTime | moment("YYYY-MM-DD HH:mm")}}</p>
      </div>
    </div>
    <div class="title"
         @click="rowFun(data)">{{data.title}}</div>
    <div class="data-content"
         v-if="data.preShow">{{data.content}}</div>
    <div class="data-content"
         v-else>{{data.contentSub}}</div>
    <div v-if="data.contentSub.length < data.content.length"
         class="load-more">
      <span v-if="!data.loadMore"
            @click="loadMoreBtn(data)">展开全文</span>
      <span v-else
            @click="data.loadMore = false, data.preShow = false">收起全文</span>
    </div>
  </div>
</template>

<script>
import { noticeIsReadAPI } from '@/api/oamanagement/notice'

export default {
  components: {},

  data() {
    return {
      // 父元素
      parentTarget: null,
      awaitMoment: false // 等客户浏览
    }
  },

  props: {
    data: Object,
    cellIndex: Number
  },

  mounted() {
    if (this.data.isRead == 0) {
      this.$bus.on('notice-list-box-scroll', target => {
        this.observePreview(target)
      })
      this.observePreview(
        document.getElementById('notice-cell' + this.cellIndex).parentNode
      )
    }
  },

  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.cellIndex]
      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() {
      noticeIsReadAPI({
        announcementId: this.data.announcementId
      })
        .then(res => {
          this.$store.dispatch('GetOAMessageNum', 'announcement')
          this.data.isRead = 1
        })
        .catch(err => {})
    },

    /**
     * 点击显示详情
     */
    rowFun(val) {
      this.$emit('handle', {
        type: 'detail',
        value: val
      })
    },

    loadMoreBtn(val) {
      this.$set(val, 'preShow', true)
      this.$set(val, 'loadMore', true)
    }
  },

  beforeDestroy() {
    this.$bus.off('notice-list-box-scroll')
  }
}
</script>

<style scoped lang="scss">
.list {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e6e6e6;
  .header {
    margin-bottom: 15px;
    .div-photo {
      width: 35px;
      height: 35px;
      border-radius: 17.5px;
      margin-right: 10px;
    }
    .name-time {
      display: inline-block;
      .time {
        color: #999;
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
  .title {
    cursor: pointer;
    display: inline-block;
  }
  .data-content {
    margin-top: 10px;
    color: #999;
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f0f7ff;
    padding: 15px;
    border-radius: 3px;
    color: #333;
    letter-spacing: 0.5px;
  }
  .load-more {
    text-align: left;
    margin-top: 15px;
    span {
      cursor: pointer;
      font-size: 13px;
      color: #8ab7f5;
    }
  }
}
</style>