<template>
  <el-popover
    v-model="visible"
    placement="top-end"
    width="900"
    trigger="manual"
  >
    点击信息标识已读
    <div v-loading="loading" style="margin: 5px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="d in dict.notice_type" :key="d.id" :label="d.label" :name="d.value">
          <el-empty v-if="notReadMsgList && notReadMsgList[d.value-1] && notReadMsgList[d.value-1].length === 0" description="暂无信息" />
          <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="2">
                  <el-tag type="danger">{{ dict.label.notice_type[o.notice_type] }}</el-tag>
                </el-col>
                <el-col :span="15" style="font-weight: bolder">{{ o.notice_title }}</el-col>
                <el-col :span="7" style="color: #cccccc">{{ o.create_time }}</el-col>
              </el-row>
              <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-badge>
    </span>
  </el-popover>
</template>

<script>
import crudNotice from './sysNotice'
import { NOTICE_MESSAGE_UPDATE, NOTICE_SHOW_MESSAGE } from './VueBaseCode'
import crudStage from '@/api/logicflow/stage'
export default {
  dicts: ['deal_status', 'have_read_type', 'notice_type'],
  name: 'NoticeIcon',
  data() {
    return {
      loading: false,
      visible: false,
      activeName: '2',
      // 未读消息数量
      notReadMsgCount: 0,
      // 消息内容
      notReadMsgList: []
    }
  },
  beforeMount() {
    this.getMessage()
  },
  mounted() {
    this.getMessage()
    this.receivedCount()
    this.initStageData()
    this.$bus.on(NOTICE_MESSAGE_UPDATE, this.receivedCount) // 监听事件
  },
  destroyed() {
    this.$bus.off(NOTICE_MESSAGE_UPDATE)
  },
  methods: {
    /**
     * 打开列表页
     */
    fetchNotice() {
      if (this.visible) {
        this.visible = false
        this.loading = false
      } else {
        this.visible = true
        this.loading = true
        // 消息列表
        this.getMessage()
      }
    },
    getMessage() {
      crudNotice.pageByReceive().then(res => {
        this.notReadMsgList = res
        this.loading = false
      })
    },
    /**
     * 未读的消息数量
     */
    receivedCount() {
      // 查询当前用户的未读消息数量
      crudNotice.countByReceiveNotRead().then(res => {
        this.notReadMsgCount = res
      })
    },
    beforeDestroy() {
      // js提供的clearInterval方法用来清除定时器
      console.log('定时器销毁')
      clearInterval(this.timer)
    },
    // 定时获取消息数量
    initStageData() {
      // 定时器
      this.timer = setInterval(() => {
        console.log('定时器启动')
        this.receivedCount()
      }, 50000)
    },
    /**
     * 查看消息
     */
    showMessage(message) {
      // 标记已读
      crudNotice.read(message.notice_id).then(() => {
        this.receivedCount()
        this.getMessage()
      })
      this.$bus.emit(NOTICE_SHOW_MESSAGE, message)
      this.visible = false
    },
    /**
     * 跳转到站内信界面
     */
    toSiteMessage() {
      this.$router.push({
        path: '/monitor/sysNotice'
      })
      this.visible = false
    },
    handleClick(tab, event) {
      // console.log(this.dict.notice_type)
      // console.log(tab, event)
    }
  }
}
</script>

<style scoped>
.el-divider{
  margin: 8px 0;
}
</style>
