<template>
	<div class="ShipFeet flex" style="height: calc(100vh - 84px);">
		<div class="padding-top-xs" style="width: 240px;">
			<el-tree class="impa-tree"
			 :data="regionData"
			 node-key="id"
			 :expand-on-click-node="false">
				<template #default="{ node, data }">
					<span class="impa-tree-node">
						<div class="left">
							<div>
								<span v-if="data.fence_type != undefined" class="margin-right-xs text-bold">
									<svg-icon v-if="data.fence_type == 0" icon-class="round" style="color:var(--el-color-primary);"/>
									<svg-icon v-else icon-class="polygon" style="color:var(--el-color-primary);"/>
								</span>
								<span>{{ data.name }}</span>
							</div>
						</div>
						<div class="action flex align-center">
							<div class="flex align-center" v-if="data.id == 0">
								<el-icon><Plus @click.stop="handleAddRegion(data)" color="var(--el-color-primary)"/></el-icon>
							</div>
							<div class="flex align-center margin-lr-xs" v-if="data.id != 0">
								<el-icon><Edit @click.stop="handleEditRegion(data)" color="var(--el-color-success)"/></el-icon>
							</div>
							<div class="flex align-center" v-if="data.id != 0">
								<el-icon><Delete @click.stop="handleDeleteRegion(data)" color="var(--el-color-danger)"/></el-icon>
							</div>
						</div>
					</span>
				</template>
			</el-tree>
		</div>
		<RegionMap :data="regionForm" :finishSta="finishSta" @gpsPoints="handleFinish" class="flex-sub"/>
		<!-- 添加或修改角色配置对话框 -->
		<div class="Dialog" v-if="classOpen">
			<div class="dialog-header">
				<span class="dialog-title">{{classTitle}}</span>
				<el-icon><Close class="pointer" @click.stop="classCancel"/></el-icon>
			</div>
			<div class="dialog-body">
				<el-form ref="classRef" :model="regionForm" :rules="rules" label-width="100px">
					<el-form-item label="分类名称：" prop="name">
						<el-input v-model="regionForm.name" placeholder="请输入分类名称" @change="changeOperate"/>
					</el-form-item>
					<el-form-item label="区域类型：" v-if="regionForm.id == undefined">
						<el-radio-group v-model="regionForm.fence_type" @change="changeFenceType">
						   <el-radio label="0">圆形</el-radio>
						   <el-radio label="1">多边形</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<div class="dialog-footer">
				<el-button type="primary" @click="onSubimt">确 定</el-button>
				<el-button @click="classCancel">取 消</el-button>
			</div>
		</div>
    </div>
</template>

<script setup name="Role">
import RegionMap from "@/components/Map/RegionManage/map";
const router = useRouter();
const { proxy } = getCurrentInstance();
const loading = ref(true);

const classTitle = ref("");
const classOpen = ref(false);
const finishSta = ref(false);

const data = reactive({
	regionForm: {},
	regionData: [{
		id: 0,
		name: '区域管理',
		type: 0,
		children: [{
			id: 9,
			name: '易站001',
			pid: 0,
			fence_type: "1"
		}, {
			id: 10,
			name: '易站002',
			pid: 0,
			fence_type: "1"
		},{
			id: 5,
			name: '易站001',
			pid: 0,
			fence_type: "0"
		}, {
			id: 6,
			name: '易站002',
			pid: 0,
			fence_type: "1"
		},{
			id: 7,
			name: '易站001',
			pid: 0,
			fence_type: "1"
		}, {
			id: 8,
			name: '易站002',
			pid: 0,
			fence_type: "1"
		}]
	}],
	rules: {
		name: [{ required: true, message: "区域名称不能为空", trigger: "blur" }]
	}
});

const { regionForm, regionData, rules } = toRefs(data);
/** 查询角色列表 */
function getList() {
	
}
function changeOperate(val){
	regionForm.value.name = val;
	regionForm.value.operate = false;
}
function changeFenceType(){
	if(regionForm.value.operate){
		regionForm.value.operate = false;
	}
	finishSta.value = false;
}

/** 重置新增的表单以及其他数据  */
function classReset() {
	regionForm.value = {
		name: "",
		pid: 0,
		fence_type: "0",
		operate: false
	};
	finishSta.value = false;
	proxy.resetForm("classRef");
}
/** 取消按钮 */
function classCancel() {
	classOpen.value = false;
	classReset();
}
function handleAddRegion(row){
	classReset();
	regionForm.value.pid = row.id;
	classOpen.value = true;
	classTitle.value = "新增区域";
}
function handleEditRegion(row){
	classReset();
	classOpen.value = true;
	let _obj = JSON.parse(JSON.stringify(row));
	classTitle.value = "修改区域";
	if(_obj.type == 1){
		if(_obj.fence_type == 1){
			_obj.gpsInfo = {
				"lon":[122.27364514766231, 122.38097317161841, 122.43951573013992, 122.34584763650551, 122.27104325617246, 122.27364514766231],
				"lat":[30.482269795850222, 30.504385873513904, 30.419173927221483, 30.400310213920108, 30.417872981476563, 30.482269795850222],
				"radius": 0,
			};
		}else{
			_obj.gpsInfo = {
				"lon":[121.75587804760742],
				"lat":[30.200393084594726],
				"radius": 2750.8393248556604
			};
		}
	}
	regionForm.value = _obj;
}
function handleFinish(ev){
	proxy.$refs["classRef"].validate((valid) => {
			console.log(valid,ev)
		if (valid) {
			if(ev.lon.length == 0){
				proxy.$modal.msgError("请先绘制报警区域！！！");
				finishSta.value = false;
				return;
			}
			// console.log(ev)
		}
	})
}
function onSubimt(){
	finishSta.value = true;
}
function handleDeleteRegion(key){
	
}
// getList();
</script>
<style lang="scss">
.impa-tree {
  .impa-tree-node {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .action {
      display: none;
      margin-right: 10px;
    }
    > .left {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    &.active {
      background-color: var(--el-tree-node-hover-bg-color);
      font-weight: bold;
      color: var(--van-primary-color);
    }
    &:hover {
      .action {
        display: flex;
      }
    }
  }
}
.Dialog{
	position: absolute;
	width: 320px;
	bottom: 40px;
	left: 40px;
	z-index: 444;
	background: var(--el-bg-color);
	border-radius: 2px;
	box-shadow: var(--el-box-shadow);
	.dialog-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 20px 10px;
		.dialog-title{
			line-height: 24px;
			font-size: 18px;
		}
	}
	.dialog-body{
		padding: 20px;
		font-size: 14px;
		word-break: break-all;
	}
	.dialog-footer{
		padding: 10px 20px 20px;
		text-align: right;
	}
}
</style>