<template>
  <div :class="{ 'popover-open': popoverOpen }">
    <el-popover
      ref="notice-popover"
      v-model="popoverOpen"
      :popper-class="tabs.length<=2?'notice-popover':'notice-threeItem'"
      placement="bottom-end"
    >
      <el-tabs v-model="activeTab" stretch class="tabs" @tab-click="onTabChange">
        <template v-for="tab in tabOptions">
          <el-tab-pane
            :key="tab.title"
            class="tab-pane"
            :label="tab.titleShow"
            :name="tab.title"
          >
            <notice-list
              :url="tab.url"
              :index="tab.index"
              :avatar="tab.index === 1"
              :title="tab.title"
              :empty-text="tab.emptyText"
              :empty-image="tab.emptyImage"
              :data="getNoticeData(tab.list)"
              @clickItem="close"
              @more="close"
            />
          </el-tab-pane>
        </template>
      </el-tabs>
    </el-popover>

    <div v-popover:notice-popover class="noticeButton">
      <el-badge :value="unreadSize" :max="99" class="badge">
        <i class="el-icon-bell" />
      </el-badge>
    </div>
  </div>

</template>

<script>
import NoticeList from './NoticeList.vue'

export default {
  components: {
    NoticeList
  },
  props: {
    tabs: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    const activeTab =
      this.tabs && this.tabs.length > 0 ? this.tabs[0].title : ''
    return {
      popoverOpen: false,
      activeTab
    }
  },
  computed: {
    tabOptions() {
      return this.tabs.map(tab => {
        const titleShow =
          tab.list && tab.list.length > 0
            ? `${tab.title} (${tab.count})`
            : tab.title
        return {
          ...tab,
          titleShow
        }
      })
    },
    unreadSize() {
      let total = 0
      this.tabs.forEach((tab) => {
        total = total + tab.count
      })
      return total
      // return this.tabs[0].count
    }
  },
  methods: {
    close() {
      this.popoverOpen = false
    },
    onTabChange(tab, event) {
      // console.log('NoticeIcon/index, onTabChange, tab:', tab, 'event:', event)
    },
    getNoticeData(noticeList) {
      if (!noticeList || noticeList.length < 0) {
        return []
      }
      return noticeList.map(item => {
        return {
          ...item,
          datetime: this.$moment(item.sendTime).fromNow()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.noticeButton {
  width: 100%;
  height: 100%;
  padding: 0;

  display: flex;
  align-items: center;

  transition: all 0.3s;
}

.badge {
  .el-badge__content {
    z-index: 1;
  }
  .el-icon-bell {
    font-size: 18px;
  }
}

.tabs {
  .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
  }
}
</style>

