<template>
    <div>
        <div class="d-flex chatUserParent" v-for="message in users" @click="selectChatId(message.from,message.to)">
            <img :src="message.from_user.id!=userId?
            message.from_user.attachments?
            '/files?uid='+message.from_user.attachments.uid+'&width=64&height=64':
            '/uploads/img/karshenas.png':
            message.to_user.attachments?
            '/files?uid='+message.to_user.attachments.uid+'&width=64&height=64':
            '/uploads/img/karshenas.png'" />
            <div class="details">
                <h5>{{message.from_user.id!=userId?
                    message.from_user.fname+' '+message.from_user.lname:
                    message.to_user.fname+' '+message.to_user.lname
                    }}</h5>
                <p>{{message.text}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                users:[],
                userId:null,
                chatId:null

            }
        },
        beforeMount(){
            axios.post('/message/list').then(res=>{
                this.users=res.data.data.message
                this.userId=res.data.data.userId
            })
        },
        watch:{
            chatId:function () {
                this.$parent.$emit('userChat', this.chatId);
            }
        },
        methods:{
            selectChatId:function (f,t) {
                if(this.userId != f){
                    this.chatId = f
                }else{
                    this.chatId = t
                }
                this.$forceUpdate()
            }
        }
    }
</script>
