· 5 years ago · Mar 27, 2020, 01:46 AM
1<template>
2 <div>
3 <Header />
4 <div class="chat">
5 <div class="chat__sideL" id="chat__L">
6 <div class="chat__sideL__inner">
7 <div class="chat__sideL--header" v-if="info">
8 <div class="chat__info dflex-mid">
9 <span class="icon">
10 <img :src="info.avatar" alt />
11 </span>
12 <p>
13 <span class="chat__user--name">{{info.nickName}}</span>
14 <span class="chat__user--id">{{info._id}}</span>
15 </p>
16 </div>
17 <div class="chat__searchBox dflex">
18 <img src="../../assets/images/chat/images/ic_search.png" alt />
19 <input
20 type="text"
21 name="search"
22 :placeholder="$i('Search')"
23 v-model="objDataListChat.searchKeyword"
24 />
25 </div>
26 </div>
27 <div class="chat__list" v-if="listConversation">
28 <div
29 class="chat__list--item"
30 v-for="e in listConversation"
31 :key="e.id"
32 :class="{ 'active': (selectConversation == e._id),'notification':(e.unread && e.unread != 0)}"
33 @click="showDetail(e._id)"
34 >
35 <div
36 class="chat__avatar"
37 v-for="i in e.members"
38 v-if="i._id != info._id && i._id < idAdmin && !i.isStaff"
39 >
40 <img :src="i.avatar" alt />
41 </div>
42 <div class="chat__content">
43 <div class="chat__row">
44 <div
45 class="chat__row--inner"
46 v-for="i in e.members"
47 v-if="i._id != info._id && i._id < idAdmin && !i.isStaff"
48 >
49 <div class="username">{{i.nickName}}</div>
50 <div class="message">{{e.name}}</div>
51 </div>
52 <div class="chat__count" v-if="e.unread && e.unread != 0">
53 <span>{{e.unread}}</span>
54 </div>
55 <!-- <i class="fas fa-trash" v-on:click.stop @click="deleteConversation(e._id)"></i> -->
56 </div>
57 <div class="chat__status">
58 <div
59 class="chat__status--content w-200"
60 >{{e.lastMessage ? e.lastMessage.body : ""}}</div>
61 <div class="chat__status--time">
62 <span class="chat__status--date">{{ e.lastMessage ? ( e.lastMessage.date) : ""}}</span>
63 <span>{{e.lastMessage ? e.lastMessage.time : ""}}</span>
64 </div>
65 </div>
66 </div>
67 </div>
68 <infinite-loading @infinite="loadMoreChat" :identifier="infiniteId">
69 <div slot="no-more">{{$i('no_more_conversation')}}</div>
70 </infinite-loading>
71 </div>
72 </div>
73 </div>
74 <div class="chat__sideR" id="chat">
75 <div class="chat__header" v-if="detail">
76 <div
77 class="chat__headerLeft"
78 v-for="e in detail.members"
79 v-if="e._id != info._id && e._id < idAdmin && !e.isStaff"
80 >
81 <a class="btn btn-back-mobile-kz" href="javasrcip:;" @click="back">
82 <img src="../../assets/images/chat/images/btn-back-mobile.png" alt />
83 </a>
84 <div class="avatar">
85 <a href="javascrip:;">
86 <img :src="e.avatar" alt />
87 </a>
88 </div>
89 <div class="info">
90 <div class="name-kz">
91 <a href="javascrip:;">{{e.nickName}}</a>
92 </div>
93 <div class="description-kz">{{detail.name}}</div>
94 </div>
95 </div>
96 <div class="chat__headerRight">
97 <a class="btn__support" href="javascript:;" @click="requireAdmin()">
98 <span class="icon-kz">
99 <img src="../../assets/images/chat/images/ic_sp.png" alt />
100 </span>
101 </a>
102 </div>
103 </div>
104 <div class="chat__board" ref="chat_list_me">
105 <infinite-loading
106 v-if="selectConversation"
107 direction="top"
108 @infinite="getListMessage"
109 :identifier="infiniteId2"
110 >
111 <div slot="no-more">{{$i('no_more_message')}}</div>
112 </infinite-loading>
113
114 <div v-for="e in messages" :key="e._id" :class="e.memberId == info._id ? 'chat__partner' : 'chat__owner'">
115 <div class="avatar-kz" :class="e.memberId == info._id ? 'display-none' : ''">
116 <a href="#" v-if="detail.members">
117 <img :src="getAvatar(e.memberId)" alt="">
118 </a>
119 </div>
120 <div class="chat__owner__content-kz" >
121 <div v-for="(i,index) in e.array" :key="i._id">
122 <!-- {{i}} -->
123 <div v-if="(index >0 && i.timeStamp != e.array[index-1].timeStamp) || index == 0">{{i.timeStamp}}</div>
124 <!-- <div v-if="(index >0 && i.timeStamp_date != e.array[index-1].timeStamp_date) || index == 0">{{i.timeStamp_date}}</div> -->
125
126 <div class="chat__other" v-if="e.memberId == info._id">
127 <i class="fas fa-ellipsis-h"></i>
128 <div class="chat__other__sub">
129 <span class="chat__other__edit" v-if="i.type==text" @click="submitEdit(i.conversationId, i._id, i.body)">Edit</span>
130 <span class="chat__other__remove" @click="deleteMessange(i.conversationId, i._id)">Remove</span>
131 </div>
132 </div>
133 <p v-if="i.type==text" >
134 {{i.body}}
135 <!-- <i
136 class="fas fa-trash"
137 v-on:click.stop
138 @click="deleteMessange(e.conversationId,e._id)"
139 ></i> -->
140 <!-- <i class="fas fa-edit" v-on:click.stop @click="editMessage(e.conversationId,e._id)"></i> -->
141 </p>
142 <span v-else class="img-wrapper">
143 <!-- <i
144 class="fas fa-trash"
145 v-on:click.stop
146 @click="deleteMessange(e.conversationId,e._id)"
147
148 ></i> -->
149 <img :src="i.body">
150 </span>
151 </div>
152
153 <!-- <p>:)</p> -->
154 <!-- <p>Hãy tới phỏng vấn trước 5h30 nhé</p> -->
155 </div>
156 <div class="avatar-kz" :class="e.memberId == info._id ? '' : 'display-none'">
157 <a href="#" v-if="detail.members">
158 <img :src="getAvatar(e.memberId)" alt="">
159 </a>
160 </div>
161 </div>
162
163
164
165 </div>
166 <!-- {{typing}} -->
167 <span v-if="typing" class="typing_enter">There are people entering text ...</span>
168 <div class="footer-chat-message">
169 <div class="box-btn-share-chat-wrapper">
170 <div class="c---attach-preview px-2">
171 <div class="h-100" ref="UploadComponent">
172 <MessengerPreviewAttach :loading="loading" class="c---attach-preview-wrapper" v-if="attachments && attachments.length > 0" :attachments.sync="attachments" @onRemove="onRemoveAttachment" />
173 </div>
174 </div>
175 <div class="chat__bottom">
176 <a href="javascrip::" class="btn__attach">
177 <i class="fas fa-paperclip" @click="$refs.images.click()"></i>
178 <input type="file" ref="images" accept="image/jpg, image/jpeg, image/png" @input="onFileChange($event, $event.target.name, $event.target.files)" style="display:none" />
179 </a>
180 <input
181 @keyup.enter="onSubmit"
182 type="text"
183 name="chat__txt"
184 :placeholder="$i('chat_enter_message')"
185 v-model="newMessage"
186 ref="inputElement"
187 />
188 <a href="javascrip:;" class="btn__send-kz">
189 <i class="far fa-paper-plane" @click="onSubmit"></i>
190 </a>
191 </div>
192 </div>
193 </div>
194 </div>
195 </div>
196 </div>
197</template>
198
199<script>
200import axios from 'axios';
201
202import { mapActions, mapGetters, mapState } from "vuex";
203import Vue from "vue";
204import config from "../../config";
205import { typeMessage, idAdmin } from "../../types/enum";
206import InfiniteLoading from "vue-infinite-loading";
207import moment from "moment";
208Vue.use(InfiniteLoading, {
209});
210export default {
211 name: "chat",
212 data() {
213 return {
214 messageId:'',
215 attach: [],
216 newMessageImages: [],
217 text: typeMessage.TEXT,
218 idAdmin: idAdmin.id,
219 typeImage: typeMessage.IMAGE,
220 time: [],
221 attachments: [],
222 image: "",
223 selectConversation: null,
224 info: null,
225 arr: [],
226 listConversation: [],
227 detail: {},
228 newMessage: '',
229 messages: [],
230 typing: false,
231 objDataListChat: {
232 pageIndex: 1,
233 pageSize: 10,
234 searchKeyword: null
235 },
236 infiniteId: +new Date(),
237 infiniteId2: new Date(),
238 objDataListMess: {
239 skip: 0,
240 pageSize: 10,
241 Id: null,
242 },
243 myHeaders: {
244 secret_key: config.logic_api.secret_key,
245 token: localStorage.getItem("token"),
246 'Content-Type': 'multipart/form-data'
247 },
248 uploadAction: config.logic_api.api.url + '/upload',
249 attachmentImages:[],
250 loading: false,
251 };
252 },
253 components: {
254 Header: () => import("../../components/header/index"),
255 InfiniteLoading,
256 MessengerPreviewAttach: () =>
257 import("../../components/messenger/MessengerPreviewAttach"),
258 // Upload: () => import("../../components/common/upload")
259 },
260 watch: {
261 newMessage(value) {
262 // console.log("vbvc",value, this.$socket.emit('typing'))
263 value ? this.$socket.emit('typing', this.selectConversation) : null ;
264 },
265 "objDataListChat.searchKeyword"(value) {
266 let me = this;
267 setTimeout(function() {
268 me.listChatSearch();
269 }, 500);
270 }
271 },
272 sockets: {
273 connectNotification: function() {},
274 leaveConversation: function() {},
275 joinConversation: function(data) {},
276 typing: function(data) {
277 console.log('typing',data)
278 },
279 newMessage: function(data) {
280 // console.log("4444", data);
281 this.checkNewMes(this.messages, data)
282 this.scrollToEnd();
283
284
285 },
286 updateMessage: function(data) {
287 // console.log("4444", data);
288 this.messages.map((i)=>{
289 i.array.map((k,index)=>{
290 if(k._id == (data._id)){
291 i.array[index].body = data.body
292 // console.log("iiiiupdate", k, i.array[index])
293 }
294 })
295 })
296
297
298 },
299 rootNewMessage: function(data) {
300
301 // console.log("memberNotify",this.listConversation)
302
303 if (data.conversationId != this.selectConversation) {
304 let memberNotify = this.detail.members.filter(i => i._id == data.memberId);
305 memberNotify.map(i => {
306 this.$notify.warning(i.nickName + " " +"đã gửi cho bạn một tin nhắn");
307 });
308 }
309 let tmp = null;
310 this.listConversation.map((e,index)=>{
311 if(e._id == parseInt(data.conversationId)){
312 tmp = e;
313 this.listConversation.splice(index,1);
314 // this.selectConversation = data.conversationId;
315
316 }
317 })
318 if(tmp){
319 this.infiniteId +=1;
320 this.listConversation.unshift(tmp);
321 }
322 this.listConversation.map(e => {
323 if (e._id == data.conversationId) {
324 e.lastMessage = data;
325 if (e.lastMessage && e.lastMessage.timeStamp) {
326 e.lastMessage.time = moment(e.lastMessage.timeStamp).format("LT");
327 e.lastMessage.date = moment(e.lastMessage.timeStamp).format("YYYY/MM/DD");;
328 }
329 }
330 if(e._id == data.conversationId && this.selectConversation != data.conversationId){
331 e.unread +=1
332 e.lastMessage = data;
333 if (e.lastMessage && e.lastMessage.timeStamp) {
334 e.lastMessage.time = moment(e.lastMessage.timeStamp).format("LT");
335 e.lastMessage.date = moment(e.lastMessage.timeStamp).format("YYYY/MM/DD");
336 }
337 }
338
339 });
340
341 // console.log("555", data);
342 // this.infiniteId +=1;
343 // this.listConversation = [];
344 // this.objDataListChat.pageIndex =1;
345 // this.listChatSearch();
346 },
347 deleteMessage : function(data) {
348 // console.log("delete", data)
349 this.listConversation.map(e => {
350 // console.log(e._id, data.conversationId)
351 if (e._id == data.conversationId) {
352 e.lastMessage.body = "Tin nhắn đã bị xóa";
353 if (e.lastMessage && e.lastMessage.timeStamp) {
354 e.lastMessage.time = moment(data.timeStamp).format("LT");
355 e.lastMessage.date = moment(data.timeStamp).format("YYYY/MM/DD");
356 }
357 }
358
359 })
360 let tmp = null;
361 this.messages.map((i)=>{
362 i.array.map((k,index)=>{
363 if(k._id == (data._id)){
364 i.array.splice(index,1);
365
366 }
367 })
368
369 })
370 }
371 },
372 updated() {
373 // this.scrollToEnd();
374 },
375 mounted() {
376 localStorage.setItem("token", JSON.stringify(this.$route.query.token));
377 this.getInfor();
378 let me = this;
379 setTimeout(function() {
380 me.scrollToEnd();
381 }, 700);
382 // this.$router.push({
383 // path: '/chat',
384
385 // });
386 },
387 created() {},
388
389 methods: {
390 ...mapActions({
391 getListChats: "chat/getListChat",
392 getInfo: "chat/getMemberInfo",
393 getDetailConversation: "chat/getDetailConversation",
394 addConversation: "chat/addConversation",
395 listMessages: "chat/listMessage",
396 deleteMess: "chat/deleteMessage",
397 delete: "chat/deleteConversation",
398 updateMessage: "chat/updateMessage",
399 callAdmin: "chat/callAdmin",
400 }),
401 requireAdmin() {
402 this.$confirm(this.$i("Do you want require admin"), this.$i("Warning"), {
403 type: "warning",
404 confirmButtonClass: "confirm-delete",
405 cancelButtonClass:
406 "confirm-delete text-white cancel-delete bg-grey border-grey",
407 customClass: "confirm-modal"
408 })
409 .then(() => {
410 this.callAdmin(this.selectConversation)
411 .then(res => {
412 this.$success(this.$i("Successful"));
413 })
414 .catch(err => {
415 this.$errorData(err.message);
416 });
417 })
418 .finally(() => {});
419 },
420 emitImgPreview(value) {
421 this.attach = value;
422 },
423 getImage(value) {
424 this.newMessageImages = value;
425 this.setInputFocus();
426 },
427 setInputFocus() {
428 try {
429 this.$refs.inputElement.focus();
430 } catch (e) {
431 console.log(e);
432 }
433 },
434
435
436
437 checkNewMes(array, obj) {
438 let list = array
439 let count = list.length
440 if (list[count - 1].memberId == obj.memberId) {
441 list[count - 1].array.push(obj)
442 } else {
443 let objData = {}
444 objData.memberId = obj.memberId
445 objData.type = obj.type
446 // console.log(obj)
447 objData.array = []
448 objData.array.push(obj)
449 list.push(objData)
450 }
451 },
452
453
454 getAvatar(id) {
455 var checkAvt = this.detail.members.find(e => e._id == id)
456 return checkAvt ? checkAvt.avatar : null
457 },
458
459 formatList(array){
460 var memberId = null
461 var arrayChil = []
462 return array.reverse().reduce(function(acc, obj) {
463 // console.log(obj)
464 obj.timeStamp = moment(obj.timeStamp).format("YYYY-MM-DD HH");
465 if (!memberId) {
466 console.log(" cvcv log", obj)
467 let obj_ = {};
468 memberId = obj.memberId;
469 obj_['memberId'] = obj.memberId;
470 obj["type"] = obj.type;
471 arrayChil.push(obj)
472 obj_['array'] = arrayChil
473 acc.push(obj_);
474 } else if (memberId === obj.memberId) {
475 arrayChil.push(obj)
476 } else {
477 let obj_ = {};
478 arrayChil = []
479 memberId = obj.memberId;
480 obj_['memberId'] = obj.memberId;
481 obj_["type"] = obj.type;
482
483 arrayChil.push(obj)
484 obj_['array'] = arrayChil
485 acc.push(obj_);
486 }
487 return acc;
488 }, [])
489 },
490
491 getListMessage($state) {
492 // let id = this.$route.params.id;
493 // console.log("get", this.objDataListMess);
494 // if(this.selectConversation){
495 // let me = this;
496 // setTimeout(function() {
497 // if(!this.selectConversation){
498 // this.objDataListMess.Id = id
499 // }else{
500 this.objDataListMess.Id = this.selectConversation;
501
502 // }
503 this.listMessages(this.objDataListMess)
504 .then(res => {
505 if (res.data.length) {
506 this.objDataListMess.skip += res.data.length;
507 // let tmp = res.data.reverse();
508 // this.messages = tmp.concat(this.messages)
509
510
511 this.messages = [...this.formatList(res.data), ...this.messages];
512 // console.log(this.messages)
513 // this.arr.push(...res.data);
514 // this.messages = this.arr.reverse();
515 $state.loaded();
516 } else {
517 $state.complete();
518 }
519 })
520 .catch(err => {
521 this.$errorData(err.message);
522 });
523 // }, 500);
524
525 // }
526
527 // this.objDataListMess.Id=this.selectConversation
528 // this.listMessages(this.objDataListMess)
529 // .then(res => {
530 // if (res.data.length) {
531 // this.objDataListMess.skip += 1;
532 // this.arr.push(...res.data);
533 // this.messages = this.arr.reverse();
534 // // this.destroy()
535 // // $state.loaded();
536 // } else {
537 // // $state.complete();
538 // }
539 // })
540 // .catch(err => {
541 // this.$errorData(err.message);
542 // });
543 },
544 submitEdit(conversationId, messageId, body) {
545 // let id = conversationId + messageId;
546 this.newMessage = body
547 this.messageId = messageId
548 this.setInputFocus()
549 // let params = {
550 // id: messageId,
551 // body: event.target.value
552 // };
553 },
554 editMessage(conversationId, messageId) {
555 let param = {
556 conversationId: conversationId,
557 messageId: messageId
558 };
559 let id = conversationId + messageId;
560 document.getElementById(id).disabled = false;
561 },
562 scrollToEnd() {
563 var content = this.$refs.chat_list_me;
564 content.scrollTop = content.scrollHeight;
565 },
566 deleteConversation(conversationId) {
567 this.$confirm(
568 this.$i("Do you want delete conversation"),
569 this.$i("Warning"),
570 {
571 type: "warning",
572 confirmButtonClass: "confirm-delete",
573 cancelButtonClass:
574 "confirm-delete text-white cancel-delete bg-grey border-grey",
575 customClass: "confirm-modal"
576 }
577 )
578 .then(() => {
579 this.delete(conversationId)
580 .then(res => {
581 this.$success(this.$i("Successful"));
582 this.listChatSearch();
583 })
584 .catch(err => {
585 this.$errorData(err.message);
586 });
587 })
588 .finally(() => {});
589 },
590 deleteMessange(conversationId, messageId) {
591 let param = {
592 conversationId: conversationId,
593 messageId: messageId
594 };
595
596 this.$confirm(this.$i("DoYouWantDelete"), this.$i("Warning"), {
597 type: "warning",
598 confirmButtonClass: "confirm-delete",
599 cancelButtonClass:
600 "confirm-delete text-white cancel-delete bg-grey border-grey",
601 customClass: "confirm-modal"
602 })
603 .then(() => {
604 this.deleteMess(param)
605 .then(res => {
606 this.$success(this.$i("Successful"));
607 })
608 .catch(err => {
609 this.$errorData(err.message);
610 });
611 })
612 .finally(() => {});
613 },
614 showDetail(Id) {
615 this.selectConversation = Id;
616 this.messages = [];
617 this.arr = [];
618 this.objDataListMess = {
619 skip: 0,
620 pageSize: 10,
621 Id: this.selectConversation
622 };
623 this.infiniteId2 += 1;
624 this.$socket.emit("leaveConversation", this.selectConversation);
625 this.scrollToEnd();
626 this.active = true;
627 this.listConversation.map(e => {
628 if (e._id == Id) {
629 e.unread = 0;
630 }
631 });
632 this.$socket.emit("joinConversation", Id);
633 this.getDetailConversation(Id).then(res => {
634 var element = document.getElementById("chat");
635 element.classList.add("active");
636 this.detail = res.data;
637 // let objDataListMess = {
638 // skip: 0,
639 // pageSize: 10,
640 // Id: Id
641 // };
642 // this.listMessages(this.objDataListMess)
643 // .then(res => {
644 // this.messages = res.data.reverse();
645 // // this.scrollToEnd();
646
647 // })
648 // .catch(err => {
649 // this.$errorData(err.message);
650 // });
651 });
652 },
653 // getMessage($state) {
654 // this.objDataListMess.skip += 1;
655 // this.showDetail(this.selectConversation)
656 // },
657 back(){
658 var element = document.getElementById("chat");
659 element.classList.remove("active");
660 var element = document.getElementById("chat__L");
661 element.classList.add("active");
662 },
663 onSubmit() {
664 if (this.newMessage && this.newMessage.trim()) {
665 let params = {
666 conversationId: this.selectConversation,
667 type: this.text,
668 body: this.newMessage
669 };
670 let paramUpdate = {
671 body: this.newMessage,
672 id: this.messageId
673 }
674 let editOrCreate = this.messageId ? this.updateMessage(paramUpdate): this.addConversation(params)
675 editOrCreate.then(res => {
676 this.newMessage = null;
677 this.messageId=null
678 // this.listChatSearch();
679 })
680 .catch(err => {
681 this.$errorData(err.message);
682 });
683 } else {
684 if (this.attachmentImages && this.attachmentImages != "") {
685 let params = {
686 conversationId: this.selectConversation,
687 type: this.typeImage,
688 body: this.attachmentImages.toString()
689 };
690 this.addConversation(params)
691 .then(res => {
692 this.attachments = [];
693 // this.$refs.UploadComponent.removeAll();
694 this.attachmentImages = [];
695 // this.listChatSearch();
696 })
697 .catch(err => {
698 this.$errorData(err.message);
699 });
700 }
701 }
702 },
703 loadMoreChat($state) {
704 if(this.objDataListChat.searchKeyword == ""){
705 delete this.objDataListChat.searchKeyword;
706 }
707 this.getListChats(this.objDataListChat)
708 .then(res => {
709 if (res.data.length) {
710 this.objDataListChat.pageIndex += 1;
711 this.listConversation.push(...res.data);
712 $state.loaded();
713 } else {
714 $state.complete();
715 }
716 this.listConversation.map(e => {
717 if (e.lastMessage && e.lastMessage.timeStamp) {
718 e.lastMessage.time = moment(e.lastMessage.timeStamp).format("LT");
719 e.lastMessage.date = moment(e.lastMessage.timeStamp).format("YYYY/MM/DD");
720 }
721 if (this.selectConversation == e._id) {
722 e.unread = 0;
723 }
724 });
725 if (!this.selectConversation) {
726 this.listConversation = res.data;
727 // this.detail = this.listConversation[0];
728 // console.log("123");
729 // console.log("this.$route", this.$route)
730 this.selectConversation = this.$route.query.id || this.listConversation[0]._id;
731 // console.log("selectConver", this.selectConversation,this.$route.query.id)
732 this.showDetail(this.selectConversation);
733 this.showDetail(this.selectConversation);
734 this.listConversation.map(e => {
735 if (e._id == this.selectConversation) {
736 e.unread = 0;
737 }
738 });
739 }
740 })
741 .catch(err => {
742 this.$errorData(err.message);
743 });
744 },
745 listChatSearch() {
746 if (this.objDataListChat.searchKeyword == "") {
747 this.infiniteId +=1
748 this.objDataListChat.pageIndex = 1;
749 this.listConversation = [];
750 } else {
751 this.objDataListChat.searchKeyword == ""? null : this.objDataListChat.searchKeyword;
752 let tmp = JSON.parse(JSON.stringify(this.objDataListChat));
753 tmp.pageIndex = 1;
754 this.getListChats(tmp)
755 .then(res => {
756 this.listConversation = res.data;
757 this.listConversation.map(e => {
758 if (e.lastMessage && e.lastMessage.timeStamp) {
759 e.lastMessage.time = moment(e.lastMessage.timeStamp).format("LT");
760 e.lastMessage.date = moment(e.lastMessage.timeStamp).format("YYYY/MM/DD");
761 }
762 if (this.selectConversation == e._id) {
763 e.unread = 0;
764 }
765 });
766 })
767 .catch(err => {
768 this.$errorData(err.message);
769 });
770 }
771 },
772 // listConversationChat() {
773 // this.objDataListChat.searchKeyword == ""
774 // ? null
775 // : this.objDataListChat.searchKeyword;
776 // let tmp = JSON.parse(JSON.stringify(this.objDataListChat));
777 // tmp.pageIndex = 1;
778 // this.getListChats(tmp)
779 // .then(res => {
780 // this.listConversation = res.data;
781 // this.listConversation.map(e => {
782 // if (e.lastMessage && e.lastMessage.timeStamp) {
783 // e.lastMessage.time = moment(e.lastMessage.timeStamp).format("LT");
784 // e.lastMessage.date = moment(e.lastMessage.timeStamp).format("L");
785 // }
786 // if (this.selectConversation == e._id) {
787 // e.unread = 0;
788 // console.log("unread get", e.unread);
789 // }
790 // });
791 // })
792 // .catch(err => {
793 // this.$errorData(err.message);
794 // });
795 // },
796 getInfor() {
797 this.getInfo()
798 .then(res => {
799 this.info = res.data;
800 })
801 .catch(err => {
802 this.$errorData(err.message);
803 });
804 },
805 onRemoveAttachment(index) {
806 if (index >= 0 && this.attachments[index]) {
807 this.attachments.splice(index, 1);
808 }
809 },
810 onFileChange(event, fieldName, files) {
811
812 try {
813 this.attachments = this.attachments.concat(Array.from(files));
814 this.setInputFocus()
815 event.target.value = "";
816 let formData = new FormData();
817 for( var i = 0; i < this.attachments.length; i++ ){
818 let file = this.attachments[i];
819 formData.append('files', file);
820 }
821 this.loading = true;
822 let me = this;
823 axios.post(this.uploadAction,formData).then(function(res){
824 me.loading = false;
825 me.attachmentImages = res.data.data
826
827
828 // me.$emit('emitImg', me.attachmentImages)
829 // me.$emit('emitImgPreview', me.attachments)
830 })
831 .catch(function(){
832 // me.loading = false;
833 });
834
835 } catch (e) {
836 console.log(e);
837 }
838 },
839 }
840};
841</script>
842
843<style>
844.typing_enter {
845 color: #909399;
846}
847.display-none {
848 display: none;
849}
850img {
851 display: inline-block;
852 vertical-align: middle;
853 width: 100%;
854 }
855</style>