<template>
	<div class="main-page">
		<div class="header">【物体检测】 209684 EasyEdge 0368V2</div>
		<div class="body">
			<div class="view" ref="view">
				<img :src="img" alt="" ref="img">
				<span class="pin-mark" v-for="(style, index) in locationData" :key="index" :style="style"></span>
			</div>
			<div class="information"></div>
		</div>
		<div class="footer">
			<div class="description">
				多模型服务管理、实时视频流预测、本地事件记录等更多本地功能，请下载<em>EasyEdge智能边缘控制台</em>体验
			</div>
			<button type="button">立即下载</button>
		</div>
	</div>
</template>

<script>
import Img from '../assets/img.png'
import originalImgData from './data'

export default {
	name: 'ObjectDetect',
	data() {
		return {
			img: Img,
			locationData: []
		}
	},
	mounted() {
		this.calcLocationData()
	},
	methods: {
		getScalingRatioAndOffset() {
			return new Promise((resolve) => {
				const image = new Image()
				image.onload = () => {
					const imgDom = this.$refs.img
					const renderHeight = imgDom.height
					const renderWidth = imgDom.width
					resolve({
						offset: {
							left: imgDom.offsetLeft
						},
						ratio: {
							height: +(renderHeight / image.height).toFixed(5),
							width: +(renderWidth / image.width).toFixed(5)
						}
					})
				}
				image.src = Img
			})
		},
		async calcLocationData() {
			const { ratio, offset } = await this.getScalingRatioAndOffset()
			console.log(ratio, offset)
			this.locationData = originalImgData.map(({ location }) => {
				console.log(location)
				return {
					height: location.height * ratio.height + 'px',
					width: location.width * ratio.width + 'px',
					top: location.top * ratio.height + 'px',
					left: (offset.left + location.left * ratio.width) + 'px'
				}
			})
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-page {
	width: 1200px;
	margin: auto;
}

.header {
	font-size: 16px;
	font-weight: 500;
	line-height: 2.5;
}

.body {
	margin-bottom: 25px;
	display: flex;
	height: 500px;
}

.view {
	width: 784px;
	background: #e9eef3;
	margin-right: 16px;
	position: relative;
	text-align: center;
}

.view img {
	height: 100%;
	width: auto;
}

.pin-mark {
	position: absolute;
	border: 1px solid #409EFF;
	background: rgb(179, 216, 255);
	opacity: 0.5;
}

.information {
	background: #e9eef3;
	width: 400px;
}

.footer {
	display: flex;
	padding: 20px 35px;
	background: #ecf5ff;
	border: 1px solid #b3d8ff;
}

.description {
	flex: 1;
	font-size: 18px;
	padding-right: 16px;
}

.description em {
	font-style: normal;
	font-size: 22px;
	font-weight: 500;
}

.footer button {
	color: #409eff;
	background: #ecf5ff;
	border: 1px solid #409eff;
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition: .1s;
	font-weight: 500;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	box-shadow: none;
	padding: 12px 20px;
	font-size: 18px;
	width: 120px;
}
</style>
