<template>
	<view class="sign">
		<!-- v-show="!signFlag" -->
		<view style="position: relative;background-color: #fff;z-index:9;">
			<navbar title="签字验收" :isCenter="true" :back="true"></navbar>
			<u-parse :content="html"></u-parse>
			
			
			<view class="submit" @click="gosign" v-if="signNum!=3">
				签署
			</view>
			<view class="submit" @click="getReport" v-if="signNum==3">
				查看报告
			</view>
		</view>
		
		<view class="signContainer" :style="{zIndex:signFlag?999:-1,right:signFlag?0:'-9999rpx'}">
			<view style="width:100%;height: calc(100vh - 100rpx);">
			    <l-signature disableScroll 
				backgroundColor="#fff" 
				ref="signatureRef" 
				:penColor="penColor" 
				:penSize="penSize" 
				:landscape="false"
				:openSmooth="openSmooth" ></l-signature>
			</view>
			<view class="btnGroup">
			    <button @click="toolHandle('clear')">清空</button>
			    <button @click="toolHandle('undo')">撤消</button>
			    <button @click="toolHandle('save')">保存</button>
			    <button @click="signFlag=false">返回</button>
			    <!-- <button @click="toolHandle('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue';
	import {getAcceptance,setSing} from '@/common/api.js'
	import {getToken} from '@/common/auth.js'
	
	export default {
		components:{navbar},
		data() {
			return {
				html:``,
				list: [
					
				],
				id:null,
				
				//签名
				penColor:'#000000',
				penSize:2,
				openSmooth:true,
				url:'',
				signFlag:false,
				signNum:0,
				url1:null,
				url2:null,
				url3:null,
				pdfUrl:''
			}
		},
		methods:{
			//签名
			toolHandle(type) {
				 if(type == 'openSmooth') {
					 this.openSmooth = !this.openSmooth
					 return
				 }
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// H5 生成的是base64
							let url = res.tempFilePath;
							uni.uploadFile({
								url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
								filePath: url,
								name: 'file',
								formData: {
									user: 'test',
									token:getToken()
								},
								success: (res) => {
									console.log(res,"uuu")
									let urlInfo = JSON.parse(res.data)
									let url = urlInfo.data.fullurl;
									this.signNum++;
									this.toolHandle('clear')
									this.signFlag = false;
									
									this.$nextTick(()=>{
										if(this.signNum==1){
											this.url1=url
											this.setHtml(this.url1,this.url2,this.url3)
										}else if(this.signNum==2){
											this.url2=url
											this.setHtml(this.url1,this.url2,this.url3)
										}else{
											this.url3=url
											this.setHtml(this.url1,this.url2,this.url3)
										}
										// console.log(this.$refs,this.$refs[`sign${this.signNum}`])
										// let url = `<img src="${this.url}" red="sign2"></img>`
										
										// const query = uni.createSelectorQuery().in(this);
										// query.select(`#sign${this.signNum}`).boundingClientRect(data => {
										//   console.log("得到布局位置信息" + JSON.stringify(data));
										// }).exec();
										// this.$refs[`sign${this.signNum}`].src=this.url;

										// document.getElementById('sign'+signNum).src=this.url
									})
								},
								fail: (res) => {
									console.log(res,"rrr")
								}
							});
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			getReport(){
				uni.navigateTo({
					url:'/pages/webview/webview?url='+this.pdfUrl
				})
			},
			gosign(){
				uni.pageScrollTo({
					selector: ".cart-box",
					scrollTop: 0
				})
				this.signFlag=true;
				
				this.toolHandle('clear')
			},
			getAcceptance(){
				getAcceptance({id:this.id,custom: { auth: true }}).then(res=>{
					console.log(res,"55555")
					this.list = res.data;
					this.setHtml()
				})
			},
			setHtml(img1,img2,img3){
				let temp=`
					${this.list.map((item,index)=>{
						let intro = `${item.intro.map((p,i)=>{
							return `<div>
									<label :for="${p.name+i}">${p.name}</label>
									<input type="checkbox" :checked="${p.checked}" :id="${p.name+i}">
								</div>`
						})}`
						let result = `${item.result.map((m,n)=>{
							return `<div>
									<label :for="${m.name+n}">换热介质无腐蚀性,达标</label>
									<input type="checkbox" :checked="${m.checked}" :id="${m.name+n}">
								</div>`
						})}`
						let info;
						if(index==0){
							info = `<td style="text-align:center;" rowspan="${this.list.length}">
								1、验收内容由审核人员勾选；2、照片由施工单位、供货单位提供，同时照片自动显示上传时间和地点；3、验收结果由验收审核人员填写
							</td>`
						}else{
							info=``
						}
						
						return `
						<tr>
							<td style="text-align:center;">${index+1}</td>
							<td style="text-align:center">${item.title}</td>
							<td style="text-align:center;display: flex;flex-wrap: wrap;width:100px">
								${intro}
							</td>
							<td style="text-align:center">
								${result}
							</td>
							${info}
						</tr>`
					}).join('')}`
					let html = `
					<table id="example" cellspacing="0" width="100%" border="1">
					    <thead>
					        <tr>
					            <td style="text-align:center" colspan="6">“中科福德”热泵产品安装施工质量控制、验收报告</td>
					        </td>
					    </thead>
					    <tr>
					        <td style="text-align:center;width:30px">序号</td>
					        <td style="text-align:center">验收项</td>
					        <td style="text-align:center">验收内容</td>
					        <td style="text-align:center">审核评估结果</td>
					        <td style="text-align:center">说明</td>
					    </tr>
					    ${temp}
					    <tr>
					        <td style="text-align:center" rowspan="3">10</td>
					        <td style="text-align:center;width:20%" colspan="2">调试人员签字</td>
					        <td style="text-align:center;width:30%">安装或者供货单位签字</td>
					        <td style="text-align:center;width:30%">审核验收人员签字</td>
					    </tr>
						<tr>
							<td style="text-align:center;width:20%;" colspan="2"></td>
						    <td style="text-align:center;width:30%;height:100px"></td>
						    <td style="text-align:center;width:30%;height:100px">
								
							</td>
						</tr>
					    <tr>
					        <td style="text-align:center" colspan="4">日期和地理位置自动确认</td>
					    </tr>
					</table>
					<img class="td" style="position:absolute;bottom:120px;left:50px" src="${img1}" alt="14" height="50" width="100"/>
					<img class="td" style="position:absolute;bottom:120px;left:180px" src="${img2}" alt="14" height="50" width="100"/>
					<img class="td" style="position:absolute;bottom:120px;right:0px" src="${img3}" alt="14" height="50" width="100"/>`
					this.html = html;
					if(img1||img2||img3){
						setSing({id:this.id,content:this.html}).then(res=>{
							console.log(res,"55555")
							this.pdfUrl = res.data.acceptance_file
							
						})
					
					}
			},
			
		},
		onLoad(option){
			console.log(option)
			
			this.id = option.id;
			this.getAcceptance()
		},
		/**
		   * 用户点击右上角分享
		   */
		onShareAppMessage: function () {
		
		}
		
	}
</script>

<style lang="scss" scoped>
	.submit{
		height: 98rpx;
		background: #8EC31F;
		line-height: 98rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		margin-top:40rpx;
	}
	.sign{
		position:relative;
		overflow: hidden;
		.signContainer{
			position: absolute;
			bottom:0;
			right:-9999rpx;
			z-index:999;
			width:100%;
			height:100%;
			background-color: #ffffff;
		}
	}
	.btnGroup{
		display: flex;
		background-color: #ffffff;
		height: 100rpx;
	}
</style>