<template>
  <el-popover ref="popover" placement="bottom-end" width="400" trigger="click" :visible-arrow="false" popper-class="popover-msg">
    <el-badge class="dm-layout-badge" slot="reference" :value="total" :max="99" :hidden="!total">
      <i class="iconfont-components3 icon-cp-BellOutlined message-icon"></i>
    </el-badge>
    <div slot="default">
      <h2 class="message-title">系统消息 <el-button class="read-all" type="text">全部已读</el-button></h2>
      <ul class="list" v-if="messageData.length > 0" v-infinite-scroll="loadMoreMessage" style="overflow:auto" :infinite-scroll-distance="5">
        <li v-for="item in messageData" :key="item.auditId">
          <h3>任务通知</h3>
          <p>{{ item.detail }}</p>
          <div class="bottom">
            <span class="tips">{{ item.createTime | formatTimeYmdHms }}</span>
            <el-button type="text" @click="toDetail(item)">查看详情</el-button>
          </div>
        </li>
        <div v-show="loading" class="loading">
          <i class="el-icon-loading" />
        </div>
      </ul>
      <div v-else class="empty">
        <img src="../images/no-data.png" />
        <p class="tips">暂无未读消息</p>
      </div>
    </div>
  </el-popover>
</template>

<script>
import { getRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';

export default {
  name: 'MessageCenter',
  data() {
    return {
      params: {
        wxEnterpriseId: '',
        auditFlag: 0,
        pageNum: 1, // 当前页
        pageSize: 20, // 一页显示个数
        totalPage: 1
      },
      messageData: [],
      total: 0,
      loading: false
    };
  },
  created() {
    this.params.wxEnterpriseId = JSON.parse(sessionStorage.getItem('userInfos') || '{}').wxEnterpriseId;
    this.getMessage();
  },
  methods: {
    getMessage() {
      if (this.params.pageNum == 1) {
        this.messageData = [];
      }
      const { wxEnterpriseId, auditFlag, pageNum, pageSize } = this.params;
      this.loading = true;
      getRequest('/haoban-manage3-web/audit/find-page', { wxEnterpriseId, auditFlag, pageNum, pageSize })
        .then(resp => {
          const { errorCode, result } = resp.data || {};
          if (errorCode != 1) {
            errorMsg.errorMsg(resp.data);
            return;
          }
          this.params.totalPage = result.totalPage;
          this.total = result.totalCount;
          if (Array.isArray(result.result)) {
            this.messageData = [...this.messageData, ...result.result];
          }
        })
        .finally(() => (this.loading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.message-icon {
  color: #606266;
  font-size: 24px;
  cursor: pointer;
  &:hover {
    background: #f2f3f5;
  }
}
.popover-msg {
  .message-title {
    display: flex;
    justify-content: space-between;
    align-items: bottom;
    padding: 15px 20px;
    color: #303133;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 22px;
    border-bottom: 1px solid #e4e7ed;
    .read-all {
      line-height: normal;
    }
  }
  .list {
    max-height: 480px;
    color: #303133;
    padding-bottom: 14px;
    box-sizing: border-box;
    li {
      padding: 14px 20px;
      border-bottom: 1px solid #e4e7ed;
      &:hover {
        background: #f7f8fa;
      }
      h3 {
        margin-bottom: 7px;
        font-weight: bold;
      }
      p {
        font-size: 13px;
        line-height: 18px;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        height: 17px;
        margin-top: 3px;
      }
    }
  }
  .loading {
    text-align: center;
    padding-top: 5px;
  }
  .empty {
    height: 149px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 30px;
      height: 30px;
      margin-bottom: 13px;
    }
  }
  .tips {
    font-size: 12px;
    color: #909399;
  }
}
</style>

<style lang="scss">
.dm-layout-badge .el-badge__content {
  background-color: #ff4d4f;
}
</style>
