<template>
  <el-dialog
    title="绘制监控区域"
    v-model="open"
    width="1000px"
    top="5vh"
    append-to-body
    @close="handleClose"
  >
    <div class="flex justify-center">
      <transition name="el-fade-in-linear">
        <canvasDraw v-if="open" 
			ref="canvasDrawRef" 
			style="height: 540px; width: 960px"
			@finish="handleDrawFinish"
			:points="hasDrawLi"
			:single="true" 
			:limit="100" 
			:background="camsId.img"/>
			<!-- :background="baseUrl+'/alarm_folder/html_images/asd.png'"/> -->
      </transition>
    </div>
        <!-- :limit="4" -->
    <template #footer>
      <div class="dialog-footer">
        <el-button plain @click="revoke">撤 销</el-button>
        <el-button plain @click="resetForm">重 置</el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const emit = defineEmits();
import canvasDraw from "./index";
import { addAlarmArea, getAlarmArea, updateAlarmArea } from "@/api/algorithmConfiguration";
const { proxy } = getCurrentInstance();

const open = ref(false);
const background = ref("");
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const drawLi = ref([]);
const hasDrawLi = ref([]);
const data = reactive({
  form: {
	  "alarm_area_coordinate": [],
	  "algorithm_configuration_id": 0,
	  "camera_id": 0
  }
});

const { form } = toRefs(data);
const props = defineProps({
  // 高度
  camsId: {
    type: Object,
    default: {'camre':0,'line':0,'num':0,'img':""},
  }
});

const { camsId } = toRefs(props);
watch(
  camsId,
  (newValue) => {
    camsId.value = newValue;
	getArea();
  },
  { deep: true }
);
// 显示弹框
function show() {
  open.value = true;
  drawLi.value = [];
}

// 撤销操作
function revoke() {
  proxy.$refs["canvasDrawRef"].revoke();
}

// 重置操作
function resetForm() {
  proxy.$refs["canvasDrawRef"].reset();
}

// 关闭操作
function handleClose() {
  // proxy.$refs["canvasDrawRef"].reset();
  open.value = false;
}

// 绘制完成
function handleDrawFinish(e) {
	drawLi.value = [];
	let _obj = [];
	e.forEach(item=>{
		// _obj.push(item.x,item.y)
		_obj.push(parseFloat(item.x)*2,parseFloat(item.y)*2)
	});
	drawLi.value = _obj;
}

// 取消按钮
function cancel() {
  // proxy.$refs["canvasDrawRef"].reset();
  open.value = false;
}

function submitForm() {
	if(!drawLi.value.length){
		proxy.$modal.msgError("请先绘制完成区域！");
		return;
	};
	form.value.alarm_area_coordinate = drawLi.value.toString();
	if(form.value.alarm_area_id != undefined){
		updateAlarmArea({
			alarm_area_id: form.value.alarm_area_id,
			alarm_area_coordinate: form.value.alarm_area_coordinate
		}).then((response) => {
			proxy.$modal.msgSuccess("绘制成功");
			handleClose();
		});
	}else{
		form.value.algorithm_configuration_id = camsId.value.line;
		form.value.camera_id = camsId.value.camre;
		addAlarmArea(form.value).then((response) => {
			proxy.$modal.msgSuccess("绘制成功");
			handleClose();
		});
	}
}

function getArea(){
	let _obj = {
		"algorithm_configuration_id": camsId.value.line,
		"camera_id": camsId.value.camre
	};
	form.value =  {
		  "alarm_area_coordinate": [],
		  "algorithm_configuration_id": 0,
		  "camera_id": 0
	};
	getAlarmArea(_obj).then((response) => {
		if(response.data.length){
		// let response = {
		// 	"code": 200, 
		// 	"data":[{
		// 		"alarm_area_coordinate":"1034,72,944,876,336,864,412,70",
		// 		"alarm_area_id":116,
		// 		"algorithm_configuration_id":108,
		// 		"camera_id":100,
		// 		"create_by":"null",
		// 		"create_time":"null",
		// 		"del_flag":"0",
		// 		"remark":"null",
		// 		"status":"0",
		// 		"update_by":"null",
		// 		"update_time":"null"
		// 	}]
		// 	}
			let _acv = response.data[0].alarm_area_coordinate;
			let _arr = _acv.split(",");
			let _newArr = [];
			for(var i=0;i<_arr.length;i+=2){
				// _newArr.push({layerX: _arr[i],layerY: _arr[i+1]});
			    _newArr.push({layerX: parseFloat(_arr[i])/2,layerY: parseFloat(_arr[i+1])/2});
			}
			hasDrawLi.value = _newArr;
			form.value = response.data[0];
		}else{
			hasDrawLi.value = [];
		}
	});
}
defineExpose({
  show,
});
</script>

<style>
</style>