<template>
	<view class="selectPage">
		<headers :showBack="true">
			<view class="headerName">
				{{isAdd?'选择测量位置':'已测量'}}
			</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-icons2 class="arrowdown" type="arrowdown"></uni-icons2>
				</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-icons2 class="arrowdown" type="arrowdown"></uni-icons2>
				</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>
		 
		<movable-area class="movableBox" ref="movableBox">
			<movable-view direction="all" @scale="onScale" @change="changePosFn" :friction="100" scale="true" scale-min="0.1" scale-max="10" :scale-value="changePos.scale">
				<view class="drawing_wrap" @click="clickDraw2">
					<image class="drawing_bg" ref="drawing" :src="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'}" >
						<!-- <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/addr_green.png"></image>
						<image class="addrImg" v-else src="/static/addr_red.png"></image>
					 </view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	let offsetHeight = 0;
	let offsetWidth = 0;
	export default {
		data() {
			return {
				projectSn: '',
				buildIndex: '',
				buildList: [],
				floorList: [],
				floorIndex: '',
				imgUrl: '',
				preserveX: 0,
				preserveY: 0,
				coordinateX: 0, //实际位置
				coordinateY: 0, //实际位置
				markerList: [],
				isAdd: true,
				changePos: {
					"y": 0,
					"scale": 0.5,
					"x": 0
				},
				imgRatioX:1,
				imgRatioY:1,
				imgOriginW:0,
				imgOriginH:0,
				movableBoxTop:0
			}
		},
		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;
			if (options.isAdd == 'true') {
				this.isAdd = true
			} else {
				this.isAdd = false
			}
			
			

		},
		onShow() {
			console.log('onShow selectPage')
			setTimeout(()=>{
				this.changePos.scale=0.5
				this.getFloorList();
			},200)
		},
		methods: {
			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.scale=e
				console.log(e.detail)
			},
			//获取楼层信息
			getFloorList() {
				this.sendRequest({
					url: 'xmgl/massReboundBuild/getBuildFloorList',
					method: 'post',
					data: {
						projectSn: this.projectSn
					},
					success: res => {
						this.buildIndex = 0;
						this.buildList = res.result;
						this.floorList = res.result[0].floorList;
						this.floorIndex = 0;
						this.imgUrl = this.floorList.length > 0 ? res.result[0].floorList[0].drawingUrl : '';
						// console.log('getFloorList 成功')
						// this.$nextTick(() => {
						// 	this.getMarkerList();
						// })
						setTimeout(()=>{
							this.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(id) {
				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
					})
				}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.detail.x,e.detail.y)
				console.log(this.changePos.x,this.changePos.y)
				
				this.coordinateX = ((e.detail.x-this.changePos.x)/this.changePos.scale)-9
				this.coordinateY = ((e.detail.y-this.changePos.y-this.movableBoxTop)/this.changePos.scale)-10
				
				console.log(this.coordinateX,this.coordinateY)
				// console.log(this.imgRatioX+'_'+this.imgRatioY)
				// alert(this.coordinateX+'_'+this.coordinateY+'_'+this.changePos.scale+'_'+this.imgRatioX+'_'+this.imgRatioY)
				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()
				// 	}
				// })
				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;
					}
				})
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		align-items: center;
	}

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

	.flex3 {
		display: flex;
	}

	.content {
		padding: 40rpx 30rpx 0;
	}

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

	}

	.picker {
		border: 1px solid rgba(91, 95, 102, 0.5);
		padding: 6px 30rpx;
		font-size: 30rpx;
		border-radius: 60rpx;
		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: 36rpx;
		height: 40rpx;
		z-index: 111;
	}

	.arrowdown {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		color: #262D47;
		opacity: 0.8;
	}

	.mapMarker {
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		z-index: 999;
		width: 60rpx;
		height: 60rpx;
	}

	.placeholder {
		color: #999;
	}

	.type {
		margin-bottom: 20rpx;
	}

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

	.movableBox {
		height: calc(100% - 200px);
		width: 100%;
		position: fixed;
		overflow: hidden;
	}
	.addrImg {
		width: 48rpx;
		height: 48rpx;
	}
</style>
