<template>
	<view class="template-details">
		<block v-if="showdrawing">
			<u-notice-bar v-if="drawingtitle=='正在努力绘制中...'||drawingtitle=='图片正在渲染中...'" :text="noticebar" step
				bgColor="#000"></u-notice-bar>
			<view class="lazy-loading tn-flex justify-center align-center flex-wrap">
				<view class="preloader_1">
					<view></view>
					<view></view>
					<view></view>
					<view></view>
					<view></view>
				</view>
				<view class="drawing">
					{{drawingtitle}}
				</view>
				<view v-if="showprogress" class="progress">
					<u-line-progress :percentage="percentage" activeColor="#9b59b6" height="18"></u-line-progress>
				</view>
			</view>
		</block>

		<swiper class="card-swiper" :circular="false" :autoplay="true" duration="500" interval="12000"
			@change="cardSwiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="lazy-load" :style="{height: windowHeight+'px'}">
					<u--image @load="previewload" @error="previewerror" width="100%" height="100%" :src="item"
						mode="widthFix">
						<view slot="error" style="font-size: 32rpx;text-align: center;">
							图片加载失败
						</view>
					</u--image>
				</view>
			</swiper-item>
		</swiper>

		<view class="tabbar footerfixed dd-glass tn-color-white" style="border-radius: 100rpx;">
			<view class="action" @click="getisback">
				<view class="bar-icon">
					<view class="tn-icon-left-circle">
					</view>
					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/a1.png'></image> -->
				</view>
				<view class="">立即返回</view>
			</view>
			<view class="action" @click="getdownload(cardCur)">
				<view class="bar-icon">
					<view class="tn-icon-download">
					</view>
					<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/k2.png'></image> -->
				</view>
				<view class="">下载/分享</view>
			</view>




			<view class="action" @click="preViewImg(1)" v-if="true">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">模板</view>
			</view>

			<view class="action" @click="preViewImg(2)" v-if="true
		">
				<view class="bar-icon">
					<view class="tn-icon-image">
					</view>
				</view>
				<view class="">照片</view>
			</view>

			<!-- 	<view class="action" @click="public">
				<view class="bar-icon">
					<view class="tn-icon-up-circle">
					</view>
				</view>
				<view class="">{{showopen?'已公开':'公开作品'}}</view>
			</view> -->
		</view>


		<wike-painter style="display: none;" :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		apiurl
	} from '@/common/request/request';
	let rewardedVideoAd = null;
	export default {
		mixins: [],
		components: {},
		data() {
			return {
				showopen: false,

				showdrawing: true,
				drawingtitle: '正在努力绘制中...',
				showprogress: false,
				percentage: 0,
				noticebar: ['精美图片需要时间打磨，预计20-30秒左右出图',
					'图片生成中请不要退出此页面，否则可能会无法生成'
					// '长时间未出图？可稍后在 我的-绘画记录 里查看'
				],
				tobheight: 45,
				parmas: null,


				show1: false,
				show2: true,
				cardCur: 0,
				swiperList: [],
				form: {},
				parameter: {},

				parameterid: 0,
				showopen: false,
				failnum: 0,
				windowHeight: 0,

				engin: '',

				progress: 0,
				isDowload: false,
				show: false,

				sd_keywords: '',
				timer: null,

				faceId: -1,
				
				
				platform: this.$platform.get(),
				qrcode:'',
				spmplatform: 0,
				posterObj: {},
				info:{
					// poster_bg_img_path:"",
					
					poster_bg_width:347,
					poster_bg_height:574,
					
					poster_qrcode_x:278,
					poster_qrcode_y:495,
					poster_qrcode_width:52,
					poster_qrcode_height:52,
				},
			}
		},
		computed: {
			...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
		},
		async onLoad(o) {
			this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
			this.commonqrcodePath()
			
			// this.parmas = JSON.parse(o.ysParmas)
			this.parmas = getApp().ysParmas
			var that = this;
			this.windowHeight = uni.$u.sys().windowHeight - 60
			// this.parmas = {
			// 	templateUrl: "https://zhengda.oss-accelerate.aliyuncs.com/new_fanyun/0d47db66-1faf-42df-a732-22cf18697a65.jpg",
			// 	userUrl: "https://oaigc.oss-cn-chengdu.aliyuncs.com/20240205/d4f3699caf01faecdf37fc8d3573975b.jpg"
			// }
			console.log('接收的生成参数', this.parmas);

			// return
			let res = await this.$http('ys.addFaceTask', this.parmas)

			console.log('提交艺术照任务返回值---', res);
			if (res.code == 0) {
				// this.showdrawing = false
				this.timer = setInterval(() => {
					this.getGenStatus({
						task_id: res.msg.task_id
					})
				}, 3000)
				// this.swiperList = [res.msg.image_url]
			}

		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearTimeout(timingr);
			clearTimeout(asynchronous);
		},

		methods: {
			downloadPic(e) {
					return new Promise((resolve, reject) => {
						uni.request({
							url: e,
							method: 'GET',
							responseType: 'arraybuffer',
							success: ress => {
								let base64 = uni.arrayBufferToBase64(ress.data);
								base64 = 'data:image/jpeg;base64,' + base64
								resolve(base64);
							},
							fail: (e) => {
								resolve('fail');
							}
						})
					});
				},
				commonqrcodePath() {
					let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
					// console.log(spm);
					this.$http('common.qrcodePath', {
						spm: spm
					}).then(res => {
						if (res.code == 0) {
							this.qrcode= res.data;
							// this.createPoster()
							console.log('二维码需要包含的url信息=============', this.qrcode);
						}
					});
				},
				async createPoster(e) {
					let that = this;
					
					let avatarUrl = '';
					let mainUrl = '';
					uni.showLoading({
						title: '海报渲染中'
					});
					
					console.log("that.swiperList[0].url,that.userInfo.avatar",that.userInfo,that.swiperList[0],that.userInfo.avatar);
			
			if (that.swiperList[0].indexOf("https") < 0) {
				mainUrl = await that.downloadPic(that.swiperList[0].replace("http:", "https:"));
			} else {
				mainUrl = await that.downloadPic(that.swiperList[0]);
			}
			if (mainUrl == 'fail') {
				uni.hideLoading();
				uni.showToast({
					title: '生成失败',
					icon: 'none'
				})
				return;
			}
			// that.userInfo.avatar="https://face.cdn.zhishuyun.com/attachments/1133012400174534792/1204009950465101866/0d47db66-1faf-42df-a732-22cf18697a65_ins.png?ex=65d32ca5&is=65c0b7a5&hm=7219a0f250453314cfbf9eefaf2e927ba8d6adea944774b3fe32e67c0787a877&"
					if (that.userInfo.avatar.indexOf("https") < 0) {
						avatarUrl = await that.downloadPic(that.userInfo.avatar.replace("http:", "https:"));
					} else {
						avatarUrl = await that.downloadPic(that.userInfo.avatar);
					}
					if (avatarUrl == 'fail') {
						uni.hideLoading();
						uni.showToast({
							title: '生成失败',
							icon: 'none'
						})
						return;
					}
					let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
					(this.posterObj = {
						width: (this.info.poster_bg_width / proportionally) + 'px',
						height: (this.info.poster_bg_height / proportionally) + 'px',
						background: 'rgba(0,0,0,0)',
						borderRadius: '16rpx',
				views: [
					// 背景图
					{
						src:'/static/shareBg.png',
						type: "image",
						css: {
								width: (this.info.poster_bg_width / proportionally) + 'px',
								height: (this.info.poster_bg_height / proportionally) + 'px',
							}
					},
					// 主图
					{
						type: 'view',
							css: {
								position:'absolute',
								left: '24rpx',
								top: '24rpx',	
								},
								views: [
										{
											src: mainUrl,
											type: "image",
											css: {
													width: 705 + 'rpx',
													height:936+ 'rpx',
													borderRadius: '28rpx',
												}
										},
									],
					},
								
					// 头像
					{
						type: 'view',
							css: {
								display: 'flex',
								position:'absolute',
								left: '24rpx',
								top: '1060rpx',
										
								},
								views: [
										{
										type: 'image',
										src:  avatarUrl,
										css: {
											marginTop: '-80rpx',
											borderRadius: '50%',
											width: '94rpx',
											height: '94rpx',
											objectFit: 'cover'
											}
										},
									],
					},
					// 昵称
					{
						type: 'view',
							css: {
								display: 'flex',
								position:'absolute',
								left: '140rpx',
								bottom: '196rpx',
										
								},
								views: [
										{
											type: 'text',
											text: that.userInfo.nickname,
											css: {
												fontSize: '28rpx',
												color: '#333333',
											}
										}
									],
					},
					
					// 海报文案1
					{
						type: 'view',
							css: {
								display: 'flex',
								position:'absolute',
								left: '24rpx',
								bottom: '96rpx',
										
								},
								views: [
										{
											type: 'text',
											text: '免费体验Al生成个人质感艺术照',
											css: {
												fontSize: '32rpx',
												color: '#333333',
											}
										}
									],
					},
					// 海报文案2
					{
						type: 'view',
							css: {
								display: 'flex',
								position:'absolute',
								left: '24rpx',
								bottom: '44rpx',
										
								},
								views: [
										{
											type: 'text',
											text: '设计微信/抖音/小红书专属头像',
											css: {
												fontSize: '32rpx',
												color: '#333333',
											}
										}
									],
					},
										
				// 二维码上方文案
				{
					type: 'view',
						css: {
							position:'absolute',
							right: '40rpx',
							bottom: '196rpx',	
							},
							views: [
									{
										type: 'text',
										text: '微信扫码',
										css: {
											fontSize: '24rpx',
											color: '#333333',
										}
									}
								],
				},
					{
					   type: 'view',
						css: {
							left: (this.info.poster_qrcode_x / proportionally) + 'px',
							top: (this.info.poster_qrcode_y / proportionally) + 'px',
							position: 'fixed',
						
							},
							views: [{
									type: 'qrcode',
									text: this.qrcode,
									css: {
											width: (this.info.poster_qrcode_width / proportionally) + 'px',
											height: (this.info.poster_qrcode_width / proportionally) + 'px',
											background: '#fff'
										}
									},
									{
										src: '/static/images/fanyunLogo.png',
										type: "image",
										css: {
											position:'absolute',
												width: 30 + 'rpx',
												height: 30 + 'rpx',
												
												left:'44rpx',
												top:'44rpx',
												
											}
									}
									],
					},
				]
					}),
					(
						this.showPoster = true,
						// this.revertUrl()
				
						setTimeout(() => {
							that.$refs.painter.canvasToTempFilePathSync({
								// 在nvue里是jpeg
								fileType: 'jpg',
								quality: 1,
								success: res => {
									console.log('res.tempFilePath', res.tempFilePath);
									uni.showModal({
										title: '提示',
										content: '请查看图片后长按图片保存',
										confirmText: '查看',
										confirmColor: '#1F79F0',
										success: function(res2) {
											if (res2.confirm) {
												uni.previewImage({
													urls: [res.tempFilePath],
													longPressActions: {
														itemList: ['发送给朋友', '保存图片', '收藏'],
														success: function(data) {},
														fail: function(err) {
															console.log(err.errMsg);
														}
													}
												});
											} else if (res2.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							})
						}, 1000)
					);
				},
				posterSuccess() {
					uni.hideLoading();
				},
			async public() {
				var that = this;
				if (this.showdrawing) {
					uni.showToast({
						title: '图片生成中',
						icon: 'none'
					})
					return;
				}
				if (that.showopen) {
					uni.showToast({
						title: '图片已公开',
						icon: 'none'
					})
					return;
				}

				uni.showModal({
					confirmColor: '#207cf7',
					confirmText: '确认公开',
					title: '提示',
					content: '是否确认公开此绘画作品',
					success(src) {
						if (src.confirm) {
							that.$http('gallery.setOpen', {
								id: that.faceId
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '提交成功,等待审核'
									})
									that.showopen = true
								}
							});
						}
					}
				});
			},

			async getGenStatus(p) {
				let res = await this.$http('ys.checkDescribe', p)

				console.log('查询生成状态返回值---', res);
				if (res.code == 0) {
					// if (res.msg.state == 0) {
					// 	this.showdrawing = false
					// 	clearInterval(this.timer)
					// }
					if (res.msg.state == 1) {
						this.showdrawing = false
						clearInterval(this.timer)
						this.swiperList = [res.msg.build_url]
						this.faceId = res.msg.id
						console.log('this.swiperList--------------', this.swiperList);
					} else if (res.msg.state == 2) {
						clearInterval(this.timer)
						uni.showToast({
							title: '图片生成出错，请稍后重试',
							icon: 'none'
						})
					}
				}
			},
			preViewImg(type) {
				if (type == 1) {
					uni.previewImage({
						urls: [this.parmas.templateUrl],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				} else {
					uni.previewImage({
						urls: [this.parmas.userUrl],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}
			},
			parameters() {
				var that = this;
				// if(that.showdrawing){
				// 	uni.showToast({
				// 		title:'图片生成中',
				// 		icon:'none'
				// 	})
				// 	return;
				// }
				that.show1 = true

			},
			setOpen() {
				var that = this;
				if (that.showdrawing) {
					uni.showToast({
						title: '图片生成中',
						icon: 'none'
					})
					return;
				}
				if (that.showopen) {
					uni.showToast({
						title: '图片已公开',
						icon: 'none'
					})
					return;
				}
				uni.showModal({
					confirmColor: '#207CF7',
					confirmText: '确认公开',
					title: '提示',
					content: '是否确认公开此绘画作品',
					success(src) {
						if (src.confirm) {
							that.$http('gallery.setOpen', {
								id: that.parameterid
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '提交成功,等待审核'
									})
									that.showopen = true
								}
							});
						}
					}
				});
			},
			gallerydetail(id) {
				let that = this;
				this.$http('gallery.detail', {
					id: id
				}).then(res => {
					if (res.code == 0) {

						console.log('获取到的图片详情返回值：', res);
						// this.showdrawing = false

						this.parameter = res.data

						//this.parameter.prompt =
						//'https://mjcdn.iduomi.cc/attachments/1124768570157564029/1129053571321712670/erinramirez_In_a_Chinese_ancient_garden_a_lady_is_playing_the_t_cff28ad6-6f7e-44f0-a7bb-2a8724e573f2.png 关键词测试测'
						// this.parameter.prompt = '123'


						if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes('.png')) {
							this.parameter.refImg = this.parameter.prompt.split('.png')[0] + '.png'

							// 创作相似去参考图提示词
							let tempKeyWord = ''
							this.parameter.prompt.split('.png').forEach((item, index) => {
								if (!item.includes('http')) {
									tempKeyWord += item
								}
							})
							this.parameter.promptSame = tempKeyWord
							this.parameter.prompt = tempKeyWord
						} else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
								'.jpeg')) {
							this.parameter.refImg = this.parameter.prompt.split('.jpeg')[0] + '.jpeg'

							// 创作相似去参考图提示词
							let tempKeyWord = ''
							this.parameter.prompt.split('.jpeg').forEach((item, index) => {
								if (!item.includes('http')) {
									tempKeyWord += item
								}
							})
							this.parameter.promptSame = tempKeyWord
							this.parameter.prompt = tempKeyWord
						} else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
								'.jpg')) {
							this.parameter.refImg = this.parameter.prompt.split('.jpg')[0] + '.jpg'

							// 创作相似去参考图提示词
							let tempKeyWord = ''
							this.parameter.prompt.split('.jpg').forEach((item, index) => {
								if (!item.includes('http')) {
									tempKeyWord += item
								}
							})
							this.parameter.promptSame = tempKeyWord
							this.parameter.prompt = tempKeyWord
						} else {
							this.parameter.promptSame = this.parameter.prompt
						}



						console.log('创作相似prompt', this.parameter.promptSame);


						if (this.engin == 'sd') {
							for (var i = 0; i < res.data.imgs_file.length; i++) {
								var url = {
									id: i,
									type: 'image',
									url: res.data.imgs_file[i],
								}
								that.swiperList.push(url)

							}
							this.done = true
						} else {
							var url = {
								id: 0,
								type: 'image',
								url: res.data.origin_url,
							}
							that.swiperList.push(url)
							this.done = true
						}
					} else {

					}
				});
			},
			aiPlay() {
				let that = this;
				this.showdrawing = true
				if (that.failnum == 0) {
					this.progressbar()
				}

				this.$http('gallery.create', this.form).then(res => {
					if (res.code == 0) {
						this.showTask(res.data.id)
					} else {
						uni.hideToast()
						uni.showModal({
							confirmText: '退出',
							showCancel: false,
							confirmColor: '#207CF7',
							title: '提示',
							content: res.msg,
							success(tit) {
								if (tit.confirm) {
									uni.navigateBack()
								}
							}
						})
					}

				});
			},
			progressbar() {
				var that = this;
				if (that.percentage < 99) {
					timingr = setTimeout(() => {
						that.percentage = uni.$u.range(0, 99, that.percentage + 1)
						that.progressbar()
					}, 300);
				} else {
					clearTimeout(timingr);
				}
			},
			showTask(id) {
				let that = this;
				this.$http('gallery.getOpensdDetail', {
					id: id,
				}).then(res => {
					if (res.code == 0) {
						if (res.data.state == "success") {
							this.percentage = 99
							this.drawingtitle = '图片正在渲染中，请不要退出此页面'
							this.parameterid = res.data.id
							this.done = true
							clearTimeout(asynchronous);
							var url = {
								id: 0,
								type: 'image',
								url: res.data.gen_img,
							}
							that.swiperList.push(url)
						} else if (res.data.state == "in_create") {
							asynchronous = setTimeout(() => {
								that.showTask(id)
							}, 1000);
							return;
						} else if (res.data.state == "in_wait") {
							asynchronous = setTimeout(() => {
								that.showTask(id)
							}, 1000);
							return;
						} else {
							uni.showModal({
								confirmText: '退出',
								showCancel: false,
								confirmColor: '#207CF7',
								title: '提示',
								content: res.msg,
								success(tit) {
									if (tit.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					} else {
						uni.showModal({
							confirmText: '退出',
							showCancel: false,
							confirmColor: '#207CF7',
							title: '提示',
							content: res.msg,
							success(tit) {
								if (tit.confirm) {
									uni.navigateBack()
								}
							}
						})
					}
				})
			},
			previewload() {
				// console.log('ch');
				this.showdrawing = false
				this.percentage = 0
			},
			previewerror() {
				this.showdrawing = false
				this.percentage = 0
			},
			preview(e) {
				uni.previewImage({
					urls: [e]
				})
			},
			is_weixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					console.log('微信浏览器');
					return true;
				} else {
					console.log("不是微信浏览器");
					return false;
				}
			},
			//下载分享
			getdownload(index) {
				if (this.showdrawing) {
					uni.showToast({
						title: '图片生成中',
						icon: 'none'
					})
					return;
				}
				
				// if(!this.is_weixin()){
				// 	return uni.showModal({
				// 		showCancel: false,
				// 		title: '提示',
				// 		content: '请在微信内置浏览器打开，长按图片下载/分享',
				// 		confirmColor: '#207CF7'
				// 	})
				// }
				this.createPoster()
				return

				uni.showModal({
					showCancel: false,
					title: '提示',
					content: '请在微信内置浏览器打开，长按图片下载/分享',
					confirmColor: '#207CF7'
				})
				return
				console.log('要下载的图片地址：', this.swiperList[0]);

				let url = this.swiperList[0]
				// return
				const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
					.test(
						navigator.userAgent) ? false : true;
				if (this.is_weixin()) {
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: '请在微信内置浏览器打开，长按图片下载/分享',
						confirmColor: '#207CF7'
					})
				} else {
					if (detectDeviceType()) {
						let _this = this

						// if (_this.isDowload) {
						// 	uni.showToast({
						// 		icon: 'none',
						// 		title: '请等待上一个视频下载完成后，再下载',
						// 	});
						// }
						// PC端
						// this.delItem.url = 'http://www.liwantao.top/test.mp4'

						const downloadTask = uni.downloadFile({
							url, //文件链接
							timeout: 99999999,
							success: (res) => {
								if (res.statusCode === 200) {
									var oA = document.createElement("a");
									// oA.download = _this.delItem.name; // 设置下载的文件名，默认是'下载'	
									oA.href = res.tempFilePath; //临时路径再保存到本地
									document.body.appendChild(oA);
									oA.click();
									oA.remove(); // 下载之后把创建的元素删除
								}
							},
							fail: (err) => {
								_this.show = false;
								_this.isDowload = false
								_this.progress = 0

								// console.log(_this.show, _this.isDowload, _this.progress, err);
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '失败请重新下载',
								});
							},
						})

						downloadTask.onProgressUpdate((res) => {
							if (res.progress > 0) {
								_this.show = true;
								_this.isDowload = true
							}
							_this.progress = res.progress;
							if (res.progress == 100) {
								_this.show = false;
								_this.isDowload = false
								_this.progress = 0

								uni.showToast({
									icon: 'success',
									title: '图片下载成功！',
								});
							}
						})
					} else {
						uni.showModal({
							showCancel: false,
							title: '提示',
							content: '请在微信内置浏览器打开，长按图片下载/分享',
							confirmColor: '#207CF7'
						})
						return
						// 其他移动端浏览器
						// window.open(this.delItem.url)

						let _this = this
						// this.delItem.url = 'http://www.liwantao.top/test.mp4'

						var oA = document.createElement("a");
						// oA.download = _this.delItem.name;
						oA.href = url;
						document.body.appendChild(oA);
						oA.click();
						oA.remove();
					}
				}
			},
			getisback() {

				uni.navigateBack()

			},
			// 跳转
			tn(e) {
				// console.log(e);
				uni.navigateTo({
					url: e,
				});
			},

			// cardSwiper
			cardSwiper(e) {
				// console.log(e.detail);
				this.cardCur = e.detail.current
			},

			// 弹出压屏窗
			showLandscape() {
				this.openLandscape()
			},
			// 打开压屏窗
			openLandscape() {
				this.show1 = true
			},
			// 关闭压屏窗
			closeLandscape() {
				this.show1 = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './ys.scss';
</style>