<!-- 消息中心 -->
<template>
  <div class="msg-center">
    <Row>
      <Button
        :disabled="searchLoading || selectAllLoading || unreadCount === 0"
        :loading="selectLoading"
        @click="makeAsRead"
        icon="md-checkmark"
      >设为已读</Button>
      <Poptip
        @on-ok="makeAllAsRead"
        @on-popper-show="showPoptip"
        confirm
        popper-class="poptip-mod"
        title="确定将所有未读消息设为已读?"
      >
        <Button
          :disabled="searchLoading || selectLoading || unreadCount === 0"
          :loading="selectAllLoading"
          icon="md-done-all"
          style="margin-left: 4px;"
        >全部已读{{btnUnreadCount ? `(${btnUnreadCount})` : '' }}</Button>
      </Poptip>
      <DatePicker
        :disabled="searchLoading || selectAllLoading || selectLoading"
        :editable="false"
        placeholder="请选择月份"
        style="width: 200px;margin-left: 8px;"
        type="month"
        v-model="searchDateRange"
      ></DatePicker>
      <Button
        :disabled="selectAllLoading || selectLoading"
        :loading="searchLoading"
        @click="doInitSearch"
        style="margin-left: 8px;"
        type="primary"
      >查询</Button>
    </Row>
    <br />
    <Table
      :columns="columns"
      :data="dataList"
      :loading="searchLoading"
      :row-class-name="rowClassName"
      @on-selection-change="onSelectionChange"
      border
    ></Table>
    <br />
    <Page
      :current.sync="searchForm.pageNum"
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      show-total
    />
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import commonList from '@/mixin/commonList'
import MsgAPI from '@api/sys/msg'
import { format } from 'date-fns'
export default {
  name: 'msg',
  mixins: [commonList],
  data () {
    return {
      visable: false,
      searchForm: {
        searchDate: null
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '发起日期',
          width: 150,
          key: 'createTime',
          tooltip: true
        },
        {
          title: '消息类型',
          width: 150,
          render (h, params) {
            return h('div', params.row.map ? params.row.map.msgType : '')
          },
          tooltip: true
        },
        {
          title: '内容',
          key: 'content',
          tooltip: true
        },
        {
          title: '状态',
          key: 'action',
          width: 120,
          render: (h, params) => {
            const status = params.row.map ? params.row.map.status : 0
            if (status === 1) {
              return h(
                'div',
                {
                  class: 'unread-state'
                },
                '未读'
              )
            } else if (status === 2) {
              return h('div', '已读')
            } else {
              return h('div', '未知')
            }
          }
        }
      ],
      dataList: [],
      todoList: [],
      selectLoading: false,
      selectAllLoading: false
    }
  },
  computed: {
    btnUnreadCount () {
      return this.unreadCount > 99 ? '99+' : this.unreadCount
    },
    ...mapState({
      unreadCount: state => state.user.unreadCount
    })
  },
  watch: {
    searchDateRange () {
      if (this.searchDateRange) {
        this.searchForm.searchDate = format(
          this.searchDateRange,
          this.$config.MONTH_FORMAT
        )
      } else {
        this.searchForm.searchDate = null
      }
    }
  },
  mounted () {
    this.searchDateRange = null
  },
  methods: {
    ...mapActions(['getUnreadMessageCount']),
    showPoptip () {
      if (this.searchLoading || this.selectLoading || this.unreadCount === 0) {
        this.$nextTick(() => {
          document.querySelector('.poptip-mod').style.display = 'none'
        })
      } else {
        document.querySelector('.poptip-mod').style.display = 'block'
      }
    },
    rowClassName (row) {
      const status = row.map ? row.map.status : 0
      if (status === 1) {
        return 'table-row-unread'
      } else {
        return 'table-row-readed'
      }
    },
    doSearch () {
      this.searchLoading = true
      this.getUnreadMessageCount()
      this.$nextTick(() => {
        MsgAPI.viewList({ ...this.searchForm })
          .then(({ data }) => {
            this.searchLoading = false
            if (data.status === 'success') {
              this.dataList = data.data.list.map(item => {
                item.createTime = item.map.createTime
                return item
              })
              this.total = data.data.total
            }
          })
          .catch(err => {
            console.error('err:', err)
            this.searchLoading = false
          })
      })
    },
    onSelectionChange (selection) {
      this.todoList = []
      selection.forEach(item => {
        this.todoList.push(item.uuid)
      })
    },
    // 勾选已读
    makeAsRead () {
      const msgList = this.todoList
      if (msgList.length === 0) {
        this.$Message.warning('请选择消息')
        return
      }
      this.selectLoading = true
      const operate = 0
      MsgAPI.operate({ msgList, operate })
        .then(({ data }) => {
          this.selectLoading = false
          if (data.code === 200) {
            this.$Message.success('操作成功')
            this.doInitSearch()
            this.todoList = []
            this.getUnreadMessageCount()
          }
        })
        .catch(err => {
          console.error('err', err)
          this.selectLoading = false
        })
    },
    // 全部已读
    makeAllAsRead () {
      this.selectAllLoading = true
      const operate = 1
      MsgAPI.operate({ operate })
        .then(({ data }) => {
          this.selectAllLoading = false
          if (data.code === 200) {
            this.$Message.success('操作成功')
            this.doInitSearch()
            this.todoList = []
            this.getUnreadMessageCount()
          }
        })
        .catch(err => {
          console.error('err', err)
          this.selectAllLoading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.msg-center {
  /deep/ .ivu-table {
    .table-row {
      &-unread {
        td {
          color: @msg-unread-color;
          .unread-state {
            color: @primary-color;
          }
        }
      }
      &-readed {
        td {
          color: @msg-readed-color;
        }
      }
    }
  }
}
</style>
