<template>
	<div>
		<div class="flex-sub padding-lr" style="overflow-y: auto">
			<div class="solid-bottom padding-tb margin-bottom text-bold">基本配置</div>
			<el-form ref="blockRef" :model="form" :rules="rules" label-width="120px">
				<div v-loading="loading">
					<el-form-item label="检测周期" prop="cameraTimeCycle">
						<el-input v-model="form.cameraTimeCycle" placeholder="请输入检测周期"/>
					</el-form-item>
					<el-form-item label="检测间隔" prop="cameraTime">
						<el-input v-model="form.cameraTime" placeholder="请输入检测间隔"/>
					</el-form-item>
					<el-form-item label="算法阈值" prop="alarmThreshold">
						<el-input v-model="form.alarmThreshold" placeholder="请输入算法阈值"/>
					</el-form-item>
					<el-form-item label="启用状态" prop="cameraEnable">
					    <el-switch
					      v-model="form.cameraEnable"
					    />
					</el-form-item>
				</div>
				<div v-loading="loading">
					<el-form-item label="配置摄像机">
						<el-checkbox-group
							v-model="form.data"
							class="grid col-4"
							style="width: 100%">
							<div class="padding-xs" v-for="(item, i) in cameraList" :key="i">
								<el-card :body-style="{ padding: '0px' }" shadow="hover">
									<img
										:src="cameraPict[item.camera_id]"
										style="height: 130px; width: 100%"
										@click.stop="seeImg(item.camera_id)"
									/>
									<div class="padding-sm">
										<div class="flex justify-between">
											<el-checkbox :label="item.camera_id" name="type">{{item.camera_name}}</el-checkbox>
										</div>
									</div>
								</el-card>
							</div>
						</el-checkbox-group>
					</el-form-item>
				</div>
				<el-form-item>
					<el-button type="primary" @click="submitForm">保存配置</el-button>
					<el-button type="danger">删除配置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import { setBlockSet, getBlockSet } from "@/api/settConfiguration"
	import { listCamera,getCameraPhoto } from "@/api/camera";
	const { proxy } = getCurrentInstance();
	const loading = ref(false);
	const cameraList = ref([]);
	const cameraPict = ref([]);
	const data = reactive({
		form: {
			cameraTimeCycle: 0,
			cameraTime: 0,
			alarmThreshold: 0,
			cameraEnable: true,
			data: []
		},
		rules: {
			cameraTimeCycle: [{
				required: true,
				message: "检测周期",
				trigger: "blur",
			}],
			cameraTime: [{
				required: true,
				message: "检测间隔",
				trigger: "blur",
			}],
			alarmThreshold: [{
				required: true,
				message: "算法阈值",
				trigger: "blur",
			}]
		}
	})
	const { form, rules } = toRefs(data);
	
	const submitForm = () => {
		proxy.$refs["blockRef"].validate((valid) => {
			if (valid) {
				loading.value = true;
				setBlockSet(form.value).then((response) => {
					proxy.$modal.msgSuccess("修改成功");
					loading.value = false;
					getBlockInfo();
				});
			}
		});
	};
	
	const getCamList = function() {
		listCamera({}).then((response) => {
			cameraList.value = response.data;
			getPhoto();
		});
	}
	const getPhoto = function(key){
		if(cameraList.value.length){
			let _obj = cameraList.value, imgPict = {}, rtspStr = "";
			_obj.forEach((item,idnex) => {
				let _thor = 0;
				if(item.camera_brand == 20){
					_thor = item.camera_rtsp.split("channel=")[1].split("&")[0];
				}else if(item.camera_brand == 10){
					_thor = item.camera_rtsp.split("h264/ch")[1].split("/")[0];
				}else if(item.camera_brand == 30){
					_thor = item.camera_rtsp.split("LiveMedia/ch")[1].split("/")[0];
				}
				rtspStr += item.camera_rtsp + ",";
				imgPict[item.camera_id] = baseUrl+"alarm_folder/display_image/"+(item.camera_ip+"_"+_thor)+"_small.jpg";
			});
			cameraPict.value= imgPict;
			cycleCamera(rtspStr, imgPict);
		}
	}
	const cycleCamera = function(key, xju){
		getCameraPhoto(key.slice(0, -1)).then((response)=>{
			setTimeout(()=>{
				cameraPict.value = {};
				cameraPict.value = xju;
			},3000)
		})
	}
	const getBlockInfo = function(){
		getBlockSet().then((response) => {
			console.log(response)
			// getGpsSet.value = response.data[1];
		})
	}
	getBlockInfo()
	getCamList();
</script>

<style>
</style>