<template>
	<view class="container" :style="pageHeight">
		<view class="box-1">
			<scroll-view
				scroll-y
				refresher-background="transparent"
				style="height: 100%;"
				@scrolltoupper="refresherrefresh"

				:refresher-enabled="false"
				:scroll-with-animation="false"
				:refresher-triggered="scrollView.refresherTriggered"
				:scroll-into-view="scrollView.intoView"
			>
				<!-- <view id="topId"></view> -->
				<view class="talk-list" >
					<view class=""
					v-for="(item,index) in messagesList"
					:key="item.id"
					>
						<view class="item flex-col push"  v-if="item.query" >
							<image :src="imagesUrl+userAvatar" mode="aspectFill" class="pic"></image>
							<view class="content">
								<template v-if="item.contentType === 'image'">
									<image :src="item.content" mode="widthFix" style="width: 400rpx;"></image>
								</template>
								<template v-else>
									{{item.query}}
								</template>
							</view>
						</view>

							<view class="item flex-col pull " id="po_" v-if="item.answer" >
								<view class="po_z"></view>
								<image :src="info.icon" mode="aspectFill" class="pic"></image>
								<view class="content" >
									<template v-if="item.contentType === 'image'">
										<image :src="item.content" mode="widthFix" style="width: 400rpx;"></image>
									</template>
									<template v-else>

										<text class="" >
										{{item.answer}}
										</text>

									</template>
								</view>
							</view>
					</view>
				</view>
				<view id="bottomId"></view>
			</scroll-view>
		</view>

		<view class="box-2">
			<view class="flex-col">

				<view class="flex-grow">
					<input type="text" class="content" v-model="content" placeholder="Please enter what you want to know" placeholder-style="color:#DDD;" :cursor-spacing="6">
				</view>
				<!-- <view style="margin-right: 20rpx;">
					<uni-icons type="image" size="24" color="#32714F" @tap="handleImageClick"></uni-icons>

				</view> -->
				<button class="send" @tap="handleSendClick">send</button>
			</view>
		</view>

	<!--
	   text标签随意，不影响页面展示即可
	   prop：prop随便取名，options是变量
	   :change:[name]：name和prop保持一致就行
	   renderScript：和新加的script标签的module名字一样
	   onChange：renderScript标签中的方法，
	   思路是，通过修改options，触发onChange方法
	  -->
	<!--  <text  :prop="options" :change:prop="renderScript.onChange"></text> -->
	</view>
</template>

<script>
// @ts-nocheck - Multiple exports allowed for Vue component and renderjs
import { getHistoryMsg } from "@/request/template-talk/history-msg.js";
import requestChat from '../../utils/requestChat'
import config from '@/config'
import {startMsgSocket,msgSocketConnect,sendMsg,closeMsgSocket} from './msgSocket'

