<template>
<div class="notify-box">
  <scroll-view
    v-if="notify.length"
    scroll-y="true"
    @scrolltolower="getNotice"
    class="scroll-box">
    <div
      class="comment-item clearfix"
      :class="{'read': item.id === readId}"
      v-for="(item, key) in notify"
      :key="key"
      @click="toDetail(item.articleId, item.contentType)">
      <img class="img fl" :src="item.formAccountAvatarUrl">
      <div class="comment-info">
        <div class="name">
          <span class="time fr">{{item.createDate}}</span>
          <span>{{item.formAccountNickname}} {{activeText[item.action]}}</span>
        </div>
        <div class="old-comment">
          <div class="text">{{item.toArticleCommentsContent}}</div>
        </div>
        <div class="comment-text" v-if="item.action === 'COMMENT'">{{item.formArticleCommentsContent}}</div>
        <div class="count-box clearfix">
          <!-- 来源 -->
          <div class="count-item source fl">
            <div class="text">来源：{{item.articleTitle}}</div>
          </div>
        </div>
      </div>
    </div>
  </scroll-view>
  <div v-else class="none-notify">
    <img class="img" src="../../assets/images/none_log_img.png">
    <div class="tips">暂无通知消息</div>
  </div>
</div>
</template>
<script>
import { read, notifyPage } from '@/utils/api'
export default {
  data () {
    return {
      readId: '',
      page: 1,
      limit: 10,
      nomore: false,
      notify: [],
      activeText: {
        'LIKE': '点赞',
        'COMMENT': '回复了'
      }
    }
  },

  async onShow () {
    this.page = 1
    this.nomore = false
    this.readId = ''
    this.notify = []
    this.getNotice()
  },

  methods: {
    // 获取消息
    async getNotice () {
      if (this.nomore) {
        return false
      }
      wx.showLoading({
        title: '加载中'
      })

      let res = await notifyPage(this.page, this.limit)
      this.notify = this.notify.concat(res.data)
      this.notify.forEach(item => {
        if (!this.readId && item.isRead) {
          this.readId = item.id
          return false
        }
      })

      if (res.total <= this.page * this.limit) {
        this.nomore = true
      } else {
        this.page++
      }

      wx.hideLoading()
    },
    // 消息已读并跳转
    async toDetail (id, contentType) {
      await read(id)

      let key = 'teachClassDetail'
      if (contentType === 'video' || contentType === 'audio') {
        key = 'expertSayDetail'
      }

      wx.navigateTo({
        url: `/pages/${key}/main?id=${id}`
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';
.notify-box{
  .scroll-box{
    .scroll-box();
    padding: 0 @spacing 0;
    .comment-box();
    .comment-item .comment-info .name{
      color: #000000;
      .time{
        font-size: 11px;
        color: #999999;
      }
    }
    .read{
      padding-top: 4px;
      border-top: dashed 1px #ccc;
    }
    .comment-item:first-child{
      padding-top: 0;
      border-top: 0 none;
    }
  }
  .none-notify{
    position: absolute;
    top: 30%;
    width: 100%;
    .img{
      margin: 0 auto @spacing;
      width: 114px;
      height: 114px;
    }
    .tips{
      line-height: 20px;
      text-align: center;
      color: #CCCCCC;
    }
  }
}
</style>
