<template>
  <div class="arrow_down">
    <el-popover
      placement="bottom"
      width="284"
      trigger="click"
    >
      <div class="message">
        <ul class="p8 message-content">
          <li v-for="(item,index) in userMessageData" :key="index" class="clearfix message-content_li" @click="messageDetial(item)">
            <div class="fl">
              <p class="message-content_title tip-size">
                {{ item.title }}
              </p>
              <p class="message-content_time tip-size">
                {{ $Moment(item.createTime).format(momentSaveFormat) }}
              </p>
            </div>
            <!-- <span class="fr message-content_status tip-size" >
              {{ filterDictText(messageListStatus1,item.messageStatus) }}
            </span> -->
          </li>
        </ul>
        <div class="messagent-footer clearfix">
          <span type="info" class="messagent-footer_bth tip-size fl" @click="allMageRead">全部标记已读</span>
          <span type="info" class="messagent-footer_bth tip-size fr" @click="viewMore">查看更多</span>
        </div>
      </div>
      <el-button slot="reference" class="message-prpover">
        <i class="iconfont icon-message" />消息提示<el-badge :value="paginationData.total" class="mark" />
      </el-button>
    </el-popover>

    <!-- 查看消息记录弹框 -->
    <messageContent-dialog :key="new Date()*1" :dialog-data="messageContentDialog" />
  </div>
</template>

<script>
/* api接口 */
import { getMailToastList, modifyAllViewState } from '@/api/procurement/commonDesk'

/*  公共方法 */
import {
  filterObj,
  filterDictText
} from '@/assets/js/utils'
/*  公共方法 */
import { ListMixin } from '@/mixins/ListMixin'
import { procurementUserMessageGrounpMixins } from '../mixins/procurementUserMessageGrounpMixins'
/*  公共组件 */
import messageContent from '../procurementUserMessage-dialog' // 查看消息详情弹框
export default {
  name: 'ProcurementMessagentContentHeaderDetail',
  components: {
    'messageContent-dialog': messageContent //  查看消息详情弹框
  },
  mixins: [procurementUserMessageGrounpMixins, ListMixin],
  data() {
    return {
      searchForm: {
        title: '', // 标题
        createTimeBegin: '', // 发送开始时间
        createTimeEnd: '', // 发送结束时间
        mailSourceType: '', // 消息来源(发送人)01系统消息 02采购方
        viewState: '00' //  00未查看 '' 全部 01 已查看
      },
      messageList1: [], // 消息数据
      // 查看消息记录弹框
      messageContentDialog: {
        dialog: false,
        messageId: '' // 消息id
      }
    }
  },
  watch: {
    // 监听弹框
    'messageContentDialog.dialog'(val) {
      if (!val) {
        this.loadData()
      }
    }
  },
  mounted() {
    // 获取消息数据
    this.loadData()
  },
  destroyed() {
    clearInterval(this.currentUserMessage)
    this.currentUserMessage = false
  },
  methods: {
    filterDictText,
    // 点击消息查看详情
    messageDetial(message) {
      clearInterval(this.currentUserMessage)
      this.messageContentDialog.messageId = message.id
      this.messageContentDialog.dialog = true
    },
    // 全部标记为已读
    allMageRead() {
      // 调用查看更多请求
      this.modifyAllViewStateData()
    },
    // 查看更多
    viewMore() {
      // 跳转消息中心
      this.$router.push({ path: '/procurement/procurementUserMessageList' })
    },
    // 获取数据
    loadData() {
      // 获取请求参数
      const data = this.getQueryParams()
      getMailToastList(data).then(res => {
        // 获取消息数据
        this.userMessageData = res.data.records ? res.data.records.slice(0, 4) : [] // 消息中心 默认显示4条
        this.paginationData.total = res.data.total
        this.currentUserMessage = setTimeout(() => {
          this.userMessageData = []
          this.loadData()
        }, 2000)
      }).catch(() => {

      })
    },
    // 全部标记为已读请求
    modifyAllViewStateData() {
      modifyAllViewState().then(res => {
        // 查询数据请求
        this.loadData()
      }).catch(() => {

      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 3
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    }

  }
}
</script>

<style lang="less" scoped>
 @import url("~@/assets/style/common/public.less");

.message-prpover{
   color: @white;
   background: @hyacinthine;
   line-height: 55px;
   border: 0;
   &.el-button--small{
     padding: 0;
     border-radius: 0;
   }
   &.el-button{
     padding: 0 15px;
   }
}
.message{
  position: relative;
  height: 269px;
 .message-content{
   height: calc(269px - 46px);
   .tip-size;
     .message-content_li{
        line-height: 20px;
        border-bottom: 1px solid #ccc;
        .message-content_status{
          line-height: 40px;
        }
        .message-content_title{
          color:@dark-font;
        }
        .message-content_time{
          color: @light-font;
        }
     }
   }
   .messagent-footer{
     .tip-size;
     width:100%;
     height: 46px;
     position: absolute;
     bottom:0;
      .messagent-footer_bth{
       background-color: #F5F7F9;
       border: 1px solid #E5E7E8;
       text-align: center;
       cursor:pointer;
       line-height: 46px;
       width:50%;
       color: #666666;

     }
   }
}
/deep/.el-popover{
  padding: 0;
}
</style>
