<template>
  <div>
    <el-popover placement="bottom" width="600" trigger="click">
      <!-- icon 展示 -->
      <el-badge slot="reference" :is-dot="unreadCount > 0" type="danger">
        <svg-icon icon-class="message" @click="getList" />
      </el-badge>

      <!-- 弹出列表 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleUpdateList"
          >标记已读</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleUpdateAll"
          >全部已读</el-button>
        </el-col> -->
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="goMyList"
          >查看全部</el-button>
        </el-col>
      </el-row>
      <el-table
        ref="tables"
        v-loading="loading"
        :data="list"
        border
      >
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
        />
        <el-table-column
          property="templateContent"
          label="内容"
          min-width="120"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="100"
          fixed="right"
        >
          <template v-slot="scope">
            <el-button
              v-show="!scope.row.readStatus"
              size="mini"
              type="text"
              icon="el-icon-check"
              @click="handleUpdateSingle(scope.row)"
            >已读</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 更多 -->
      <!-- <div style="text-align: right; margin-top: 10px">
        <el-button type="primary" size="mini" @click="goMyList">查看全部</el-button>
      </div> -->
    </el-popover>
  </div>
</template>

<script>
import { getUnreadNotifyMessageCount, getUnreadNotifyMessageList, updateAllNotifyMessageRead, updateNotifyMessageRead } from '@/api/system/notify/message'

export default {
  name: 'NotifyMessage',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 列表
      list: [],
      // 未读数量,
      unreadCount: 0
    }
  },
  created() {
    // 首次加载小红点
    this.getUnreadCount()
    // 轮询刷新小红点
    setInterval(() => {
      this.getUnreadCount()
    }, 1000 * 60 * 2)
  },
  methods: {
    getList: function() {
      this.loading = true
      getUnreadNotifyMessageList().then(response => {
        this.list = response.data
      }).finally(() => {
        this.loading = false
        // 强制设置 unreadCount 为 0，避免小红点因为轮询太慢，不消除
        this.unreadCount = 0
      })
    },
    getUnreadCount: function() {
      getUnreadNotifyMessageCount().then(response => {
        this.unreadCount = response.data
      })
    },
    goMyList: function() {
      this.$router.push({
        path: '/system/notify/my-notify'
      })
    },
    handleUpdateList() {
      const list = this.$refs['tables'].selection
      if (list.length === 0) {
        return
      }
      this.handleUpdate(list.map(v => v.id))
    },
    handleUpdate(ids) {
      updateNotifyMessageRead(ids).then(response => {
        this.$modal.msgSuccess('标记已读成功！')
        this.getList()
      })
    },
    handleUpdateSingle(row) {
      this.handleUpdate([row.id])
    },
    handleUpdateAll() {
      updateAllNotifyMessageRead().then(response => {
        this.$modal.msgSuccess('全部已读成功！')
        this.getList()
      })
    }
  }
}
</script>
<style>
.el-badge__content.is-fixed {
  top: 10px; /* 保证徽章的位置 */
}
</style>
