<template>
<div class='container'>
  <!--未读消息-->
  <div v-for='(v,i) in lists' :key='i'>
    <navigator  :url="leaveUrl+v.data.linke_id+'&sysNewsId='+v.data.id" v-if="v.key==0">
      <div class="list" >
        <p class="type">我的请假</p>
        <p >审批状态：{{v.data.content}}</p>
        <span>{{v.data.createDate}}</span>
        <div v-if='v.isView==1' class="read"></div>
      </div>
    </navigator>
    <navigator  :url="consultantUrl+v.data.linke_id+'&sysNewsId='+v.data.id"  v-if="v.key==1">
      <div class="list" >
        <p class="type">咨询我的</p>
        <p>{{v.data.title}}</p>
        <span>{{v.data.createDate}}</span><span class="line">|</span><span>{{v.data.wx_Name}}</span>
        <div v-if='v.isView==1' class="read"></div>
      </div>
    </navigator>
    <navigator  :url="sysNewUrl+v.data.id"  v-if="v.key==2">
      <div class="list" >
        <p class="type">系统消息</p>
        <p>{{v.data.title}}</p>
        <span>{{v.data.createDate}}</span>
        <div v-if='v.isView==1' class="read"></div>
      </div>
    </navigator>
    <navigator  :url="substitute+v.data.linke_id+'&sysNewsId='+v.data.id"  v-if="v.key==4">
      <div class="list" >
        <p class="type">我的代班</p>
        <p >审批状态：{{v.data.content}}</p>
        <span>{{v.data.createDate}}</span>
        <div v-if='v.isView==1' class="read"></div>
      </div>
    </navigator>
  </div>
  <NoData v-if='loaded && lists.length==0' paddingTop=182 />
</div>
</template>
<script>
import NoData from '@/components/NoData'

  export default {
    components: { NoData },
    data() {
      return {
        lists: [],
        loaded: false,
        hasMessage: false,
        number: '',
        leaveUrl: '../leaveInfo/main?id=',
        consultantUrl: '../questiondetail/main?cwxid=',
        sysNewUrl: '../mynewsInfo/main?id=',
        substitute: '../substituteInfo/main?id='
      }
    },
    methods: {
      getLawMessage(){
        this.loaded = false;
        wx.request({
          url: this.rootUrl + 'message/getLawMessage',
          method: 'get',
          data: { sessionID: wx.getStorageSync('sessionID') },
          success: res => {
            if(res.data.length>0){
              const ruselt = res.data
              ruselt.forEach((v,i) => {
                if(v.data.createDate!=null && v.data.createDate!=''){
                  v.data.createDate = this.service.correctTime(v.data.createDate, 'full')
                }
              })
              this.lists = ruselt
            }else{
              this.loaded = true;
            }
          }
        })
      }
    },
    onShow() {
      this.getLawMessage()
    },
    onUnload(){
      this.lists=[];
      this.hasMessage = false;
      this.number = '';
      // this.loaded = false;
    }
  }
</script>
<style lang="stylus" scoped>
.container
  position absolute
  min-height 100%
  width 100%
  Background()
.list
  margin 20rpx
  width calc(100% - 40rpx)
  box-sizing border-box
  padding 20rpx
  border-radius 12rpx
  background-color #fff
  position relative
.type
  color #888
  font-size 28rpx
  line-height 30rpx
.list p
  margin-bottom 10rpx
  line-height 50rpx
  overflow hidden
  text-overflow ellipsis
  display -webkit-box
  -webkit-line-clamp 2
  -webkit-box-orient vertical
.list span
  font-size 28rpx
  color #999
.line
  margin 0 20rpx
  color #999
.read
  width 100%
  height 100%
  position absolute
  top 0
  left 0
  z-index 100
  background-color rgba(255,255,255,.5)
</style>

