<template>
	<view>
		<watermark></watermark>
		<uni-list-wx>
			<uni-list-wx :border="true">
				<view class="alertTips" v-if="list.length <= 0">暂无消息,快去联系你的好朋友吧</view>
				<template v-for="(v, i) in toplist" :key="i">
					<uni-list-chat-wx color="#eeeeee" :itemKey="i" :item="v" @longpressItem="longpressItem"
						:longTapItemKey="longTapItemKey" @click="clickChat(v)" clickable :title="v.nickName"
						:note="v.content" :time="v.time" badge-positon="left" :badge-text="v.num"></uni-list-chat-wx>
				</template>
				<template v-for="(v, i) in NOTtoplist" :key="i">
					<uni-list-chat-wx color="#fff" :itemKey="i" :item="v" @longpressItem="longpressItem"
						:longTapItemKey="longTapItemKey" @click="clickChat(v)" clickable :title="v.nickName"
						:note="v.content" :time="v.time" badge-positon="left" :badge-text="v.num"></uni-list-chat-wx>
				</template>
			</uni-list-wx>
		</uni-list-wx>
		<top-right-tool-wx ref="trtw"></top-right-tool-wx>
	</view>
</template>

<script>
	import {
		getUrlParam
	} from "../../common/utils"

	export default {
		data() {
			return {
				longTapItemKey: 0,
				tranMsg: '',
				list: [],
				toplist: [],
				NOTtoplist: [],
				clickToSubmitSure: null,
				timer: null
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			},
			chatlist() {
				return this.$store.state.chatlist;
			},
			chatlistkeys() {
				return Object.keys(this.chatlist);
			},
			chatListNum() {
				return this.$store.state.chatListNum;
			},
			topicReply() {
				return this.$store.state.topicReply;
			},
			friendApply() {
				return this.$store.state.friendApply;
			}
		},
		onLoad(options) {
			console.log("首页获取到url参数")
			console.log(options)
			console.log(location.href)
			
			// // 监听接收聊天信息
			uni.$on('onP2PMessage', this.onMessage)
			
			if (options.imUserSign) {
				uni.showLoading({
					title: "数据加载中...",
					mask: true
				});
				/* 	
					uni.setStorageSync("imUserSign",getUrlParam("imUserSign"))
					uni.setStorageSync("im_imUserSign",getUrlParam("imUserSign"))
					uni.setStorageSync("userId",getUrlParam("uid"))
					uni.setStorageSync("hd_userid",getUrlParam("uid"))
					uni.setStorageSync("hd_token",getUrlParam("token"))
					uni.setStorageSync("token",getUrlParam("token"))
					 */
				uni.setStorageSync("imUserSign", options.imUserSign)
				uni.setStorageSync("im_imUserSign", options.imUserSign)
				uni.setStorageSync("userId", options.uid)
				uni.setStorageSync("hd_userid", options.uid)
				uni.setStorageSync("hd_token", options.token)
				uni.setStorageSync("token", options.token)

				const timer = setInterval(() => {
					if (uni.getStorageSync("initReady") == 1) {
						console.log("==========进入首页 initReady为1，开始跳转")
						clearInterval(timer)
						setTimeout(() => {
							uni.hideLoading();
							uni.navigateTo({
								url: '../chatWindow/index?userId=' + options.tuid +
									'&windowType=' + options
									.windowType
							});
						}, 3000)
					}
				}, 500)
			}


			// uni.setStorageSync("token",hd_token)
			// uni.setStorageSync("userId",hd_userId)



			this.clickToSubmitSure = this.$fc.debounce(
				e => {
					uni.navigateTo({
						url: '../chatWindow/index?userId=' + e.userId + '&windowType=' + e.windowType
					});
				},
				1000,
				true
			);
		},
		filters: {
			contentFilter(value) {
				console.warn(value)
				return "KKKKK" + value
			}
		},
		watch: {
			chatListNum: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					if (val > 0) {
						uni.setTabBarBadge({
							index: 0,
							text: val.toString()
						});
					} else {
						uni.removeTabBarBadge({
							index: 0
						});
					}
				}
			},
			chatlist: {
				deep: true, //深度监听可见听对象中的元素变化例:obj.id
				immediate: false, //在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作
				handler(val) {
					//watch事件
					var obj = JSON.parse(JSON.stringify(val));
					var newarr = [];
					var toplist = [];
					var NOTtoplist = [];
					for (var k in obj) {
						obj[k]['xtime'] = new Date(obj[k]['time']).getTime().toString();
						if (obj[k]['userId']) {
							newarr.push(obj[k]);
						}
						if (obj[k]['userId'] && obj[k]['top'] == 'Y') {
							toplist.push(obj[k]);
						}
						if (obj[k]['userId'] && obj[k]['top'] == 'N') {
							try {
								var _data = JSON.parse(obj[k].content)
								if (_data.type == "IMAGE") {
									obj[k].content = "【图片】"
								} else {
									// console.error(_data)
								}
							} catch (e) {
								//TODO handle the exception
							}
							NOTtoplist.push(obj[k]);
						}
					}
					newarr.sort((a, b) => {
						return b['xtime'] - a['xtime'];
					});
					toplist.sort((a, b) => {
						return b['xtime'] - a['xtime'];
					});
					NOTtoplist.sort((a, b) => {
						return b['xtime'] - a['xtime'];
					});
					this.list = newarr;
					this.toplist = toplist;
					this.NOTtoplist = NOTtoplist;
				}
			}
		},
		onShow() {
			var i=0
			this.$store.dispatch('queryConversationList');
			this.$store.dispatch('tabBarpull');
			this.timer = setInterval(() => {
				i=i+1;
				this.$store.dispatch('tabBarpull');
				if(i>4){
					clearInterval(this.timer);
					this.timer=null
				}
			}, 2000)
		},
		beforeUnmount() {
			console.log('beforeUnmount');
			if (this.timer != null) {
				clearInterval(this.timer);
				this.timer = null;
			}
			console.log('beforeUnmount');
		},
		methods: {
			onMessage(){
				setTimeout(() => {
					this.$store.dispatch('queryConversationList')
				}, 1000)
			},
			longpressItem(e, i, v) {
				// console.log(e,i,v)
				this.longTapItemKey = i;
			},
			returnAvatar(text) {
				var data = JSON.parse(text);
				var avatars = [];
				for (var i = 0; i < data.length; i++) {
					avatars.push({
						url: data[i]
					});
				}
				return avatars;
			},
			clickChat(e) {
				this.clickToSubmitSure(e);
			}
		},
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0: //更多
					this.$refs['trtw'].showTab();
					break;
				case 1: //搜索
					uni.navigateTo({
						url: '../search/index'
					});
					break;
				default:
					break;
			}
		}
	};
</script>

<style scoped>
	.alertTips {
		line-height: 80rpx;
		background-color: #fcfcfc;
		color: #999999;
		text-align: center;
		font-size: 28rpx;
	}
</style>