<template>
	<div class="canvas">
		<a-form ref="form" :model="formData" label-width="80px"
			><a-row>
				<!-- <a-col :span="4">
					<a-form-item label="画布长">
						<a-input class="inputwid" v-model:value="formData.canvasLength"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="画布宽">
						<a-input class="inputwid" v-model:value="formData.canvasWidth"></a-input>
					</a-form-item>
				</a-col>
				 <a-col :span="4">
					<a-form-item label="最高温度值">
						<a-input disabled class="inputwid" v-model:value="formData.highest"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="最低温度值">
						<a-input disabled class="inputwid" v-model:value="formData.lowest"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="格子大小">
						<a-input class="inputwid" v-model:value="formData.gridSize"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="2">
					<a-button type="primary" @click="drawGraph">生成</a-button>
				</a-col> -->
			</a-row>
		</a-form>
		<div class="gridBox">
			<table class="gridTable baseMap" :style="{ width: darwValue.boxHeight, height: darwValue.boxWidth }">
				<tr v-for="(item, x) in darwValue.pointList" :key="item">
					<th v-for="(point, y) in item" :key="point">
						<span
							class="point"
							:style="{
								background: 'rgba(' + point + ',0.7)',
								width: formData.gridSize + 'px',
								height: formData.gridSize + 'px'
							}"
						/>
					</th>
				</tr>
			</table>
			<!-- 图标和弹出层所在处 -->
			<table class="gridTable layerTable" :style="{ width: darwValue.boxHeight, height: darwValue.boxWidth }">
				<tr class="trNode" v-for="item in darwValue.pointList" :key="item">
					<th class="thNode" v-for="point in item" :key="point">
						<span
							class="point"
							:style="{
								width: formData.gridSize + 'px',
								height: formData.gridSize + 'px'
							}"
						/>
					</th>
				</tr>
			</table>
		</div>
	</div>
</template>

<script setup>
	import api from '@/api/RLGI/supervise.js'
	const darwValue = ref({
		boxWidth: '',
		boxHeight: '',
		pointList: []
	})
	const formData = ref({
		z: 1, //默认为1
		lqData: [],
		gridSize: 7, // 格子大小
		lowest: -30, //最低温度
		highest: 40, //最高温度
		canvasLength: 119, //画布长
		canvasWidth: 80 //画布宽
	})

	const props = defineProps({
		pointList: {
			type: String,
			required: true
		},
		tableData: {
			type: Array,
			required: true
		}
	})

	onMounted(() => {
		drawGraph()
	})

	function drawGraph() {
		let arr = JSON.parse(props.pointList)
		arr.forEach((item) => {
			if (item.z == formData.value.z) {
				formData.value.lqData.push(item)
			}
		})
		formData.value.lqData = JSON.stringify(formData.value.lqData)

		api.getColor(formData.value).then((res) => {
			darwThermalMap(res)
		})
	}

	// 绘制热力图
	function darwThermalMap(data) {
		darwValue.value.pointList = []
		darwValue.value.boxWidth = formData.value.canvasWidth * (formData.value.gridSize ? formData.value.gridSize : 5)
		darwValue.value.boxHeight = formData.value.canvasLength * (formData.value.gridSize ? formData.value.gridSize : 5)
		for (let i = 0; i < data.rgb.length; i += formData.value.canvasLength) {
			darwValue.value.pointList.push(data.rgb.slice(i, i + formData.value.canvasLength))
		}

		nextTick(() => {
			// 温度
			createIcon(data.wd)
		})
	}

	// 生成图标
	function createIcon(temp) {
		let data = JSON.parse(formData.value.lqData)
		let lineMultiple = Math.floor(formData.value.canvasLength / (data[data.length - 1].x * 1 + 1)) // 最大行
		let columnMultiple = Math.floor(formData.value.canvasWidth / (data[data.length - 1].y * 1 + 1)) // 最大列
		data.forEach((item) => {
			let img = document.createElement('img')
			img.className = 'sensorIcon'
			img.src = '/public/img/sensor.png'
			let trSum = item.y * columnMultiple
			let thSum = item.x * lineMultiple
			let trNode = document.getElementsByClassName('trNode')[trSum] // x轴
			let thNode = trNode.getElementsByClassName('thNode')[thSum] // y轴
			let point = thNode.getElementsByClassName('point')[0]
			img.addEventListener('click', (e) => {
				console.log(222, item)
				sensorInClick(item, e)
			})
			point.appendChild(img)
		})
		// for (let key in temp) {
		// 	let position = key.split('-')
		// 	let img = document.createElement('img')
		// 	img.className = 'sensorIcon'
		// 	img.src = '/public/img/sensor.png'
		// 	// let trHtml = document.getElementsByClassName('trNode')
		// 	// console.log(position[1] - 1, trHtml.length)
		// 	let trNode = document.getElementsByClassName('trNode')[position[1] - 1] // x轴
		// 	let thNode = trNode.getElementsByClassName('thNode')[position[0] - 1] // y轴
		// 	let point = thNode.getElementsByClassName('point')[0]
		// 	img.addEventListener('click', (e) => {
		// 		sensorInClick(position, temp[key], e)
		// 	})
		// 	point.appendChild(img)
		// }
	}
	// 生成弹框
	// function sensorInClick(position, temp, el) {
	function sensorInClick(position, el) {
		clearPopup()
		var popup = document.createElement('div')
		var span1 = document.createElement('span')
		var span2 = document.createElement('span')
		// span1.textContent = '第' + formData.value.z + '层 ' + position[0] + '行 ' + position[1] + '列'
		// span3.textContent = '温度：' + temp + '℃'
		span1.textContent = '第' + formData.value.z + '层 ' + position.y + '行 ' + position.x + '列'
		span2.textContent = '温度：' + position.temp + '℃'

		popup.className = 'popup'
		popup.appendChild(span1)
		// popup.appendChild(span2)
		popup.appendChild(span3)

		// 因为图层平移了  所以要加上table平移的距离的一半
		popup.style.left = el.layerX + darwValue.value.boxHeight / 2 - 122 + 'px'
		popup.style.top = el.layerY + darwValue.value.boxWidth / 2 - 48 + 'px'
		document.getElementsByClassName('layerTable')[0].appendChild(popup)
		popup.style.display = 'block'
	}
	//  清除弹框
	function clearPopup() {
		var gridTable = document.getElementsByClassName('layerTable')[0]
		var popups = gridTable.getElementsByClassName('popup')
		while (popups.length > 0) {
			popups[0].parentNode.removeChild(popups[0])
		}
	}
</script>

<style scoped lang="less">
	@import url(@/style/RLGI/scatter.less);
</style>
