<template>
	<view class="selectPage">
		<!-- <headers :showBack="true">
			<view class="headerName">
				{{isAdd?'选择测量位置':'已测量'}}
			</view>
			<view class="save_btn" v-if="isNetwork" @click="saveImg">缓存</view>
		</headers> -->
		<!-- <view class="content">
			<view class="flex type">
				<view class="title">测量楼栋：</view>
				<picker class="picker" @change="pickerChangeBuild" :value="buildIndex" :range="buildList"
					range-key="buildName">
					<view class="placeholder" v-if="buildIndex===''">请选择</view>
					<view v-else class="uni-input">{{buildList[buildIndex].buildName}}#</view>
					<uni-icons class="arrowdown" type="arrowdown"></uni-icons>
				</picker>
			</view>
			<view class="flex type">
				<view class="title">选择楼层：</view>
				<picker class="picker" @change="pickerChangeFloor" :value="floorIndex" :range="floorList"
					range-key="floorName">
					<view class="placeholder" v-if="floorIndex==='' || floorList.length==0">请选择</view>
					<view v-else class="uni-input">{{floorList[floorIndex].floorName}}F</view>
					<uni-icons class="arrowdown" type="arrowdown"></uni-icons>
				</picker>
			</view> -->
			<!-- <view class="type">
				<view class="title">测试区域：</view>
				<view class="drawing_wrap" @click="clickDraw">
					<view class="drawing_bg drawing_bg2" id="drawing_bg" ref="drawing"
						:style="{'background-image':'url('+url_config+'image/'+imgUrl+')'}"></view>
					<view class="marker" v-for="(item,index) in markerList" :key="index"
						:style="{top:item.y+'px',left:item.x+'px'}" @click.stop="goDetails(item.id)">
						<image class="addrImg" v-if="item.resultType==1" src="/static/addr_green.png"></image>
						<image class="addrImg" v-else src="/static/addr_red.png"></image>
					</view>
				</view>
			</view> -->
		<!-- </view> -->
		 <view class="wrap" v-if="imgUrl">
		<movable-area class="movableBox" ref="movableBox">
			<movable-view direction="all" @scale="onScale" @change="changePosFn" :x="changePos.x" :y="changePos.y" :friction="100" scale="true" scale-min="0.1" scale-max="10" :scale-value="changePos.scale">
				<view class="drawing_wrap">
					<!-- <img-cache class="drawing_bg" ref="drawing" :src="url_config+'image/'+imgUrl" :style="{width:imgOriginW+'px',height:imgOriginH+'px'}"></img-cache> -->
					<!-- <image class="drawing_bg" ref="drawing" src="_doc/uniapp_save/16377541225310.png" :style="{width:imgOriginW+'px',height:imgOriginH+'px'}"></image> -->
					<image class="drawing_bg" ref="drawing"  :src="smImg(url_config+'image/'+imgUrl)" :style="{width:imgOriginW+'px',height:imgOriginH+'px'}"></image>
					<!-- @click.stop="goDetails(item.id)" -->
					<view class="marker" v-for="(item,index) in markerList" :key="index" :style="{top:item.coordinateY+'px',left:item.coordinateX+'px'}" @click="goDetails(item)">
						<!-- <view class="marker" v-for="(item,index) in markerList" :key="index" :style="{top:item.y+'px',left:item.x+'px'}" > -->
						<image class="addrImg" v-if="item.resultType==1" src="../../../../static/betonManage/g-icon.png"></image>
						<image class="addrImg" v-if="item.resultType==2 && item.selfTestState == 1" src="../../../../static/betonManage/o-icon.png"></image>
						<image class="addrImg" v-if="item.resultType==2 && item.selfTestState == ''" src="../../../../static/betonManage/y-icon.png"></image>
						<image class="addrImg" v-if="item.resultType==2 && item.selfTestState == 2" src="../../../../static/betonManage/r-icon.png"></image>
						<!-- <image class="addrImg" v-else src="/static/addr_red.png"></image> -->
					 </view>
				</view>
			</movable-view>
		</movable-area>
		</view>
		<view class="info_list" v-if="imgUrl">
			<view class="info_item">
				<image src="../../../../static/betonManage/g-icon.png"></image>
				测量合格
			</view>
			<view class="info_item">
				<image src="../../../../static/betonManage/y-icon.png"></image>
				测量异常未上传自测报告
			</view>
			<view class="info_item">
				<image src="../../../../static/betonManage/o-icon.png"></image>
				测量异常、自测报告结果正常
			</view>
			<view class="info_item">
				<image src="../../../../static/betonManage/r-icon.png"></image>
				测量异常、自测报告结果异常
			</view>
		</view>
		<view class="no_data" v-if="!imgUrl">
			<image src="../../../../static/noData.png"></image>
			<view>暂无数据</view>
		</view>
		<!-- <view class="start_wrap">
			<view class="start_btn" v-if="isCheck" @click="goDetails('')">确认</view>
		</view> -->
	</view>
