<template>
  <div class="container">
    <div class="topHeader">
      <span>消息</span>
    </div>
    <div class="main">
     <div v-for="(item, index) in list" :key="index" class="item" @click="toItem(item)">
       <div class="left">
       <div>
        <van-tag type="success" class="icon">消息</van-tag>
        <van-tag v-show="item.isRead" plain type="primary">已读</van-tag>
        <van-tag v-show="!item.isRead" plain type="danger">未读</van-tag>
       </div>
          <p class="time">{{ item.createTime }}</p>
       </div>

       <div class="right">
         <p>{{ item.noticeTitle }}</p>
         <span>{{ item.noticeContent }}</span>
       </div>

     </div>
     <p v-if="type" class="clicks" @click="getList">点击加载更多</p>
     <p v-else class="clicks">已经到底啦</p>
   </div>
  </div>
</template>

<script>
import { list, userMessageList, notice } from '@/api/new'
import { mapState } from 'vuex'
export default {
  name: 'DateTimePicker',
  components: {},

  data () {
    return {
      timeIn: null,
      lists: {},
      userMessageLists: {},
      noReadTotal: 0,
      list: [],
      type: true,
      pageSize: 10,
      pageNum: 1
    }
  },
  computed: {
    ...mapState('num', ['num'])
  },
  watch: {},
  created () {
  },
  mounted () {
    this.getList()
    this.timeIn = setInterval(() => {
      this.userMessageList()
    }, 10000)
  },
  beforeDestroy () {
    console.log(111)
    clearInterval(this.timeIn)
  },
  methods: {
    getList () {
      userMessageList({ pageSize: this.pageSize, pageNum: this.pageNum }).then(({ data }) => {
        if (data.code === 200) {
          this.pageNum++
          this.list.push(...data.rows)
          this.$store.dispatch('num/getNum', {
            num: data.noReadTotal
          })
          if (this.list.length >= data.total) {
            this.type = false
          }
        }
      })
    },
    userMessageList () {
      userMessageList().then(({ data }) => {
        this.$store.dispatch('num/getNum', {
          num: data.noReadTotal
        })
      })
    },
    toItem (item) {
      console.log(item, '路由跳转')
      if (item.isRead) return
      notice({ isRead: 1, noticeId: item.noticeId }).then(({ data }) => {
        if (data.code === 200) {
          if (item.appRoute) {
            this.$router.push(item.appRoute)
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.item{
 border: 1px solid #ccc;
 border-radius: 5px;
 min-height: 80px;
 margin-top: 10px;
 .icon{
  margin-right: 5px;
 }
 .time{
  color: #969799;
 }
 .left{
   display: flex;
   justify-content: space-between;
   padding: 5px 10px;
 }
 .right{
   text-align: left;
   padding: 5px 10px;
   span{
     font-size: 12px;
     color: #969799;
     display: inline-block;
     margin-top: 10px;
   }
 }
}
.clicks{
 color: #969799;
 margin-top: 10px;
}
</style>
