<template>
	<view class="chat" :style="{ height: phoneHight }">
		<far-bottom></far-bottom>
		<view class="container">
			<scroll-view scroll-y="true" class="scrollView" @scrolltoupper="reachToupper" :scroll-top="scrollTop" :style="{ height: scrollHeight }">
				<view class="content p-top-bom-50">
					<block v-for="(chatItem, index) in chatList" :key="index">
						<view class="chat-left-item dis-flex flex-y-center m-btm80" v-if="chatItem.is_my === '1'">
							<view class="chat-avatar m-right30" :style="{ 'background-image': 'url(' + chatItem.avatar + ')' }"></view>
							<view class="chat-message f-28 col-3 b-f p-r">
								<rich-text :nodes="chatItem.content"></rich-text>
								<view class="message-time message-time_1 f-24 col-9">{{ chatItem.date_time }}</view>
							</view>
						</view>
						<view class="chat-right-item dis-flex flex-y-center flex-x-end m-btm80" v-if="chatItem.is_my === '0'">
							<view class="chat-message f-28 chat-message_2 col-f p-r">
								<rich-text :nodes="chatItem.content"></rich-text>
								<view class="message-time message-time_2 f-24 col-9">{{ chatItem.date_time }}</view>
							</view>
							<view class="chat-avatar m-left30" :style="{ 'background-image': 'url(' + chatItem.avatar + ')' }"></view>
						</view>
					</block>
				</view>
			</scroll-view>
			<view class="sendbox dis-flex flex-y-center flex-x-between padding-box-all b-f">
				<textarea
					type="text"
					value=""
					class="f-24"
					placeholder="请输入内容"
					maxlength="-1"
					:auto-height="chatcontent.length > 150 ? false : true"
					v-model="chatcontent"
					@blur="lose"
					fixed="true"
					:show-confirm-bar="false"
					cursor-spacing="20"
				/>
				<view class="send-box-btn t-c col-f f-24" @click="messageSend">发送</view>
			</view>
		</view>
		<PhoneMask :show1="popShow" @clickmask1="closePop"></PhoneMask>
		<getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import PhoneMask from '@/components/template/PhoneMask';
import getvxphone from '@/components/template/getVXphone.vue';
let setTimer = null,
	msgsetTimer = null;