</template>

<script>
	import { resolveFile, getDirSize, removeDir, formatSize, storage } from '@/components/img-cache';
	let offsetHeight = 0;
	let offsetWidth = 0;
	export default {
		props:['dataId'],
		data() {
			return {
				projectSn: '',
				buildIndex: '',
				buildList: [],
				floorList: [],
				floorIndex: '',
				imgUrl: '',
				preserveX: 0,
				preserveY: 0,
				coordinateX: 0, //实际位置
				coordinateY: 0, //实际位置
				markerList: [],
				isAdd: false,
				changePos: {
					"y": 0,
					"scale": 0.5,
					"x": 0
				},
				imgRatioX:1,
				imgRatioY:1,
				imgOriginW:0,
				imgOriginH:0,
				movableBoxTop:0,
				imgScale: 0.5,
				isTest: false,
				isCheck: false,
				isNetwork: true
			}
		},
		created(){
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.loadData()
			// setTimeout(()=>{
			// 	this.changePos.scale=0.5
			// 	this.getFloorList();
			// },200)
			// if(uni.getStorageSync('outLineData') && !this.isNetwork){
			// 	this.markerList = JSON.parse(uni.getStorageSync('outLineData'))	
			// }
		},
		mounted(){
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let obj = uni.createSelectorQuery().select('.movableBox')
					obj.boundingClientRect(function(data) { // data - 各种参数
			
						console.log('各种参数')
						console.log(JSON.stringify(data))
						that.movableBoxTop = data.top;
					}).exec()
				}
			})
		},
		onLoad(options) {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.loadData()
			// setTimeout(()=>{
			// 	this.changePos.scale=0.5
			// 	this.getFloorList();
			// },200)
			// if(uni.getStorageSync('outLineData') && !this.isNetwork){
			// 	this.markerList = JSON.parse(uni.getStorageSync('outLineData'))	
			// }
			// if (options.isAdd == 'true') {
			// 	this.isAdd = true
			// } else {
			// 	this.isAdd = false
			// }
			// if (options.isTest == 'true') {
			// 	this.isTest = true
			// } else {
			// 	this.isTest = false
			// }

		},
		onShow() {
			console.log('onShow selectPage')
			// setTimeout(()=>{
			// 	this.changePos.scale=0.5
			// 	this.getFloorList();
			// },200)
			// if(uni.getStorageSync('outLineData') && !this.isNetwork){
			// 	this.markerList = JSON.parse(uni.getStorageSync('outLineData'))	
			// }
		},
		methods: {
			loadPoint(){
				let that = this
				that.sendRequest({
					url: 'xmgl/massReboundMainMeasureRecord/selectMeasureRecordList',
					method: 'post',
					data: {
						pouringId: that.dataId
					},
					success: res => {
						that.markerList = res.result
						console.log(res)
					}
				})
			},
			loadData(){
				let that = this
				that.sendRequest({
					url: 'xmgl/massReboundPouringOrder/queryById',
					method: 'post',
					data: {
						id: that.dataId
					},
					success: res => {
						that.imgUrl = res.result.drawingUrl
						let imageLength = res.result.imageLength; //获取图片高度
						let imageWidth = res.result.imageWidth; //获取图片宽度
						that.imgOriginW=imageWidth
						that.imgOriginH=imageLength
						that.loadPoint()
						console.log(res)
					}
				})
			},
			saveImg(){
				console.log(12)
				let i = 0
				this.buildList.forEach(item=>{
					i++;
					item.floorList.forEach(item2=>{
						if(item2.drawingUrl){
							let url = this.url_config+'image/'+item2.drawingUrl
							let that = this
							setTimeout(() => {
							    uni.downloadFile({  
							        url: url  
							    }).then(res => {  
									console.log(res)
							        if (res[1].statusCode == 200) {
							            uni.saveFile({  
							                tempFilePath: res[1].tempFilePath,  
							                success: function(res) {  
							                    console.log('下载完成：' + res.savedFilePath);  
												console.log(that.url_config+'image/'+item2.drawingUrl)
							                    uni.setStorageSync(that.url_config+'image/'+item2.drawingUrl, res.savedFilePath)  
							                }  
							            });  
										if(i == (that.buildList.length - 1)){
											uni.showToast({
												title: '保存成功'
											})
										}
							        } else {  
							            return Promise.reject('下载临时文件失败')  
							        }  
							    }).catch(info => {  
							        console.log(info);  
							    })  
							}, 1000)
						}
					})
				})
			},
			smImg(url){
				// console.log(url,this.imgUrl)
				
			    let real_img = url
				console.log(url)
			    const cached = uni.getStorageSync(real_img)
				console.log(cached)
				let result = ''
			    if (cached) {  
			        console.log(url + "已缓存为：" + cached)  
			        result = cached  
			    } else {  
			        // console.log("未缓存,延迟下载", url)    
			        result = real_img  
			    }
				console.log(result)
				return result
			}, 
			changePosFn(e) {
				console.log('移动')
				console.log(e.detail)
				this.changePos.x = e.detail.x
				this.changePos.y = e.detail.y
			},
			onScale(e) {
				console.log('缩放')
				// this.changePos = e.detail
				this.imgScale = e.detail.scale
				this.changePos.x = this.changePos.x+e.detail.x
				this.changePos.y = this.changePos.y+e.detail.y
				// this.scale=e
				console.log(e.detail)
			},
			//获取楼层信息
			getFloorList() {
				let that = this
				uni.getNetworkType({
				    success: function (res) {
				        // console.log(res.networkType);
						if(res.networkType == 'none'){
							let data = uni.getStorageSync('foolrListData');
							that.buildIndex = 0;
							that.buildList = data;
							that.floorList = data[0].floorList;
							that.floorIndex = 0;
							console.log(data)
							that.imgUrl = that.floorList.length > 0 ? data[0].floorList[0].drawingUrl : '';
							console.log(that.imgUrl)
							let imageLength = that.buildList[that.buildIndex].floorList[that.floorIndex]
								.imageLength; //获取图片高度
							let imageWidth = that.buildList[that.buildIndex].floorList[that.floorIndex]
							.imageWidth; //获取图片宽度
							that.imgOriginW=imageWidth
							that.imgOriginH=imageLength
							that.isNetwork = false
						} else {
							that.isNetwork = true
							that.sendRequest({
								url: 'xmgl/massReboundBuild/getBuildFloorList',
								method: 'post',
								data: {
									projectSn: that.projectSn
								},
								success: res => {
									that.buildIndex = 0;
									that.buildList = res.result;
									that.floorList = res.result[0].floorList;
									that.floorIndex = 0;
									that.imgUrl = that.floorList.length > 0 ? res.result[0].floorList[0].drawingUrl : '';
									// console.log('getFloorList 成功')
									// this.$nextTick(() => {
									// 	this.getMarkerList();
									// })
									uni.setStorageSync('foolrListData', res.result);
									setTimeout(()=>{
										that.getMarkerList();
									},500)
							
								}
							})
						}
					},
				})
				
			},

			//获取选择的楼栋
			pickerChangeBuild(e) {
				this.buildIndex = e.detail.value;
				this.floorList = this.buildList[this.buildIndex].floorList;
				this.floorIndex = 0; //回显第一层
				if(this.floorList.length>0){
					this.imgUrl = this.floorList[0].drawingUrl;
					this.getMarkerList();
				}else{
					this.imgUrl=''
					this.markerList=[]
				}
				

			},
			//选择楼层
			pickerChangeFloor(e) {
				this.floorIndex = e.detail.value;
				this.imgUrl = this.floorList[this.floorIndex].drawingUrl;
				this.getMarkerList();
			},
			//进入详情
			goDetails(val) {
				console.log(val)
				uni.navigateTo({
					url: './infoDetail?id=' + val.mainId + '&pouringId=' + this.dataId + '&surveyAreaId=' +val.surveyAreaId
				})
				
				// if(this.buildList[this.buildIndex].floorList.length>0){
				// 	uni.navigateTo({
				// 		url: './detail?buildName=' + this.buildList[this.buildIndex].buildName + '&floorName=' +
				// 			this.buildList[this.buildIndex].floorList[this.floorIndex].floorName + '&floorId=' +
				// 			this.buildList[this.buildIndex].floorList[this.floorIndex].floorId + '&coordinateX=' + this
				// 			.coordinateX +
				// 			'&coordinateY=' + this.coordinateY + '&id=' + id + '&isTest=' + this.isTest
				// 	})
				// }else{
				// 	uni.showToast({
				// 		title:'请选择楼层'
				// 	})
				// }
				
			},
			//计算点击的位置
			clickDraw(e) {
				if (!this.isAdd) {
					return
				}
				let offsetLeft = e.currentTarget.offsetLeft; //图片所在位置
				let offsetTop = e.currentTarget.offsetTop; //图片所在位置
				let clientX = e.touches[0].clientX; //点击位置
				let clientY = e.touches[0].clientY; //点击位置
				this.preserveY = clientY - offsetTop - 10;
				this.preserveX = clientX - offsetLeft - 9;
				let imageLength = this.buildList[this.buildIndex].floorList[this.floorIndex].imageLength;
				let imageWidth = this.buildList[this.buildIndex].floorList[this.floorIndex].imageWidth;
				// let imgEl = this.$refs.drawing.$el
				// let offsetHeight = imgEl.offsetHeight;
				// let offsetWidth = imgEl.offsetWidth;

				if (offsetHeight && offsetWidth) {
					let ratioX = (offsetWidth / imageWidth).toFixed(2); //比例
					let ratioY = (offsetHeight / imageLength).toFixed(2); //比例
					this.coordinateX = (clientX - offsetLeft) / Number(ratioX); //实际位置
					this.coordinateY = (clientY - offsetTop) / Number(ratioY); //实际位置
					console.log(this.coordinateX,this.coordinateY)
					// this.coordinateY=(this.coordinateY/this.changePos.scale)-(this.changePos.y/this.changePos.scale)
					// this.coordinateX=(this.coordinateX/this.changePos.scale)-(this.changePos.x/this.changePos.scale)
					// console.log(this.coordinateX,this.coordinateY)
					// this.goDetails('');
				}
			},
			//计算点击的位置
			clickDraw2(e) {
				console.log(e)
				console.log(e.detail.x,e.detail.y,this.imgScale,this.movableBoxTop)
				console.log(this.changePos.x,this.changePos.y)
				
				this.coordinateX = ((e.detail.x-this.changePos.x)/this.imgScale)-20/this.imgScale
				this.coordinateY = ((e.detail.y-this.changePos.y-this.movableBoxTop)/this.imgScale)-50/this.imgScale
				
				console.log(this.coordinateX,this.coordinateY)
				// console.log(this.imgRatioX+'_'+this.imgRatioY)
				// alert(this.coordinateX+'_'+this.coordinateY+'_'+this.changePos.scale+'_'+this.imgRatioX+'_'+this.imgRatioY)
				
				if(this.markerList.length>0){
					if(this.markerList[this.markerList.length-1].isNewPoint){
						this.markerList.splice(this.markerList.length-1,1)
					}
				} else {
					this.markerList.splice(0,1)
				}
				this.markerList.push({
					coordinateX: this.coordinateX,
					coordinateY: this.coordinateY,
					resultType: 1,
					isNewPoint: true
				})
				this.isCheck = true
				// this.goDetails('');
			},
			//获取已测量点位
			getMarkerList() {
				console.log('获取已测量点位')
				// setTimeout(()=>{
				// 	console.log('this.$refs.drawing')
				// 	console.log(this.$refs.drawing.$el.offsetHeight)
				// },1000)

				// uni.getSystemInfo({
				// 	success: function(res) { // res - 各种参数
				// 		let obj = uni.createSelectorQuery().select('.drawing_bg')
				// 		obj.boundingClientRect(function(data) { // data - 各种参数

				// 			console.log('各种参数')
				// 			console.log(JSON.stringify(data))
				// 			offsetHeight = data.height;
				// 			offsetWidth = data.width
				// 		}).exec()
				// 	}
				// })
				if(this.isNetwork){
					this.sendRequest({
						url: 'xmgl/massReboundSurveyArea/getMassReboundSurveyAreaList',
						method: 'post',
						data: {
							floorId: this.buildList[this.buildIndex].floorList[this.floorIndex].floorId
						},
						success: res => {
							// console.log(res)
							let imageLength = this.buildList[this.buildIndex].floorList[this.floorIndex]
								.imageLength; //获取图片高度
							let imageWidth = this.buildList[this.buildIndex].floorList[this.floorIndex]
							.imageWidth; //获取图片宽度
							this.imgOriginW=imageWidth
							this.imgOriginH=imageLength
							// let data = res.result;
							// let markerList = [];
							// if (offsetHeight && offsetWidth) {
							// 	let ratioX = (offsetWidth / imageWidth).toFixed(2); //比例
							// 	let ratioY = (offsetHeight / imageLength).toFixed(2); //比例
							// 	this.imgRatioX=ratioX
							// 	this.imgRatioY=ratioY
							// 	console.log(ratioX,ratioY)
							// 	if (data.length > 0) {
							// 		data.forEach((item, index) => {
							// 			let x = item.coordinateX * Number(ratioX) - 12;
							// 			let y = item.coordinateY * Number(ratioY) - 12;
							// 			let obj = {
							// 				x: x.toFixed(),
							// 				y: y.toFixed(),
							// 				resultType: item.resultType,
							// 				id: item.id
							// 			};
							// 			markerList.push(obj)
							// 		})
							// 	}
							// }
							// this.markerList = markerList;
							this.markerList = res.result;
						}
					})
				} else{
					let imageLength = this.buildList[this.buildIndex].floorList[this.floorIndex]
						.imageLength; //获取图片高度
					let imageWidth = this.buildList[this.buildIndex].floorList[this.floorIndex]
					.imageWidth; //获取图片宽度
					this.imgOriginW=imageWidth
					this.imgOriginH=imageLength
					this.markerList = []
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex3 {
		display: flex;
	}

	.content {
		padding: 20px 30rpx 0;
	}

	.title {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: rgba(55, 45, 102, 1);
		line-height: 42rpx;
		margin-right: 8px;
		width: 90px;
		font-weight: 400;

	}

	.picker {
		border: 1px solid rgba(91, 95, 102, 0.5);
		padding: 6px 30rpx;
		font-size: 30rpx;
		border-radius: 30px;
		width: calc(100% - 90px);
		box-sizing: border-box;
		position: relative;
	}

	.drawing_wrap {
		position: relative;
	}

	.drawing_bg {
		/* width: 100%; */
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
		/* height: 0px; */


	}

	.drawing_bg2 {
		padding-top: 65%;
	}

	.drawing_wrap .marker {
		position: absolute;
		/* background-color: red; */
		width: 18px;
		height: 20px;
		z-index: 111;
	}

	.arrowdown {
		position: absolute;
		top: 10px;
		right: 15px;
		color: #262D47;
		opacity: 0.8;
	}

	.mapMarker {
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 999;
		width: 30px;
		height: 30px;
	}

	.placeholder {
		color: #999;
	}

	.type {
		margin-bottom: 10px;
	}

	movable-view {
		width: auto;
		height: auto;
		position: relative;
	}

	.movableBox {
		height: 500rpx;
		width: 100%;
		/* position: fixed; */
		overflow: hidden;
	}
	.addrImg {
		width: 36px;
		height: 46px;
	}
	.start_wrap {
		/* margin-top: 40px;
		margin-bottom: 40px; */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100px;
	}
	
	.start_btn {
		text-align: center;
		pos-bottom: 20px;
		line-height: 45px;
		width: 60%;
		margin: 0 auto;
		background-color: rgba(72, 141, 236, 1);
		color: #fff;
		border-radius: 35px;
		box-shadow: 0 2px 4px 0 rgba(43, 141, 243, 0.42);
	
	}
	.save_btn{
		position: absolute;
		right: 30rpx;
		top: 24rpx;
		font-size: 14px;
	}
	.wrap{
		width: 690rpx;
		height: 500rpx;
		border-radius: 14rpx;
		border: 1px solid  rgba(42, 43, 91, 0.34);
		margin: 0 auto;
		overflow: hidden;
		margin-bottom: 70rpx;
	}
	.selectPage{
		padding-top: 54rpx;
		
	}
	.info_list{
		width: 690rpx;
		margin: 0 auto;
	}
	.info_item{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	.info_item uni-image{
		width: 24rpx;
		height: 32rpx;
		margin-right: 24rpx;
	}
	.no_data{
		padding-top: 60rpx;
		text-align: center;
		color: rgba(0,0,0,0.5);
		font-size: 28rpx;
		uni-image{
			width: 162rpx;
			height: 130rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 40rpx;
		}
	}
</style>
