<template>
	<view>
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#207CF7" :bottomShadow="false">问答记录</tn-nav-bar>
			<!-- <view :style="{height: tobheight+'px'}"></view> -->
		</view>
		<z-paging ref="paging" refresher-complete-delay="200" v-model="jobList" @query="queryList">
			<view slot="top" class="z_tabs" :style="{ marginTop: tobheight + 'px' }"></view>
			<view class="container">
				<!-- <view class="bg"></view> -->
				<view class="form">
					<!-- <view class="header">
						<view class="title">人工智能回答你需要的问题</view>
					</view> -->
					<block v-for="(item, index) in jobList" :key="index">
						<view class="panel">
							<view class="head">
								<!-- <view class="title">问：{{ item.question }}</view> -->
								<view class="title">
									<u-parse :content="item.question1" scrollTable selectable :tag-style="parse_style"
										style="width: 100%;"></u-parse>
								</view>

							</view>
							<u-read-more :toggle="true" :shadowStyle="shadowStyle" showHeight="200" color="#207CF7">
								<!-- <zero-markdown-view v-if="item.answer.indexOf('```') != -1 || item.answer.indexOf('/*') != -1" :themeColor="themeColor" :markdown="item.answer"></zero-markdown-view> -->

								<!-- <text class="content">{{ item.answer.replace(/^\s+|\s+$/g, '') }}</text> -->
								<u-parse :content="item.answer1" scrollTable selectable :tag-style="parse_style"
									style="width: 100%;"></u-parse>
							</u-read-more>
							<view class="bottom">
								{{appInfo.site_name?appInfo.site_name:'AI智能问答机器人'}}回答时间：{{ item.create_time }}

								<view class="">
									GPT模型：{{item.type}}
								</view>
							</view>

							<view class="tn-flex justify-between">
								<view @click="copyText(item.answer)" hover-class="hoversubmit" class="onekey">一键复制
								</view>
								<view @click="createPoster(index)" hover-class="hoversubmit" class="onekey"
									style="background: #FFC107;">生成海报</view>
							</view>

							<!-- <u-button color="" @click="copyText(item.answer)" type="primary" text="一键复制" ></u-button> -->
							<view class="circle" @click.stop="gallerydel(index)">
								<u-icon name="close-circle-fill" color="#999999" size="24"></u-icon>
							</view>
						</view>
					</block>

					<!-- <view class="panel">
						<view class="head">
							<view class="title">问：量化交易怎么做呢？</view>
						</view>
						<view class="content">
							量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？量化交易怎么做呢？
						</view>
						<view class="bottom">
							ChatGPT回答时间：2022-12-12 14:00:00
						</view>
					</view> -->
				</view>

			</view>
		</z-paging>
		<u-popup :show="showPoster" mode="bottom" @close="showPoster = false">
			<scroll-view scroll-y="true" :style="{maxHeight: (posterheight) +'px'}">
				<wike-painter :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
				<view style="height: 78px;"></view>
				<view class="dygbhg">
					<view class="whole" @click="showPoster = false">取消</view>
					<view class="distinguish" @click="toSave">保存/分享</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- <u-popup :show="showPoster" mode="bottom" :round="10" @close="close" @open="open">
			<view class="poster">
				<wike-painter  :board="posterObj" @success="posterSuccess" ref="painter"></wike-painter>
				<view class="footer-btn">
					<view class="" @click="showPoster = false">退出</view>
					<view class="save" @click="toSave">保存/分享</view>
				</view>
			</view>
		</u-popup> -->
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	const {
		marked
	} = require('marked');
	import hljs from "highlight.js";
	import "highlight.js/scss/atom-one-dark.scss";
	export default {
		data() {
			return {
				jobList: [],
				tobheight: 45,
				platform: this.$platform.get(),
				isLoading: true,
				themeColor: '#007AFF',
				showPoster: false,
				posterObj: {},
				qrcode: '',
				spmplatform: 0,
				showimg: true,
				imgPath: 'http://img5.iqilu.com/c/u/2020/0409/1586401171483.jpg',
				posterheight: '',
				shadowStyle: {
					backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%)',
					paddingTop: '100px',
					marginTop: '-100px',
					zIndex: 9
				},
				parse_style: {
					// 字符串的形式
					p: 'margin-bottom:0rpx;',
					// 一级标题
					h1: `
			                   margin:25px 0;
			                   font-size: 24px;
			                   text-align: center;
			                   font-weight: bold;
			                   color: #00ca88;
			                   padding:3px 10px 1px;
			                   border-bottom: 2px solid #00ca88;
			                   border-top-right-radius:3px;
			                   border-top-left-radius:3px;
			                   `,
					// 二级标题
					h2: `
			                   margin:40px 0 20px 0;	
			                   font-size: 20px;
			                   text-align:center;
			                   color:#00ca88;
			                   font-weight:bolder;
			                   padding-left:10px;
			                   border:1px solid #00ca88;
			                   `,
					// 三级标题
					h3: `
			                   margin:30px 0 10px 0;
			                   font-size: 18px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
					// 四级标题
					h4: `
			                   margin:20px 0 10px 0;
			                   font-size: 16px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
					// 五级标题
					h5: `
			                   margin:10px 0 10px 0;
			                   font-size: 14px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
					// 六级标题
					h6: `
			                   margin:10px 0 10px 0;
			                   font-size: 12px;
			                   color: #00ca88;
			                   padding-left:10px;
			                   border-left:3px solid #00ca88;
			                   `,
					ul: 'margin:24rpx;color: #555;',
					ol: 'margin:12rpx;color:#555;',
					li: `
			                   margin: 12rpx 0;
			                   color: #555;
			                   `,
					// 链接
					a: `
							   color: #00ca88;`,
					// 加粗
					strong: `
							   font-weight: border;
							   color: #00ca88;
							   `,
					// 斜体
					em: `
							   color: #00ca88;
							   letter-spacing:0.3em;
							   `,
					blockquote: 'padding: 15rpx;margin:0 0 12rpx 0;border-radius: 6rpx;color: #555;border-left: 4px solid #dddddd;',

					hr: `height:1px;padding:0;border:none;text-align:center;background-image:linear-gradient(to right,rgba(248,57,41,0),${'#9e9e9e'},rgba(248,57,41,0));`,
					table: 'border-spacing:0;overflow:auto;min-width:100%;margin:10px 0;border-collapse: collapse;',
					th: 'background-color: whitesmoke;border: 1px solid #2d2d2d;padding:10rpx;',
					td: 'border: 1px solid #2d2d2d;padding:10rpx;',
					pre: `
							   color: #c7254e;
							   padding: 20rpx;
							   border-radius: 5px;
							   white-space: pre;
							   overflow: auto;
							   margin:12rpx 0;
							   font-size:13px;
							   background: #2d2d2d;
							   `,
				},
			};
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'isLogin'])
		},
		watch: {
			appInfo: function(e) {
				let that = this;
				// uni.setNavigationBarTitle({
				// 	title: that.appInfo.site_name
				// });
				// console.log(that.appInfo.site_logo_path);
				// that.$base64.imageUrlToBase64(that.appInfo.site_logo_path)
			}
		},
		onLoad() {
			const that = this;
			if (this.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight;
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop;
				this.tobheight = menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height;
			}
			this.posterheight = uni.$u.sys().windowHeight - this.tobheight
			this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
			this.commonqrcodePath();
			this.initHighLight();
			// this.questionlist()
		},
		methods: {
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				var mylist = [];
				const params = {
					page: pageNo,
					limit: pageSize
				};
				this.$http('question.my', params).then(res => {
					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						for (var i = 0; i < res.data.data.length; i++) {
							mylist.push(res.data.data[i])
							mylist[i].question1 = marked(res.data.data[i].question)
							mylist[i].answer1 = marked(res.data.data[i].answer)
						}
						console.log(mylist);
						this.$refs.paging.complete(mylist);
						this.isLoading = false;
					}
				});
			},
			// questionlist(){
			// 	this.$http('question.list').then(res=>{
			// 		if(res.code == 0){

			// 		}
			// 	})
			// },
			initHighLight() {
				hljs.configure({
					useBR: true,
					tabReplace: " ",
				});
				marked.setOptions({
					renderer: new marked.Renderer(),
					gfm: true,
					tables: true,
					breaks: false,
					pedantic: false,
					highlight: function(code, lang) {
						if (lang && hljs.getLanguage(lang)) {
							return hljs.highlight(lang, code, true).value;
						} else {
							return hljs.highlightAuto(code).value;
						}
					},
				});
			},
			toSave() {
				uni.showLoading({
					title: '海报生成中'
				});
				this.$refs.painter.canvasToTempFilePathSync({
					// 在nvue里是jpeg
					fileType: 'jpg',
					quality: 1,
					success: res => {
						// this.path = res.tempFilePath;
						// this.$refs.posterImg.open();
						// this.show_poster = true;

						// console.log(res.tempFilePath);
						// 非H5 保存到相册
						// H5 提示用户长按图另存
						// #ifdef MP-WEIXIN
						// uni.saveImageToPhotosAlbum({
						// 	filePath: res.tempFilePath,
						// 	success: function() {
						// 		uni.showToast({
						// 			title: '保存成功'
						// 		});
						// 		that.showPoster = false;
						// 	}
						// });

						wx.showShareImageMenu({
							path: res.tempFilePath
						})
						this.showPoster = false;
						uni.hideLoading();
						// #endif
						// #ifdef H5
						this.showPoster = false;
						uni.hideLoading();
						uni.showModal({
							confirmColor: '#207CF7',
							confirmText: '查看图片',
							title: '提示',
							content: '查看图片后长按图片即可保存或分享',
							success(src) {
								if (src.confirm) {
									uni.previewImage({
										urls: [res.tempFilePath]
									});
								} else if (src.cancel) {
									this.showPoster = true;
								}
							}
						});
						// #endif
					}
				});
			},
			commonqrcodePath() {
				let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
				this.$http('common.qrcodePath', {
					spm: spm
				}).then(res => {
					if (res.code == 0) {
						this.qrcode = res.data;
					}
				});
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						// console.log('success');
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			gallerydel(e) {
				var that = this;
				uni.showModal({
					confirmText: '删除',
					content: '是否删除此问答记录',
					title: '提示',
					confirmColor: '#207CF7',
					success(res) {
						// console.log(res);
						if (res.confirm) {
							that.$http('question.del', {
								id: that.jobList[e].id
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '删除成功'
									})
									// that.drawList = []
									that.$refs.paging.reload(true);
								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									})
								}
							});
						}
					}
				})

			},
			onSubmit() {
				uni.navigateTo({
					url: '/pages/main/answer/index'
				});
			},
			getdownload(e, type) {
				return new Promise((resolve, reject) => {
					// uni.getImageInfo({
					// 	src: e,
					// 	success: res => {
					// 		uni.downloadFile({
					// 			url: e,
					// 			success: (res) => {
					// 				if (res.statusCode === 200) {
					// 					resolve(res.tempFilePath);
					// 				}
					// 				if(res.statusCode === 404){
					// 					let head = '/static/images/head.jpg',open = '/static/images/open.png';
					// 					if(type == 1){
					// 						resolve(head);
					// 					}else{
					// 						resolve(open);
					// 					}
					// 				}
					// 			}
					// 		});
					// 	},
					// 	fail: err => {
					// 		let head = '/static/images/head.jpg',open = '/static/images/open.png';
					// 		if(type == 1){
					// 			resolve(head);
					// 		}else{
					// 			resolve(open);
					// 		}
					// 	}
					// })
					uni.request({
						url: e,
						method: 'GET',
						responseType: 'arraybuffer',
						success: ress => {
							let base64 = wx.arrayBufferToBase64(ress.data);
							base64 = 'data:image/jpeg;base64,' + base64
							resolve(base64);
						},
						fail: (e) => {
							let head = '/static/images/head.jpg',
								open = '/static/images/open.png';
							if (type == 1) {
								resolve(head);
							} else {
								resolve(open);
							}
						}
					})
				});
			},
			posterSuccess() {
				uni.hideLoading();
			},
			async createPoster(e) {
				let that = this;
				let site_logo = '';
				uni.showLoading({
					title: '海报渲染中'
				});
				let avatar_logo = that.userInfo.avatar ? await this.getdownload(that.userInfo.avatar, 1) :
					'/static/images/head.jpg';
				if (that.appInfo.site_logo_path.indexOf("https") < 0) {
					site_logo = that.appInfo.site_logo_path ? await that.getdownload(that.appInfo.site_logo_path
						.replace("http:", "https:"), 2) : '/static/images/open.png';
				} else {
					site_logo = that.appInfo.site_logo_path ? await that.getdownload(that.appInfo.site_logo_path, 2) :
						'/static/images/open.png';
				}
				(this.posterObj = {
					width: uni.$u.sys().windowWidth + 'px',
					background: 'linear-gradient(to right, #00ca88 0%, #00BCD4 100%)',
					// borderRadius: '16rpx',
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: uni.$u.sys().windowWidth + 'px'
					},
					views: [{
							type: 'view',
							css: {
								marginTop: '20rpx',
								paddingLeft: '10rpx',
								display: 'flex'
							},
							views: [{
									type: 'image',
									src: avatar_logo,
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx',
										borderRadius: '16rpx',
										width: '80rpx',
										height: '80rpx',
										border: '2rpx solid #fff',
										objectFit: 'cover'
									}
								},
								{
									type: 'view',
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx'
										// display:'flex',
										// flexDirection:'column'
									},
									views: [{
											type: 'view',
											views: [{
												type: 'text',
												text: this.userInfo.nickname ? this.userInfo
													.nickname : '提问者',
												css: {
													marginTop: '10rpx',
													fontSize: '28rpx',
													fontWeight: 'bold',
													color: '#32324A',
													lineHeight: '28rpx'
												}
											}]
										},
										{
											type: 'view',
											views: [{
												type: 'text',
												text: '我的提问❓',
												css: {
													marginTop: '15rpx',
													fontSize: '20rpx',

													color: '#fff',
													lineHeight: '25rpx',
												}
											}]
										}
									]
								}
							]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								width: (uni.$u.sys().windowWidth - 48) + 'px',
								padding: '15rpx',
								background: '#fff',
								borderRadius: '16rpx',
								marginLeft: '30rpx',
								// marginRight: '10rpx'
							},
							views: [{
								type: 'text',
								text: that.jobList[e].question,
								css: {
									fontSize: '28rpx',
									color: '#000',
									// lineHeight: '45rpx',
									// lineClamp: 2,
									// padding: '10rpx',
									// paddingRight: '10rpx',
									width: (uni.$u.sys().windowWidth - 48) + 'px'
									// padding:'10rpx'
								}
							}]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								paddingLeft: '10rpx',
								display: 'flex'
							},
							views: [{
									type: 'image',
									src: site_logo,
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx',
										borderRadius: '16rpx',
										width: '80rpx',
										height: '80rpx',
										border: '2rpx solid #fff',
										objectFit: 'cover'
									}
								},
								{
									type: 'view',
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx'
										// display:'flex',
										// flexDirection:'column'
									},
									views: [{
											type: 'view',
											views: [{
												type: 'text',
												text: this.appInfo.site_name ? this.appInfo
													.site_name : 'AI智能问答机器人',
												css: {
													marginTop: '10rpx',
													fontSize: '28rpx',
													fontWeight: 'bold',
													color: '#32324A',
													lineHeight: '28rpx'
												}
											}]
										},
										{
											type: 'view',
											views: [{
												type: 'text',
												text: '回答结果📝',
												css: {
													marginTop: '15rpx',
													fontSize: '20rpx',

													color: '#fff',
													lineHeight: '25rpx',

												}
											}]
										}
									]
								}
							]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								width: (uni.$u.sys().windowWidth - 48) + 'px',
								padding: '15rpx',
								background: '#fff',
								borderRadius: '16rpx',
								marginLeft: '30rpx',

							},
							views: [{
								type: 'text',
								text: uni.$u.trim(that.jobList[e].answer),
								css: {
									fontSize: '28rpx',
									color: '#000',
									// lineHeight: '45rpx',
									// lineClamp: 12,
									width: (uni.$u.sys().windowWidth - 48) + 'px',
									// padding: '10rpx',
									// padding: '10rpx'
								}
							}]
						},
						{
							type: 'view',
							css: {
								marginTop: '30rpx',
								width: '100%',
								textAlign: 'center',

							},
							// #ifdef H5
							views: [{
								type: 'qrcode',
								text: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx',
									borderRadius: '16rpx',
									// background: '#f5f6f8',
								}
							}],
							// #endif
							// #ifdef MP-WEIXIN
							views: [{
								type: 'image',
								src: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx',
									borderRadius: '16rpx',
									// background: '#f5f6f8',
								}
							}]
							// #endif
						},
						{
							type: 'text',
							text: '————  ' + '长按识别 | 欢迎使用' + '  ————',
							css: {
								marginTop: '20rpx',
								marginBottom: '20rpx',
								width: '100%',
								textAlign: 'center',
								fontSize: '24rpx',
								color: '#fff',
								lineHeight: '33rpx'
							}
						}
					]
				}),
				(this.showPoster = true);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f6f7fb;
	}

	.form {
		width: 90%;
		margin: 0 auto;
		z-index: 999;

		.header {
			margin-bottom: 30rpx;

			.title {
				text-align: center;
				color: #fff;
				margin: 30rpx 0rpx;
			}
		}

		.panel {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin: 30rpx 0;
			position: relative;

			// box-shadow: 0rpx 10rpx 10rpx #eee;
			// margin-bottom: 15rpx;
			.bottom {
				font-size: 24rpx;
			}

			.head {
				border-bottom: 1rpx solid #eee;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;

				.title {
					font-weight: bolder;
					font-size: 35rpx;
				}
			}

			.content {
				// margin: 30rpx 0rpx;
			}

			.bottom {
				background-color: #f0faf8;
				color: #207CF7;
				padding: 15rpx;
				border-radius: 10rpx;
				margin: 30rpx 0;
			}

			.onekey {
				background: linear-gradient(to right, $tc, $tc2);
				color: #fff;
				padding: 15rpx;
				// font-weight: bold;
				border-radius: 40rpx;
				text-align: center;
				font-size: 24rpx;
				width: 48%;
			}

			.hoversubmit {
				background: #f7f7f7;
				color: #acacb3;
			}
		}
	}

	.bg {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		background-color: #207CF7;
		min-height: 200rpx;
		border-radius: 0rpx 0rpx 140rpx 140rpx;
		z-index: -1;
	}

	.poster {
		padding: 40rpx;

		.footer-btn {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 319rpx;
				height: 66rpx;
				border-radius: 40rpx;
				border: 1px solid #4070ff;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4070ff;
				line-height: 66rpx;
				text-align: center;
			}

			.save {
				background: #4070ff;
				color: #ffffff;
			}
		}
	}

	.circle {
		position: absolute;
		right: -12rpx;
		top: -12rpx;
		background: #fff;
		border-radius: 50%;
	}

	.popupimg {

		image {
			width: 375px;
			// height: 450px;
			border-radius: 20rpx;

		}

	}

	.dygbhg {
		background: #ffffff;
		border-radius: 15rpx 15rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0px 0px 10px #00000024;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.whole {
		width: 45%;
		height: 88rpx;
		display: flex;
		color: #ffffff;
		align-items: center;
		justify-content: center;
		background: #f3f3f3;
		font-weight: bold;
		border-radius: 60rpx;
		color: #3d7eff;
	}

	.distinguish {
		width: 45%;
		height: 88rpx;
		display: flex;
		color: #ffffff;
		align-items: center;
		justify-content: center;
		background: #3d7eff;
		font-weight: bold;
		border-radius: 60rpx;
		margin: 38rpx 0;
		margin-left: 4%;
	}
</style>