<!--
  @description: 消息提醒
  @Modifier: haofengxian/肖文龙
  @routerPath:
  @date: 2020-11-18-15:33
-->
<template>
  <el-popover
    placement="bottom"
    width="300"
    :class="noticeClass"
    trigger="hover"
    @show="getMailToastList"
  >
    <!-- 按钮 -->
    <span slot="reference" :class="[noticeClass]">
      <span class="pointer">
        <i class="iconfont icon-message" style="font-size:15px;" />
        消息
        <el-badge class="header-message" :is-dot="isDot" />
      </span>
      <!-- 查看消息记录弹框 -->
      <userMessageDialog ref="userMessage" />
    </span>
    <div>
      <!-- 消息列表 -->
      <ul class="notice-wrap">
        <li v-for="(item, key) in mailToastList" :key="key" class="notice__item">
          <p class="pointer" @click="messageDetail(item)">
            <span class="notice__title">
              <i class="iconfont icon-message" />
              {{ item.title }}
            </span>
            <span class="fr">
              <el-link class="fr" type="primary">
                [查看]
              </el-link>
            </span>
          </p>
          <span class="notice__subtitle">{{ item.createTime }}</span>
        </li>
      </ul>
    </div>
    <!-- 查看更多 -->
    <div class="viewMore">
      <el-link type="primary" @click="toMyAnnouncement()">
        查看更多
      </el-link>
    </div>
  </el-popover>
</template>

<script>
/* api */
import { getMailToastList } from '@api/common/desk'
// 组件
import userMessageDialog from './userMessage-dialog' // 查看消息详情弹框
export default {
  name: 'HeaderNotice',
  components: {
    userMessageDialog// 查看消息详情弹框
  },
  props: {
    noticeClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mailToastList: [], // 未读消息列表
      badgeValue: '', // 未读消息数量
      isDot: false // 是否显示小红点
    }
  },
  methods: {
    // 获取消息列表
    getMailToastList() {
      const params = {
        pageNo: 1,
        pageSize: 5,
        viewState: '00'
      }
      getMailToastList(params).then((res) => {
        this.mailToastList = res.data.records
        this.mailToastList.forEach((item) => {
          item.createTime = this.$Moment(item.createTime).format(
            this.momentDateTime
          )
        })
        this.badgeValue = res.data.total
        // 是否有未读消息
        this.isDot = this.badgeValue !== 0
      })
    },
    // 查看消息
    messageDetail(row) {
      // 打开消息弹框
      this.$refs.userMessage.open(row.id)
    },
    // 查看更多
    toMyAnnouncement() {
      this.$router.push('/userMessage/userMessage-list')
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/style/common/public.less';
.header-message {
  // margin-left: 5px;
  margin-top: -10px;
  margin-right: 5px;
}
.viewMore {
  margin-top: 5px;
  text-align: center;
}
.notice-wrap {
  .notice__item {
    padding: 5px;
    border-bottom: 1px solid #dcdfe6;
  }
  .notice__title {
    // line-height: 20px;
    i{
      color:@hyacinthine;
      font-size: 14px;
    }
    color: #333333;
  }
  .notice__subtitle {
    font-size: 12px;
    color: #999999;
  }
}
</style>
