
<template>
  <div class="app-container">
    <el-button
      :disabled="!isRead"
      class="read-option"
      size="small"
      type="primary"
      :loading="setReadLoading"
      plain
      @click="handleAllRead"
    >全部标为已读</el-button>
    <right-toolbar :search="false" @queryTable="getMessagePage" />

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in options.serviceType" :key="item.value" :name="item.value">
        <el-badge slot="label" :is-dot="false" class="message-list">{{ item.label }}</el-badge>
        <div v-if="messageList && messageList.length > 0">
          <message-list-item v-for="message in messageList" :key="message.id" :message="message" @ok="getMessagePage" />
          <pagination
            v-show="pagination.total>0"
            class="mb10"
            :total="pagination.total"
            :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize"
            @pagination="getMessagePage"
          />
          <div class="gap" />
        </div>
        <div v-else>
          <el-empty description="暂无通知" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import MessageListItem from '@/views/system/message/modules/MessageListItem.vue'
import { fetchMessagePage, setAllRead } from '@/api/system/message'
import options from '@/utils/dict/options'

export default {
  name: 'MessageIndex',
  components: {
    MessageListItem
  },
  data() {
    return {
      options,
      activeName: options.serviceType[0].value,
      messageList: [],
      setReadLoading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    isRead() {
      const { messageList } = this
      return messageList && messageList.length > 0 && messageList.filter(item => item.isRead === '0').length > 0
    }
  },
  created() {
    this.getMessagePage()
  },
  methods: {
    getMessagePage() {
      fetchMessagePage(Object.assign({}, this.pagination, { serviceType: this.activeName }))
        .then(({ data, total }) => {
          this.messageList = data
          this.pagination.total = total
        })
    },
    handleClick() {
      this.getMessagePage()
    },
    handleAllRead() {
      this.setReadLoading = true
      setAllRead(this.activeName).then(() => {
        this.$modal.msgSuccess('设置成功')
        this.getMessagePage()
      }).finally(() => {
        this.setReadLoading = false
      })
    }

  }
}
</script>
<style scoped lang="scss">
.message-list {
  ::v-deep .el-badge__content.is-dot {
    top: 12px;
  }
}
.app-container{
  position: relative;
  .read-option {
    position: absolute;
    z-index: 2;
    right: 65px;
    top: 18px;
  }
}
</style>
