<template>
  <el-popover
    placement="top-end"
    width="450"
    trigger="manual"
    v-model="visible">
    <div style="margin: 5px" v-loading="loading">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="d.label" :name="d.value" v-for="d in dict.notice_type" :key="d.id">
<!--          <el-empty v-show="notReadMsgList[d.value-1].length == 0" description="暂无信息" ></el-empty>-->
          <div v-for="o in notReadMsgList[d.value-1]" :key="o.notice_id">
            <a href="javascript:" @click="showMessage(o)">
              <el-row @click="showMessage">
                <el-col :span="6">
                  <el-tag type="danger">{{ dict.label.notice_type[o.notice_type] }}</el-tag>
                </el-col>
                <el-col :span="9" style="font-weight: bolder">{{o.notice_title}}</el-col>
                <el-col :span="9" style="color: #cccccc">{{o.create_time}}</el-col>
              </el-row>
              <el-divider ></el-divider>
            </a>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="text-align: right">
        <el-button type="text" @click="visible = !visible">取消</el-button>
        <el-button type="text" @click="toSiteMessage" >查看更多>></el-button>
      </div>
    </div>
    <span slot="reference" @click="fetchNotice">
      <el-badge :value="notReadMsgCount" :hidden="notReadMsgCount==0">
        <el-icon class="el-icon-bell" style="font-size: 22px;"></el-icon>
      </el-badge>
    </span>
  </el-popover>
</template>

<script>
import crudNotice from './api/notice'
import { NOTICE_MESSAGE_UPDATE, NOTICE_SHOW_MESSAGE } from './code/VueBaseCode'
export default {
  dicts: ['deal_status', 'have_read_type', 'notice_type'],
  name: 'NoticeIcon',
  data() {
    return {
      loading: false,
      visible: false,
      activeName: '1',
      // 未读消息数量
      notReadMsgCount: 0,
      // 消息内容
      notReadMsgList: []
    }
  },
  methods: {
    /**
     * 打开列表页
     */
    fetchNotice() {
      if (this.visible) {
        this.visible = false
        this.loading = false
      } else {
        this.visible = true
        this.loading = true
        // 消息列表
        crudNotice.pageByReceive().then(res => {
          this.notReadMsgList = res
          this.loading = false
          console.log(this.notReadMsgList)
        })
      }
    },
    /**
     * 未读的消息数量
     */
    receivedCount() {
      // 查询当前用户的未读消息数量
      crudNotice.countByReceiveNotRead().then(res => {
        this.notReadMsgCount = res
      })
    },
    /**
     * 查看消息
     */
    showMessage(message) {
      // 标记已读
      crudNotice.read(message.notice_id).then(() => {
        this.receivedCount()
      })
      this.$bus.emit(NOTICE_SHOW_MESSAGE, message)
      this.visible = false
    },
    /**
     * 跳转到站内信界面
     */
    toSiteMessage() {
      this.$router.push({
        path: '/monitor/notice'
      })
      this.visible = false
    },
    handleClick(tab, event) {
      // console.log(this.dict.notice_type)
      // console.log(tab, event)
    }
  },
  mounted() {
    this.receivedCount()
    this.$bus.on(NOTICE_MESSAGE_UPDATE, this.receivedCount) // 监听事件
  },
  destroyed() {
    this.$bus.off(NOTICE_MESSAGE_UPDATE)
  }
}
</script>

<style scoped>
/deep/.el-badge__content.is-fixed {
  top: 10px;
}
.el-divider{
  margin: 8px 0;
}
</style>
