<template>
	<view class="">
		<view class="btn" @click="takephotos">
			点击保存
		</view>
		<view class="swiperBox">
			<swiper :style="{height: swiperHeight+'px'}" @change='swiperChange' :current="current" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="swiper-item swiper-itemcopy" :id='"copyswiperItem"+index'>
						<view class="titleBox">
							<!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
							<limeQrcodeVue ref="qrcodeRef" :value="BASE_URL+'/h5/#/pages/deal/productInfo?id='+item.id" size="112rpx" ></limeQrcodeVue>
							<view class="title">
								<p>{{item.title1}}</p>
						
								<p>{{item.title2}}</p>
								<p class="warn">{{item.title3}}</p>
							</view>
						</view>
						<view class="content" :id='"copycontent"+index'>
							
							
							
						</view> 
					</view>
					<view class="swiper-item" :id='"swiperItem"+index'>
						<view class="titleBox">
							<!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
							<limeQrcodeVue ref="qrcodeRef" :value="BASE_URL+'/h5/#/pages/deal/productInfo?id='+item.id" size="112rpx" ></limeQrcodeVue>
							<view class="title">
								<p>{{item.title1}}</p>

								<p>{{item.title2}}</p>
								<p class="warn">{{item.title3}}</p>
							</view>
						</view>
						<view class="content" :id='"content"+index' v-if="item.detail">
							<u-parse :content="item.detail"></u-parse>
							
							
						</view> 
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		<u-overlay :show="show" @click="show = false">
				<view class="warp">
					<view class="rect" @tap.stop>
						<image  :src="url" mode="widthFix"></image>
						<p>长按保存到本地</p>
					</view>
				</view>
			</u-overlay>
			<u-overlay :show="show2" @click="show2 = false">
					<view class="warp">
						<view class="rect2" >
							<image src="../../static/swiper1.png" mode=""></image>
							<p style="color: #fff;">{{alert2}}</p>
						</view>
					</view>
				</u-overlay>
			<u-overlay :show="show1" @click="show1 = false">
					<view class="warp">
						<view class="rect1" @tap.stop>
							<image src="../../static/warn.png" mode=""></image>
							<p>{{alert1}}</p>
							<u-button color="#A5CF49" type="success" shape="circle" text="确认收藏" @click="addFavorite"></u-button>
						</view>
					</view>
				</u-overlay>
				
	</view>
</template>

<script setup>
	import limeQrcodeVue from '../../uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue';
	import html2canvas from 'html2canvas';
	import {BASE_URL} from '../../utils/http.js'
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		nextTick,
		ref
	} from "vue"
	import {getsimpleimages,getplatformeditor} from '@/utils/api.js'
	let show=ref(false)
	let show1=ref(false)
	let show2=ref(true)
	let swiperChange=(e)=>{
		page.value+=1
		console.log(e.detail.current)
		current.value=e.detail.current
		var dom = document.getElementById('swiperItem'+current.value); // 获取dom元素
		
		if(dom&&dom.children[1]){
			swiperHeight.value=667+dom.children[1].clientHeight
		}else{
			swiperHeight.value=667
		}
			getsimpleimages({page:1,page_num}).then(res=>{
				list.value=[...list.value,...res.data] 
				list.value.forEach(item=>{
				})
			})
	}
	let page_num=1
	let page=ref(1)
	let url=ref()
	let swiperHeight=ref(200)
	let current=ref(0)
	let list=ref([])
	let refList=ref([])
	let setBoxRef=(el)=>{
		if(el){
			refList.value.push(el)
		}
	}
	

