<template>
  <div>
    <el-badge :value="num" class="el-icon-s-comment right-menu-item works">
</el-badge>
<el-tabs v-if="newType" class="tabsNew" v-model="activeName" @tab-click="handleClick">
  <i class="el-icon-close close" @click.stop="closeAlert"></i>
    <el-tab-pane label="个人消息" name="first">
      <ul class="content">
        <li v-for="(item, index) in newsList" :key="index" @click.stop="getRouter(item)">
        <span>[{{ item.noticeTitle }}]</span>
        <span class="last">{{ item.noticeContent }}</span>
        <i>{{ item.createTime }}</i>
      </li>
      <p v-if="numType" @click="getToList">查看更多</p>
      <p v-else>已经到底啦</p>
      </ul>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
import { getList, userMessageList, notice } from '@/api/new.js'
export default {
  props: ['newType'],
  name: 'RuoyiInformation',

  watch: {
    newType (now, old) {
     if (now) {
      this.getList()
    this.userMessageList()
     } else {
      this.informList = [],
      this.newsList = [],
     this.pageNum = 1
     }
    }
  },
  data() {
    return {
      activeName: 'first',
      informList: [],
      newsList: [],
      pageNum: 1,
      pageSize: 5,
      numType: true,
      num: 0,
      timeStr: null
    };
  },

  mounted() {
    this.userMessageList()
    this.setTime()
  },

  methods: {
    getRouter(item) {
      this.$emit('close', false)
      this.$router.push(item.pcRoute)

    },
    closeAlert () {
      this.$emit('close', false)
    },
    //轮询掉接口
    setTime () {
     this.timeStr = setInterval(() => {
      userMessageList({pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
        if (res.code === 200) {
          if ((this.num !== res.noReadTotal) && this.newType ) {
            this.pageNum = 1
            this.userMessageList()
          }
        this.num = res.noReadTotal

      } else {
        this.clearTime()
      }
      })
      }, 10000)
    },
    //清除轮询
    clearTime () {
      clearInterval(this.timeStr)
    },
    getToList () {
      this.pageNum++
      this.userMessageList()
    },
    handleClick () {},
    //获取个人消息
    userMessageList () {
      userMessageList({pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
        if (res.code === 200) {
          if (this.newType) {
            this.newsList.push(...res.rows)
          let arr = []
          res.rows.forEach(item => {
            arr.push(notice({isRead: 1, noticeId: item.noticeId}))
          })
          Promise.all(arr)
          }

        this.num = res.noReadTotal
        if (this.newsList.length >= res.total) {
          this.numType = false
        }

      }
      })
    },
    //获取通知公告
    getList () {
      getList().then(res => {
      if (res.code === 200) {
        this.informList = res.rows
      }
    })
    }
  },
  beforeDestroy () {
    console.log(2222211111)
    this.clearTime()
  }
};
</script>

<style lang="scss" scoped>
.content{
  padding: 0 !important;
  line-height: normal !important;
  height: 550px;
  overflow-y: auto;
  p{
    text-align: center;
    margin-top: 30px;
    color: #13e5e2;
    cursor: pointer;
  }
  li{
      border-bottom: 1px solid #4ed1dc;
      padding: 5px 2px;
      span:first-child{
        font-weight: 700;
      }
      .last{
        color: #ccc;
      }
  }

  span{
    display: block;
    margin-bottom: 15px;
  }
  i{
    display: block;
    text-align: right;
  }
}
 .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fff;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
    .work{
  font-size: 16px !important;

}
.close{
  z-index: 99999;
  position: fixed;
  right: 40px;
  top: 85px;
}
.works{
  font-size: 20px !important;
  padding-top: 10px !important;
}
::v-deep .el-tabs__item{
  color: #fff!important;
}
::v-deep .is-active{
  color: #1890ff !important;
}
.tabsNew{
  position: fixed;
  right: 20px;
  top: 60px;
  width: 400px;
  height: 650px;
  background: #1e4048;
  padding: 10px;
  z-index: 2147483647;
  text-align: left !important;
  border: 1px solid #4dcedb;
}
</style>
