<template>
  <div class="myMessage">
    <person-title>我的消息 >> <em>消息</em></person-title>
    <div class="myMessage-cont">
      <el-collapse
        @change="handleReadMsg"
        v-model="activeName" accordion>
        <el-collapse-item
          v-for='(item,index) in userMessage'
          :key='index'
          :class="{'messageIsRead':item.isRead ==2}"
          :title="item.title"
          :name="index">
          <template slot="title">
            <i class="el-icon-message"></i>
            {{ item.title }}
            ( {{ item.isRead == 2 ? '已读' : '未读' }} )
          </template>
          <p class="msg-body">
            {{ item.content }} <br>
            <span v-text="tiemChange(item.sendTime)"></span>
            <el-button type="danger" size='mini'
                       @click="handleDeleteMessage(item.id)"
                       icon="el-icon-delete" circle></el-button>
          </p>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="pageination-oder">
      <el-pagination v-if="showPagination"
                     background
                     @current-change="handleCurrentChange"
                     :current-page="selectDate.page"
                     :pager-count="5"
                     :page-size="selectDate.size"
                     layout="total, prev, pager, next, jumper"
                     :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
//借助兄弟通信, 之前是为了跳转菜单,
//这里借助一下 用来更新消息红点数量,名字就懒得改了
import {gotoNewOrder} from './../../assets/js/gotoNewOrder'
import {getMessageList, readerMessage, removeMessage} from '../../api/message'
import {formData} from '../../unit/formDate'

export default {
  data () {
    return {
      activeName: '',
      userMessage: [],
      loading: null,
      selectDate: {
        page: 1,
        size: 13,
      },
      count: 0,
      showPagination: true,
    }
  },
  mounted () {
    this.getMessage()
  },
  methods: {
    getMessage () {
      let loading = this.$loading({lock: true, text: '玩命加载中...'})
      loading.close()
      getMessageList(this.selectDate).then(res => {
        let data = res.data
        if (data.success) {
          this.userMessage = data.data.list
          this.count = data.data.count
          // this.$store.commit('saveUserInfo', {msgLen: this.count})
        } else {
          this.$message({
            type: 'error',
            message: data.msg
          })
        }
      })
    },
    handleReadMsg (data) {
      let vm = this
      let flag = vm.userMessage.filter(item => item.isRead == 1 && item.id == vm.userMessage[data].id)
      if (data != '' && flag.length) {
        readerMessage(flag[0].id).then(res => {
          let data = res.data
          if (data.success) {
            let it = flag[0]
            it.isRead = 2
            vm.userMessage[data] = it
            gotoNewOrder.$emit('readMessage')
          } else {
            vm.$message({
              type: 'error',
              message: data.msg
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    tiemChange (tiem) {
      return '(发送时间 : ' + formData(tiem, 'yyyy-MM-dd hh:mm:ss') + ')'
    },
    handleDeleteMessage (id) {
      this.$confirm('此操作将永久删除该消息, 是否继续?',
        '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
        removeMessage(id).then(res => {
          let data = res.data
          if (data.success) {
            this.$message({
              type: 'success',
              message: data.msg
            })
            this.getMessage()
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange (val) {
      this.selectDate.page = val
      this.getMessage()
    }
  }
}
</script>

<style lang='scss'>

.pageination-oder{  //订单页中的分页样式
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  //margin-top: 1rem;
  bottom: -3rem;
}

.myMessage-cont {
  text-align: left;
  // 展开的框框 ,下划线
  .el-collapse-item__header.is-active {
    border-bottom-color: #ebeef5;
  }

  //下划线
  .el-collapse-item__header {
    border-bottom: 1px solid #e2e2e2;
  }

  // 标题框
  .el-collapse-item__header {
    font-size: 0.8rem;
    padding-left: 2rem;
    color: rgb(85, 192, 211); //未读消息标题颜色
    background-color: #e7f2fb;
  }

  .messageIsRead .el-collapse-item__header {
    color: #999; //已读消息标题颜色
  }

  // 内容框
  .el-collapse-item__content {
    padding-left: 2rem;
    padding-top: 0.5rem;
  }

  .msg-body {
    letter-spacing: 0.1rem;
    padding-right: 2rem;
    color: #666;
  }
}
</style>
