<template>
	<div class="camera-view">
		<div><span class="el-icon-arrow-left cursor-class" @click="refreshViewClick()"><i class="font-fourteen">返回</i></span></div>
		<p><i class="font-eighteen">卡口页面</i></p>
		<el-row :gutter="20">
			<el-col :span="16">
				<div class="big-pic-div">
					<el-image style="width: 70%" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
				</div>
				<!-- <p><i class="font-eighteen">统计数据</i></p>
				<div class="statistics">
					<div class="statistic">
						<span><i class="font-twenty-eight">26544</i></span><span><i class="font-fourteen">累计抓拍数</i></span>
					</div>
					<div class="statistic"><span><i class="font-twenty-eight">26544</i></span><span><i class="font-fourteen">今日抓拍数</i></span></div>
					<div class="statistic"><span><i class="font-twenty-eight">26544</i></span><span><i class="font-fourteen">累计报警数</i></span></div>
					<div class="statistic"><span><i class="font-twenty-eight">26544</i></span><span><i class="font-fourteen">今日报警数</i></span></div>
				</div> -->
			</el-col>
			<el-col :span="8">
				<div class="view-form-div">
					<el-form :model="formModel" label-width="auto">
						<el-form-item label="设备名称:">
							{{formModel.cameraName}}
						</el-form-item>
						<el-form-item label="设备区域:">
							{{formModel.cameraRegionFirstlevel}}
						</el-form-item>
						<el-form-item label="详细地址:">
							{{formModel.cameraAddress}}
						</el-form-item>
						<el-form-item label="经纬度:">
							({{formModel.cameratLongitude}},{{formModel.cameraLatitude}})
						</el-form-item>
						<el-form-item label="位置类型:">
							{{formModel.cameratLocationtypeId}}
						</el-form-item>
						<el-form-item label="公安机关代码:">
							{{formModel.publicSecurityCode}}
						</el-form-item>
						<el-form-item label="公安机关名称:">
							{{formModel.publicSecurityName}}
						</el-form-item>
						<el-form-item label="建设单位:">
							{{formModel.constructionUnit}}
						</el-form-item>
						<el-form-item label="管理单位:">
							{{formModel.managementUnit}}
						</el-form-item>
						<el-form-item label="管理人员:">
							{{formModel.managementPersonnel}}
						</el-form-item>
						<el-form-item label="联系电话:">
							{{formModel.contactNumber}}
						</el-form-item>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formModel: {}
			}
		},
		methods: {
			init(param) {

				this.$http.get(`/camera/findById/${param.idFaceCamera}`).then(res => {
					if (res.data.code === 0) {
						this.formModel = res.data.data
					} else {
						console.log(res)
					}
				})
			},
			refreshViewClick() {
				this.$emit("refreshViewClick")
			}
		}
	}
</script>

<style scoped>
	i {
		font-style: normal;
		font-family: "Noto Sans SC";
		color: #333
	}

	.font-fourteen {
		font-size: 14px;
		font-weight: 400;
	}

	.font-eighteen {
		font-size: 18px;
		font-weight: bold;
	}

	.font-sexteen {
		font-size: 16px;
		font-weight: bold;
	}

	.font-twenty-eight {
		font-size: 28px;
		font-weight: bold;
	}

	.cursor-class {
		cursor: pointer;
	}

	.big-pic-div {
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: #000000;
	}

	.statistics {
		display: flex;
		justify-content: space-between;
		border-radius: 2px;
	}

	.statistic {
		background-color: #FFF;
		width: 25%;
		padding: 5% 0;
		border: 1px solid lightgrey;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.view-form-div {
		background-color: #FFF;
		padding: 20px;
	}

	.view-form-div>>>.el-form-item {
		margin-bottom: 10px;
	}
</style>
