<template>
  <a-popover
    v-model="visible"
    :arrowPointAtCenter="true"
    :autoAdjustOverflow="true"
    :getPopupContainer="() => $refs.noticeRef.parentElement"
    placement="bottomRight"
    trigger="click"
  >
    <template slot="content">
      <a-spin :spinning="loading">
        <a-tabs>
          <a-tab-pane key="1" tab="消息通知">
            <a-list>
              <a-list-item @click="goNewList">
                <a-list-item-meta :title="noticeCount>0?'您有'+ noticeCount +'份未读消息通知':'您的消息通知列表'">
                  <a-avatar
                    slot="avatar"
                    src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"
                    style="background-color: white" />
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </template>
    <span ref="noticeRef" class="header-notice" @click="fetchNotice">
      <a-badge :count="noticeCount">
        <a-icon type="bell" />
      </a-badge>
      <div style="margin: 10px;display: none;">
        <audio controls="controls" style="width: 100%;" id="yx_player">
          <source src="./notice.mp3">
        </audio>
      </div>
    </span>
  </a-popover>
</template>

<script>
// import SettingItemVue from '../SettingDrawer/SettingItem.vue'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getUnreadCount } from '@/api/notice'
export default {
  name: 'HeaderNotice',
  data () {
    return {
      loading: false,
      visible: false,
      timer: '',
      noticeCount: 0
    }
  },
  destroyed () {
    clearInterval(this.timer)
  },
  created () {
    const token = storage.get(ACCESS_TOKEN)
    this.getNoticeCount()
    if (token) {
     this.timer = setInterval(() => {
        this.getNoticeCount()
      }, 6000)
    }
  },
  methods: {
    getNoticeCount () {
      getUnreadCount().then(res => {
        if (res.count > this.noticeCount && this.noticeCount !== 0) {
          const plr = document.getElementById('yx_player')
          plr.play()
          setTimeout(() => {
           plr.play()
          }, 1500)
        }
        this.noticeCount = res.count
      }).catch(err => {
        console.log(err)
      })
    },
    goNewList () {
      if (this.$route.path === '/noticeList') {
        this.getNoticeCount()
      } else {
        this.$router.push({ name: 'NoticeList', params: {} })
      }
      this.visible = !this.visible
    },
    fetchNotice () {
      if (!this.visible) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        this.loading = false
      }
      this.visible = !this.visible
    }
  }
}
</script>

<style lang="less" scoped>
@import "~ant-design-vue/lib/style/index";

.header-notice {
  display: inline-block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 0 20px;

  &:hover {
    background: rgba(0, 0, 0, 0.025);
  }

  .anticon {
    font-size: 18px;
  }

  span {
    vertical-align: initial;
  }
}
</style>
