<template>
  <div>
    <el-popover placement="bottom" width="200" trigger="click">
      <!-- icon 展示 -->
      <el-badge slot="reference" :is-dot="unreadCount > 0" type="danger">
        <svg-icon icon-class="message" @click="getList"/>
      </el-badge>
      <!-- 弹出列表 -->
<!--      <el-empty v-if="unreadAllCount === 0" description="所有数据已审核"></el-empty>-->
      <el-row class="message-fid" v-show="unreadInfo.userWithdrawCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('userWithdrawCount')" type="warning">用户提现审核</el-link>
        </el-col>
        <el-col :span="4">
          <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="6"><span style="color: red">{{ unreadInfo.userWithdrawCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.userAuthCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('userAuthCount')" type="warning">用户认证审核</el-link>
        </el-col>
        <el-col :span="4">
          <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="6"><span style="color: red">{{ unreadInfo.userAuthCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.dynamicCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('dynamicCount')" type="warning">动态审核</el-link>
        </el-col>
        <el-col :span="4">
          <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="6"><span style="color: red">{{ unreadInfo.dynamicCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.userInfoCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('userInfoCount')" type="warning">用户信息审核</el-link>
        </el-col>
        <el-col :span="4">
          <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="6"><span style="color: red">{{ unreadInfo.userInfoCount }}</span></el-col>
      </el-row>
    </el-popover>
  </div>
</template>

<script>

import {getUnreadNotifyMessageCount, getUnreadNotifyMessageList} from "@/api/xq/unreadNotifyMessage";

export default {
  name: 'NotifyMessage',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 列表
      unreadInfo: {
        userInfoCount: 0,
        dynamicCount: 0,
        userAuthCount: 0,
        userWithdrawCount: 0,
      },
      unreadAllCount: 0,
      unreadCount: 1,
    }
  },
  created() {
    // 首次加载小红点
    this.getUnreadCount()
    // 轮询刷新小红点
    setInterval(() => {
      this.getUnreadCount()
    }, 1000 * 60 * 10)
  },
  methods: {
    getList: function () {
      this.loading = true;
      getUnreadNotifyMessageList().then(response => {
        this.unreadInfo = response.data;
        let allNum = 0;
        for (const i in this.unreadInfo){
          let val = this.unreadInfo[i]
          if(val){
            allNum = allNum + val
          }
        }
        this.unreadAllCount = allNum
        this.loading = false;
      });
    },
    getUnreadCount: function () {
      getUnreadNotifyMessageCount().then(response => {
        this.unreadCount = response.data;
      })
    },
    goToAudit: function (type) {
      switch (type) {
        case "userWithdrawCount":
          this.$router.push({path: "/audit/userWithdraw", query: {auditStatus: true}});
          break;
        case "userAuthCount":
          this.$router.push({path: "/audit/userAuthAudit", query: {auditStatus: true}});
          break;
        case "dynamicCount":
          this.$router.push({path: "/audit/dynamic", query: {auditStatus: true}});
          break;
        case "userInfoCount":
          this.$router.push({path: "/audit/userInfoAudit", query: {auditStatus: true}});
          break;
        default:
          break;
      }
    }
  }
}
</script>
<style>
.el-badge__content.is-fixed {
  top: 10px; /* 保证徽章的位置 */
}

.message-fid {
  margin: 10px 0 10px 0;
}
</style>
