<!-- 聊天列表 -->
<template>
  <div class="msglist">
    <ul>
        <!-- <li v-if="chartings.length==0"  class="modonghua" ></li>
        <li v-if="chartings.length==0"  class="modonghua" ></li>
        <li v-if="chartings.length==0"  class="modonghua" ></li>
        <li v-if="chartings.length==0"  class="modonghua" ></li>
        <li v-if="chartings.length==0"  class="modonghua" ></li>
        <li v-if="chartings.length==0"  class="modonghua" ></li>
        <li v-if="chartings.length==0"  class="modonghua" ></li> -->
        <li v-for="item in chartings" class="sessionlist" :class="{ active: item.id === user.selectId }" @click="selectSession(item)">
            <div class="list-left">
            	<img class="avatar"  width="42" height="42" :alt="item.user.name" :src="item.user.img||'static/images/weixin.jpg'">
                <span class="htp-top" v-if="item.unReadTotal!=0">
                    {{item.unReadTotal}}
                </span>
            </div>
            <div class="list-right">
            	<p class="name">{{item.user.name | name}}</p>
                <span class="time">{{item.queryData | time}}</span>
                <p class="lastmsg">{{item.messages | content}}</p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions ,mapGetters } from 'vuex'
import { panelStatus } from '@/utils/common'
export default {
    data(){
        return {
            fd:false
        }
    },
    computed: {
        panelStatus(){
            return panelStatus
        },
   	    ...mapState([
            'user',
        ]),
        ...mapGetters([
            'chartings',
        ])
    },
    methods: {
    	...mapActions('user',[
             'selectSession',
    	])	
    },
    mounted() {
        this.fd = true
        // let obj = this.chartings[0]
        // obj&&this.selectSession(obj)
    },
    watch:{
        // chartings(val){
        //     if(this.fd){
        //         this.fd = false
        //         if(val.lenght!=0){
        //             let obj = val[0]
        //             this.selectSession(obj)
        //         }
        //     }
        // }
    },
    filters: {
        time (date) {
            if(date){
                date = new Date(parseInt(date) * 1000);
                if(date.getMinutes()<10){
                  return date.getHours() + ':0' +date.getMinutes();
                }else{
                  return date.getHours() + ':' + date.getMinutes();
                }
            }else{
                return ""
            }
        },
        name(name){
            return name.length>8?name.substring(0,8)+'...':name;
        },
        content(messages){
            let temp =""
            if(!messages||messages.length==0){
                return ''
            }
            switch(messages[messages.length-1].type){
                case 1:
                    temp = messages[messages.length-1].content
                break;
                case 3:
                    temp = '[图片]'
                break;
                case 43:
                    temp = '[视频]'
                break;
                case 42:
                    temp = '[卡片]'
                break;
                case 34:
                    temp = '[语音]'
                break;
                case 10000:
                    temp = '[系统消息]'
                break;
                default: 
                    temp = '[其他]'
            }
            return temp
        }
    },
}
</script>

<style lang="stylus" scoped>
.modonghua{
    animation:mymove 3s;
    animation-iteration-count:20;
    height: 50px;background: #dedede;margin:10px;border-radius: 3px;
}

@keyframes mymove
{
    0%   {background:rgba(222,222,222,0.2);}
    25%  {background:rgba(222,222,222,0.5);}
    50%  {background:rgba(222,222,222,0.7);}
    100% {background:rgba(222,222,222,1);}
}
.list-left{
    width:60px;
}
.htp-top{
    font-size: 10px;
    background-color: red;
    border-radius: 20px;
    color: #ffffff;
    padding: 0 4px;
    position: relative;
    top: -40px;
    left: 35px;
}
.msglist
  height: calc(100% - 60px)
  overflow-y: auto
  .sessionlist
    display: flex
    padding: 12px
    transition: background-color .1s
    font-size: 0
    &:hover 
        background-color: rgb(220,220,220)
    &.active 
        background-color: #c4c4c4
    .avatar
        border-radius: 2px
        margin-right: 12px
    .list-right
        position: relative
        flex: 1
        margin-top: 4px
	    .name
	        display: inline-block
	        vertical-align: top
	        font-size: 14px
	    .time
	        float: right
	        color: #999
	        font-size: 10px
	        vertical-align: top
        .lastmsg
            position: absolute
            font-size: 12px
            width: 130px
            height: 15px
            line-height: 15px
            color: #999
            bottom: 4px
            overflow: hidden
            white-space:nowrap
            text-overflow:ellipsis
</style>
