<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.accountCashCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('accountCash')" type="warning">提现待审核</el-link>
        </el-col>
        <el-col :span="4">
          <el-divider direction="vertical"></el-divider>w
        </el-col>
        <el-col :span="6"><span style="color: red">{{ unreadInfo.accountCashCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.userAlbumCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('userAlbum')" 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.userAlbumCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.userCameraAuditCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('userCameraAudit')" 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.userCameraAuditCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.anchorApplyCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('anchorApply')" 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.anchorApplyCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.dynamicCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('dynamic')" 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.reportCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('report')" 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.reportCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.userGreetCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('userGreet')" 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.userGreetCount }}</span></el-col>
      </el-row>
      <el-row class="message-fid" v-show="unreadInfo.userAvatarCount > 0">
        <el-col :span="14">
          <el-link @click="goToAudit('userAvatar')" 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.userAvatarCount }}</span></el-col>
      </el-row>
    </el-popover>
  </div>
</template>

<script>

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

export default {
  name: 'NotifyMessage',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 列表
      unreadInfo: {
        accountCashCount: 0,
        userAlbumCount: 0,
        userCameraAuditCount: 0,
        anchorApplyCount: 0,
        dynamicCount: 0,
        reportCount: 0,
        userGreetCount: 0,
        userAvatarCount: 0,
      },
      unreadAllCount: 0,
      unreadCount: 1,
    }
  },
  created() {
    // 首次加载小红点
    this.getUnreadCount()
    // 轮询刷新小红点
    setInterval(() => {
      this.$notify.error({
        title: '告警',
        message: '检测到有支付错误告警，请及时检测并解决',
        duration: 0
      });
      this.getUnreadCount()
    }, 1000 * 60)
  },
  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 "accountCash":
          this.$router.push({path: "/audit/accountCash", query: {auditStatus: true}});
          break;
        case "userAlbum":
          this.$router.push({path: "/kk/userAlbum", query: {auditStatus: true}});
          break;
        case "userCameraAudit":
          this.$router.push({path: "/audit/userCameraAudit", query: {auditStatus: true}});
          break;
        case "anchorApply":
          this.$router.push({path: "/kk/anchorApply", query: {auditStatus: true}});
          break;
        case "dynamic":
          this.$router.push({path: "/audit/dynamic", query: {auditStatus: true}});
          break;
        case "report":
          this.$router.push({path: "/audit/report", query: {auditStatus: true}});
          break;
        case "userGreet":
          this.$router.push({path: "/audit/userGreet", query: {auditStatus: true}});
          break;
        case "userAvatar":
          this.$router.push({path: "/audit/userPictureAudit", query: {auditStatus: true}});
          break;
        default:
          break;
      }
    }
  }
}
</script>
<style>
.el-badge__content.is-fixed {
  top: 10px; /* 保证徽章的位置 */
}

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