export default {
	data() {
		return {
			canSend: 1,
			phoneHight: null,
			scrollHeight: null,
			current_page: 1,
			chatList: [],
			total: null,
			scrollTop: 0,
			chatcontent: '',
			other_id: null,
			receive_type: null,
			send_type: null,
			sendmsgnum: 0,
			id: '',
			popShow: false,
			vxshow: false
		};
	},
	onLoad(e) {
		let _this = this;
		_this.other_party_type = e.other_party_type;
		_this.type = e.type;
		_this.other_party_id = e.other_party_id;
		if (!!e.id) {
			_this.id = e.id;
		} else {
			_this.id = '';
		}
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight + 'px';
				_this.phoneHight1 = res.windowHeight;
				_this.scrollHeight = _this.phoneHight1 - uni.upx2px(120) + 'px';
			}
		});
		this.setData(e);
	},

	components: {
		PhoneMask,
		getvxphone
	},
	computed: {},

	mounted() {
		this.chatDetailData();
	},
	methods: {
		showFalse() {
			console.log('进了showfalse');
			this.vxshow = false;
		},
		closePop() {
			let _this = this;
			_this.popShow = false;
		},
		chatDetailData(page = 1, isPage = false) {
			let _this = this;
			App._post_form(
				'&p=im&do=get',
				{
					id: _this.id,
					other_party_id: _this.other_party_id,
					page,
					other_party_type: _this.other_party_type,
					type: _this.type
				},
				res => {
					if (res.errno === 0) {
						let chatListData = res.data,
							oldchatList = _this.chatList;
						setTimeout(() => {
							uni.setNavigationBarTitle({
								title: res.data.receive_name
							});
						});
						if (isPage) {
							_this.chatList = chatListData.list.concat(...oldchatList);
						} else {
							if (oldchatList.length > 0) {
								let newArray = oldchatList.concat(...chatListData.list),
									temp = {},
									result = [];
								newArray.map((item, index) => {
									if (!temp[item.id]) {
										result.push(item);
										temp[item.id] = true;
									}
								});
								_this.$nextTick(function() {
									_this.chatList = result;
								});
								clearTimeout(setTimer);
								setTimer = setTimeout(() => {
									_this.chatDetailData();
								}, 5000);
							} else {
								_this.setData({
									chatList: res.data.list,
									total: res.data.total
								});
								_this.$nextTick(function() {
									_this.scrollTop = 9999;
								});
								clearTimeout(setTimer);
								setTimer = setTimeout(() => {
									_this.chatDetailData();
								}, 5000);
							}
						}
					}
				},
				err => {
					if (err.data.errno === 1) {
						App.navigationTo({
							url: err.data.data.url
						});
					}
				},
				() => {}
			);
		},
		reachToupper() {
			let _this = this;
			if (_this.current_page >= _this.total) {
				return false;
			}
			_this.chatDetailData(++_this.current_page, true);
		},
		messageSend() {
			console.info(111111111);
			let _this = this,
				requestData = {
					send_id: _this.id,
					send_type: _this.type,
					receive_type: _this.other_party_type,
					type: 0,
					receive_id: _this.other_party_id,
					content: _this.chatcontent
				};

			if (_this.chatcontent === '') return;
			if (_this.canSend == 1) {
				_this.canSend = 0;
				App._post_form(
					'&p=im&do=send',
					requestData,
					res => {
						_this.canSend = 1;
						if (res.errno === 0) {
							_this.setData({
								chatcontent: ''
							});
							clearTimeout(msgsetTimer);
							msgsetTimer = setTimeout(() => {
								_this.scrollTop = _this.scrollTop + 1;
							}, 500);
							_this.chatDetailData();
						}
					},
					fail => {
						_this.canSend = 1;
						if (fail.data.message == '未绑定手机号') {
							//#ifdef H5
							_this.popShow = true;
							//#endif
							//#ifndef H5
							_this.vxshow = true;
							//#endif
						}
					}
				);
			}
		},
		lose() {
			// #ifdef H5
			document.body.scrollTop = document.documentElement.scrollTop = 0;
			// #endif
		}
	},
	onHide() {
		clearTimeout(setTimer);
		clearTimeout(msgsetTimer);
		console.log('onHide');
	},
	onUnload() {
		clearTimeout(setTimer);
		clearTimeout(msgsetTimer);
		console.log('onUnload');
	},
	destroyed() {
		clearTimeout(setTimer);
		clearTimeout(msgsetTimer);
		console.log('destroyed');
	}
};
</script>

<style lang="scss" scoped>
.cantSend {
	pointer-events: none;
}
.chat {
	background: #f8f8f8;
}
page {
	background-color: #f8f8f8;
}

.scrollView {
	height: 84vh;
}

.chat-left-item,
.chat-right-item {
	padding: 0 30upx;

	.chat-avatar {
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
		background-size: 70upx 70upx;
		background-repeat: no-repeat;
		flex-shrink: 0;
	}

	.chat-message {
		padding: 26upx 30upx;
		border-radius: 10upx 10upx 10upx 0;
		max-height: 400upx;
		word-break: break-all;
		word-wrap: break-word;
	}

	.chat-message_2 {
		border-radius: 10px 10px 0px 10px !important;
		background-color: #ff4444;
		max-height: 400upx;
		word-break: break-all;
		word-wrap: break-word;
	}
}

.sendbox {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 1px solid rgba(238, 238, 238, 1);
	border-radius: 6upx 6upx 0 0;
	& > textarea {
		width: 500upx;
	}
	.send-box-btn {
		width: 98upx;
		height: 60upx;
		line-height: 60upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 10upx;
	}
}
.message-time {
	position: absolute;
	top: -50upx;
	width: 300upx;
}

.message-time_1 {
	left: 0;
}

.message-time_2 {
	right: 0;
}
</style>
