<template>
	<div class="page">
		<scroll-view scroll-y="true"  class="htmlText"
		    :scroll-into-view="lastDiv" :scroll-top="scrollTop" scroll-with-animation="true">
			<view ref="content" class="scrolls">
				<text :user-select="true">
					{{ AImessage }}<span class="end" v-if="!isOver"></span>
				</text>
				
			 </view>
			 <view id="last-div">
				 
			 </view>
		</scroll-view>
		
		<div class="weui-btn-area ">
			<button class="weui-btn" :loading="shareBtnLoading" type="primary" @click="showTopTipsFun">分享给好友</button>
		</div>
	</div>
</template>

<script>
	import CONFIG from '../../utils/config.js';

	export default {
		data() {
			return {
				AImessage: "",
				isOver: false,
				socketMsgQueue: [],
				scrollTop:1,
				lastDiv:'last-div',
				dream:"",
				shareBtnLoading : false
			}
		},
		onLoad(options) {
			this.dream = options.dream
			this.initWs()
			console.log(this.dream,"created")
			this.socketMsgQueue.push({
				"act": "start_generate",
				"payload": {
					"message": this.dream,
					"template_name": "jiemeng"
				}
			})
			this.sendMsg()
			console.log(options.dream)
	   },
		created() {
			
		},
		mounted() {
			this.AImessage = ""
			this.isOver = false
			this.recordId = null
	
			
		},
		onUnload() {
			this.socketMsgQueue = [];
			wx.closeSocket()
		},

		methods: {
			downScrollTop(isLog){
				let height = 0
				const query = uni.createSelectorQuery().in(this);
				
				query.select('.htmlText').boundingClientRect(data => {
				  height = data.height
				}).exec();
				query.select('.scrolls').boundingClientRect(data => {
					// if(!isLog){
					// 	console.log( data.height , height , 0 , data.height + height , 0 )
					// }
				  this.scrollTop = data.height - height > 0 ? data.height +  height : 0 
				}).exec();
				
			},
			initWs() {
				const self = this
				const token = wx.getStorageSync('token');
				wx.connectSocket({
					url: CONFIG.getWsUrl(CONFIG.api.chat),
					header: {
						'authorization': token
					}
				})
				wx.onSocketOpen((res) => {
					this.sendMsg()
				})
				wx.onSocketMessage((res) => {
					const response = JSON.parse(res.data)
					if (response.act == 'answer') {
						this.AImessage = this.AImessage + response.message
						this.$nextTick(() => {
							this.downScrollTop()
						})

					} else if (response.act == 'answer_finish') {
						this.isOver = true
						this.recordId = response.payload.record_id
						setTimeout(() => {
							this.downScrollTop(false)
						},500)
						 
					} else {
						wx.showToast({
							title: response.message,
							icon: 'error',
							duration: 3000,
							mask: true
						});
					}


				})
			},
			sendMsg() {
				for (let i = 0; i < this.socketMsgQueue.length; i++) {
					wx.sendSocketMessage({
						data: JSON.stringify(this.socketMsgQueue[i])
					})
				}
			},
			showTopTipsFun() {
				if (!this.isOver) {
					wx.showToast({
						title: "请等待生成结束",
						icon: 'error',
						duration: 3000,
						mask: true
					});
					return
				}
				this.shareBtnLoading = true
				wx.downloadFile({
					url: CONFIG.getHttpUrl(CONFIG.api.generatePost) + '?record_id=' + this.recordId,
					success: (res) => {
						this.shareBtnLoading = false
						wx.showShareImageMenu({
							path: res.tempFilePath,
							fail: (e)=>{
								console.log(e)
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		padding: 2em
	}

	.htmlText {
		height: 70vh;
		overflow: auto;
		white-space: pre-wrap;
		line-height: 1.6;
		margin-bottom: 1em;
		padding-bottom: 1em;
	}

	.end::after {
		content: "|";
		animation: blink .3s linear infinite alternate;
	}

	@keyframes blink {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>