export default {
	data() {
		return {
			 //是否长按事件
				  islongPress:false,
				  timer:null,//长按计时器
			options: {},
			imagesUrl:config.imagesUrl,
			info:{},
			title:'',
			// 聊天列表数据
			messagesList:[],
			// 滚动容器
			scrollView:{
				refresherTriggered:false,
				intoView:"",
				safeAreaHeight:0
			},

			// 请求参数
			ajax:{
				rows:20,	//每页数量
				page:1,	//页码
				flag:true,	// 请求开关
				sendFlag:false
			},
			// 发送内容
			content:'',
			userId:null,
			userAvatar:null,
			taskChat:null,
			firstId:null,
			limit:100,
			scrollId:'bottomId',
			tempList :[],
			requestTask: null,
			tempBuffer: '',
			msgSocket:null,
			msgTimer:null
		}
	},
	computed:{
		// 页面高度
		pageHeight(){
			const safeAreaHeight = this.scrollView.safeAreaHeight;
			if(safeAreaHeight > 0){
				return `height: calc(${safeAreaHeight}px - var(--window-top));`
			}
			return "";
		}
	},

	onLoad(option) {
		if(option){
		let infoData = 	JSON.parse(option.data)

		let tempInfo={
			icon:infoData.icon,
			token:infoData.token,
			conversation:infoData.conversation,
			userId:infoData.userId,
			userAvatar:infoData.userAvatar
		}
		uni.setStorageSync('userId',infoData.userId)
		this.info = tempInfo
		this.userId = infoData.userId
		this.userAvatar = infoData.userAvatar
		this.getMessage()
		}

	},

	onShow() {


	},

	methods: {
		longpress(){
			   this.islongPress = true;
			   console.log("长按事件");
		    },
		    //点击事件
		    clickSprink(){
				// 非长按
			   if(this.islongPress == false){
				   console.log("点击事件");
			   }else if(this.islongPress == true){
				   console.log("长按事件");
			   }
		    },
		    //手指触摸动作开始
			touchstart(){
				this.timer = setTimeout(()=>{
					this.longpress();
				},2000)
			},
		    //手指触摸动作结束
		    touchend(){
			    //延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
			    clearTimeout(this.timer);
				setTimeout(() => {
					this.islongPress = false
				}, 200)
		    },
		
		startSocket(){
			this.msgSocket = startMsgSocket(this.userId)
			this.msgInfo()
			//追加心跳机制
		},
		msgInfo() {
			if (this.msgSocket) {
				this.msgSocket.onMessage(res => {
						console.log('触发首页的消息回调',res);
						if(res.data.indexOf("conversation_id")>-1){
							 uni.setStorageSync(this.info.conversation, JSON.parse(res.data).conversation_id);
						}else{
							this.messagesList[0].answer = this.messagesList[0].answer+res.data
						}
				})
			}
		},

		async sendMessage(query) {
			if(this.msgSocket){
				closeMsgSocket(this.msgSocket);
				this.msgSocket= null
			}

			this.startSocket()
			this.content = '';
			this.ajax.sendFlag = true;

			const msgItem = {
				query: query,
				answer: "",
				contentType: 'text'
			};

			const requestData = {
				"inputs": { "type": "text" },
				"query": query,
				"response_mode": "streaming",
				"conversation_id": uni.getStorageSync(this.info.conversation) || null,
				"user": this.userId,
				'token': this.info.token,
				'answer':''
			};

			this.messagesList.unshift(msgItem);
			let that = this;
			setTimeout(()=>{
				sendMsg(that.msgSocket,JSON.stringify(requestData))
			},500)



		},


	  // 在renderScript中触发的方法
		acceptData(data) {

			let that = this
			let msgItem = this.messagesList[0]
			if(data.line){
				if(data.sendStatus&&data.sendStatus == 'ok'){
					const lastIndex = data.line.lastIndexOf('}');
					const validJsonString = data.line.slice(0, lastIndex + 1);
					let item = JSON.parse(validJsonString.replace('data: ',''))
					uni.setStorageSync(that.info.conversation,item.conversation_id)
					that.ajax.sendFlag = false
					return
				}

				if(data.line.indexOf('answer')>-1&&data.line.indexOf('{')>-1&&data.line.indexOf('}')>-1){
					try{
						// 查找最后一个出现的'}'字符的索引
						const lastIndex = data.line.lastIndexOf('}');

						// 截取从开头到这个'}'字符（包括它）的所有内容
						const validJsonString = data.line.slice(0, lastIndex + 1);
						let item = JSON.parse(validJsonString.replace('data: ',''))
						if(item.answer&&!this.tempList.includes(item.answer+'')){
							this.tempList.push(item.answer+'')
							msgItem.answer = msgItem.answer+(item.answer)
						}
						that.$set(that.messagesList,0,msgItem)
						that.scrollView.intoView = 'bottomId';
					}catch (error) {
						console.log(177,data.line,177);
					}

				}
			}

		},

		goBack(){
			uni.navigateBack()
		},
		// 下拉刷新
		refresherrefresh(e){
			this.getMessage();
			this.scrollView.refresherTriggered = true;
		},
		// 获取历史消息
		getMessage(){

			if(!this.ajax.flag||!uni.getStorageSync(this.info.conversation)){
				return;
			}
			let url = 'v1/messages?user='+this.userId+'&conversation_id='+uni.getStorageSync(this.info.conversation)+'&limit='+this.limit
			if(this.firstId){
				url = url+"&first_id="+this.firstId
			}
			let that = this
			let get = async ()=>{
				that.ajax.flag = false;
				let res = await requestChat({
					url: url ,
					method: 'get',
					token:that.info.token
				})
				let data = res.data
				that.scrollView.refresherTriggered = false;

				// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用。取当前消息数据的第一条信息元素

				for (var i = 0; i < data.length; i++) {
					if(i==0){
						that.firstId = data[i].id
					}
					that.messagesList.unshift(data[i])
				}
				that.$set(that.messagesList,0,that.messagesList[0])
				// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				that.$nextTick(()=>{
					that.$forceUpdate()
					// 设置当前滚动的位置
					that.scrollView.intoView = this.scrollId;
				})
				that.ajax.flag = true;
			}
			get();
		},
		// 发送信息
		handleSendClick() {
			console.log('Send button clicked'); // 调试日志
			if(!this.content) {
				uni.showToast({
					title: 'Please enter valid content',
					icon: 'none'
				})
				return;
			}
			this.sendMessage(this.content);
		}


	}
}
</script>

<style lang="scss">
	@import "../../lib/global.scss";

  .AirWall{
    width: 20px;
    height: 20px;
  }
	.top_{
		width: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		height: 180rpx;
		background: #32714F;
		z-index: 99999;
		box-sizing: border-box;

		padding: 15px;
		padding-top: 100rpx;
		display: flex;
		align-items: center;
		color: #fff;
		justify-content: space-between;
	}
	page{
		background-color: #F3F3F3;
		font-size: 28rpx;
	}
	.container{
		height: calc(100vh - var(--window-top));
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: stretch;
	}

	/* 加载数据提示 */
	.tips{
		position: fixed;
		left: 0;
		top:var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0,0,0,0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform:translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;

		&.show{
			transform:translateY(0);
		}
	}

	.box-1{
		width: 100%;
		height: 0;
		flex: 1 0 auto;
		box-sizing: content-box;

	}
	.box-2{
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #F3F3F3;

		/* 兼容iPhoneX */
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		>view{
			padding: 0 20rpx;
			height: 100rpx;
		}

		.content{
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
		}

		.send{
			background-color: #32714F;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;

			&:active{
				background-color: #32714F;
			}
		}
	}

	.talk-list{
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: flex-end;
		align-items: stretch;

		// 添加弹性容器，让内容自动在顶部
		&::before{
			content: '.';
			display: inline;
			visibility: hidden;
			line-height: 0;
			font-size: 0;
			flex: 1 0 auto;
			height: 1px;
		}


		/* 消息项，基础类 */
		.item{
			padding: 20rpx 20rpx 0 20rpx;
			align-items:flex-start;
			align-content:flex-start;
			color: #333;

			.pic{
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content{
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			/* 收到的消息 */
			&.pull{
				.content{
					margin-left: 32rpx;
					background-color: #fff;

					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}


			/* 发出的消息 */
			&.push{
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.content{
					margin-right: 32rpx;
					background-color: #32714F;
					color: #fff;

					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #32714F;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}
</style>