let takephotos=()=>{
	var swiper = document.getElementById('copyswiperItem'+current.value); // 获取dom元素
	var dom = document.getElementById('content'+current.value); // 获取dom元素
	var dom1 = document.getElementById('copycontent'+current.value); // 获取dom元素
	// if(dom&&dom.children[1]){
	// 	swiperHeight.value=67+dom.children[1].clientHeight
	// }else{
	// 	swiperHeight.value=67
	// }
	  dom1.innerHTML=dom.innerHTML
	  let res = domTrans(dom1)
	  // console.log(1223,res)
	          let html = forFn(res)
			  dom1.innerHTML=html
	  html2canvas(swiper).then((canvas) => {
	    url.value = canvas.toDataURL("image/png").replace('image/png', 'image/octet-stream');
		console.log( url.value)
		show.value=true
	  });  
}
let alert1=ref('')
let alert2=ref('')
	onLoad(() => {
		getplatformeditor().then(res=>{
			alert1.value=res.data.alert1
			alert2.value=res.data.alert2
		})
		getsimpleimages({page:page.value,page_num:2}).then(res=>{
			list.value=res.data
		})
		let flag=uni.getStorageSync('collect')
		if(!flag){
			show1.value=true
			uni.setStorageSync('collect',true)
		}
		setTimeout(()=>{
			show2.value=false
		},2000)
	})
	nextTick(() => {
		var dom = document.getElementById('swiperItem'+current.value); // 获取dom元素
		if(dom&&dom.children[1]){
			swiperHeight.value=667+dom.children[1].clientHeight
		}else{
			swiperHeight.value=667
		}
	    });

	onShow(() => {
		
	})
	
	// 将DOM转换为js对象
	    function domTrans(dom) {
	      // 总dom树
	      let tree = [];
	
	      // 递归, node = 当前的节点，dataNode = 数据插入的节点
	      const loop = (node, dataNode) => {
	        // 当前节点的模板
	        let temp = {
	          type: node.nodeType,
	        };
	        
	        // 如果是文本节点 或 单标签节点
	        if (temp.type == 3 && node.nodeValue.match(/\S/)) {
	          temp["content"] = node.nodeValue;
	          temp["tag"] = node.nodeName;
	          dataNode.push(temp);
	        }
	
	        // 元素节点
	        if (temp.type == 1) {
	          let attributes = getAttribute(node);
	
	          // 如果没有属性，不添加 attributes
	          if (attributes) temp["attributes"] = attributes;
	          
	          var newNode = node.childNodes
	          
	          var newNode2
	          if(newNode[0] && newNode.length <= 1){
	              newNode2 = newNode[0].childNodes.length
	          }
	          // 当前节点下还有子节点
	          if (node.childNodes.length > 1 || newNode2>0) {
	            temp["children"] = [];
	            temp["tag"] = node.nodeName.toLowerCase();
	            for (let i = 0; i < node.childNodes.length; i++) {
	              loop(node.childNodes[i], temp.children);
	            }
	          }
	          // 当前节点下只有文本 或 单标签节点
	          if (node.childNodes.length <= 1 && newNode2==0) {
	              
	            temp["content"] = node.innerHTML;
	            temp["tag"] = node.nodeName.toLowerCase();
	          }
	
	          dataNode.push(temp);
	          
	        }
	      };
	      loop(dom, tree);
	      return tree[0].children;
	    }
	    function forFn(arr){
	        
	      let html = ``
	      for(let i =0; i < arr.length; i++){
	        let tArr = []
	        if(arr[i].content){
	          tArr = arr[i].content.split("")
	        }
	        if(arr[i].type === 1){
	          if(arr[i].attributes){
	              if(arr[i].attributes.src){
	                  html += `<img class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">`
	              }else{
	                  html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">`
	              }
	                
	            }else{
	                if(arr[i].tag == "img"){
	                  html += `<${arr[i].tag} style="${arr[i].attributes.style}">`
	                }else{
	                    html += `<${arr[i].tag}>`
	                }
	            }
	          if(arr[i].children){
	            html += forFn(arr[i].children)
	          }
	          html += `</${arr[i].tag}>`
	        }
	        tArr.forEach(el => {
	          if(arr[i].tag === "#text"){
	            html += `${el}`
	          }else{
	              
	            if(arr[i].attributes){
	                if(arr[i].tag == "img"){
	                    html += `<${arr[i].tag} class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`
	                }else{
	                    html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`
	                }
	            }else{
	                if(arr[i].tag == "img"){
	                    html += `<${arr[i].tag} src="${arr[i].attributes.src}">${el}</${arr[i].tag}>`
	                }else{
	                    html += `<${arr[i].tag}>${el}</${arr[i].tag}>`
	                }
	                
	            }
	          
	          }
	        });
	      }
	        // console.log(html,'====')
	      return html
	    }
		// 提取元素属性
		  function getAttribute(dom) {
		      let attributes = {};
		    //   let empty = true;
		      Array.from(dom.attributes).map((item) => {
		        attributes[item.nodeName] = item.nodeValue;
		        // empty = false;
		      });
		      return attributes;
		    }
			let h2='<h2 style=""><span style="color: rgb(0, 0, 0); background-color: rgb(0, 255, 255);">斑马K496=31.8w</span><font color="#000000">,</font><span style="color: rgb(0, 0, 0); background-color: rgb(0, 255, 0);">s.8000区</span><font color="#000000" style="background-color: rgb(0, 255, 0);">左</font><font color="#000000"><span style="background-color: rgb(0, 255, 0);">右,</span>42金1,26.8e</font><font color="#000000" style="">战v30,</font><font color="#000000">速316w,法1.7e,冰16.5w,514鞋,7个0星,世民1星,</font><span style="color: rgb(0, 0, 255);">3个2星,精卫3星,4个4星(</span><font color="#000000">大圣通天等),</font><span style="color: rgb(255, 255, 255); background-color: rgb(255, 0, 0);">.28个5星</span><font color="#000000">,</font><span style="color: rgb(255, 255, 255); background-color: rgb(107, 173, 222);">19个终皮肤</span><font color="#000000">劫81,</font><span style="color: rgb(0, 0, 255);">10个仙器技满</span><font color="#000000">，龙4普4魔4，，贴35，金盒子2个，142w玉，强石14w，，</font><span style="color: rgb(0, 0, 255);">30个小ha</span><font color="#000000">o，手几</font></h2>'
</script>


<style lang="scss">
	.swiper-itemcopy{
		position: absolute;
		top: 999px;
	}
	.content{
		word-break: break-all;
		    word-wrap: break-word;
		overflow: hidden;
		position: relative;
		.watermark{
			display: flex;
			flex-wrap: wrap;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			// bottom: 0;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		.watermark1{
			position: absolute;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
	.warp {
		padding: 0 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
	
		.rect {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 694px;
			height: auto;
			image{
				width: 100%;
			}
			p{
				font-size: 48rpx;
				color: #fff;
				margin-top: 12rpx;
			}
			// background-color: #fff;
		}
		.rect2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:374rpx;
				height: 361rpx;
			}
		}
		.rect1 {
			padding: 60rpx 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 558rpx;
			height: 438rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			image{
				width: 96rpx;
				height: 96rpx;
			}
			p{
				font-size: 24rpx;
				margin: 62rpx 0 40rpx;
			}
			// background-color: #fff;
		}
	page {
		height: 100%;

		.btn {
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
			float: right;
			width: 182rpx;
			height: 70rpx;
			background: #A5CF49;
			border-radius: 0rpx 0rpx 0rpx 32rpx;
		}

		.swiperBox {


			width: 694rpx;
			position: fixed;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);

			.swiper-item {
				.titleBox {
					font-size: 28rpx;
					color: #666666;
					padding: 6rpx;
					background: #FFF5E5;
					display: flex;
					align-items: center;

					image {
						margin-right: 4rpx;
						width: 112rpx;
						height: 112rpx;
					}
					.warn{
						font-size: 32rpx;
						color: #FF2828;
					}
					.title{
						margin-left: 4rpx;
					}
					
				}
			}

		}
	}
</style>
