
<template>
  <el-popover
    v-model="visible"
    placement="bottom"
    width="300"
    trigger="click"
    @show="getMessagePage"
  >
    <div v-if="messageList && messageList.length > 0">
      <p v-for="item in messageList" :key="item.id" class="message-popover-item">{{ item.title }}</p>
      <div class="text-center" style="width: 100%">
        <el-button type="text" size="small" @click="visible = false; $router.push({ path: '/system/message' })">查看全部</el-button>
      </div>
    </div>
    <div v-else class="no-message">暂无通知</div>
    <el-badge slot="reference" :is-dot="isDot" class="item right-menu-item massage">
      <i class="el-icon-message-solid" />
    </el-badge>
  </el-popover>

</template>
<script>
import { fetchMessagePage } from '@/api/system/message'

export default {
  name: 'Message',
  data() {
    return {
      activeName: '0',
      visible: false,
      pagination: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      messageList: []
    }
  },
  computed: {
    isDot() {
      return this.messageList && this.messageList.length > 0
    }
  },
  methods: {
    handleClick() {},
    getMessagePage() {
      fetchMessagePage(Object.assign({}, this.pagination, { isRead: '0' })).then(({ data }) => {
        this.messageList = data
      })
    }
  }
}
</script>
<style scoped lang="scss">
.no-message {
  font-size: 14px;
  text-align: center;
}
.massage {
  ::v-deep .el-badge__content.is-dot {
    position: absolute;
    left: 15px;
    top: 15px;
  }
}
.message-list {
  ::v-deep .el-badge__content.is-dot {
    top: 12px;
  }
}
.message-item {
  height: 240px;
  overflow: auto;
  .content {
    color: rgba(26, 26, 26, 0.6);
    font-size: 14px;
  }
}
.message-popover-item {
  font-size: 12px;
  padding: 2px 0;
}
</style>
