<template>
	<div>
		<el-form ref="rulesRef" :model="rulesForm" :rules="rules" label-width="100px">
			<el-row :gutter="10">
				<el-col :xs="24" :span="12">
					<el-card shadow="never">
						<el-form-item label="规则名称" prop="rule_name">
							<el-input v-model="rulesForm.rule_name" placeholder="请输入规则名称" />
						</el-form-item>
						<el-form-item label="规则内容" prop="text">
							<el-input v-model="rulesForm.text" placeholder="请输入规则内容" />
						</el-form-item>
						<el-form-item label="报警速度" prop="speed">
							<el-input placeholder="请输入报警速度" v-model="rulesForm.speed">
								<template #append>海里/小时</template>
							</el-input>
						</el-form-item>
						<el-form-item label="报警间隔" prop="rule_interval">
							<el-input placeholder="请输入报警间隔" v-model="rulesForm.rule_interval">
								<template #append>秒</template>
							</el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-radio-group v-model="rulesForm.statusn">
								<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="规则描述">
							<el-input v-model="rulesForm.rule_describe" type="textarea" placeholder="请输入规则描述" :rows="10"></el-input>
						</el-form-item>
					</el-card>
				</el-col>
				<el-col :xs="24" :span="12">
					<el-form-item label="区域围栏">
						<!-- <el-checkbox v-model="menuExpand"
							@change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
						<el-checkbox v-model="menuNodeAll"
							@change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
						<el-checkbox v-model="form.menuCheckStrictly"
							@change="handleCheckedTreeConnect($event, 'menu')">父子联动
						</el-checkbox> -->
						<ScrollBox style="height:calc(100vh - 300px);">
							<el-tree class="tree-border" :data="regionOptions" show-checkbox ref="regionRef" node-key="id"
								empty-text="加载中，请稍候" :props="{ label: 'label', children: 'children' }"></el-tree>
						</ScrollBox>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup>
	import * as echarts from 'echarts';
	const store = useStore();
	const { proxy } = getCurrentInstance();
	const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
	import { reactive, ref } from '@vue/reactivity';
	import { onMounted, onBeforeUnmount } from 'vue';
	const regionExpand = ref(false);
	const regionNodeAll = ref(false);
	const regionOptions = ref([]);
	const data = reactive({
		rulesForm: {},
		rules: {
			rule_name: [{ required: true, message: "规则名称不能为空", trigger: "blur" }],
			text: [{ required: true, message: "规则内容不能为空", trigger: "blur" }],
			speed: [{ required: true, message: "报警速度不能为空", trigger: "blur" }],
			rule_interval: [{ required: true, message: "报警间隔不能为空", trigger: "blur" }]
		}
	});
	const { rulesForm, rules } = toRefs(data);
	function submitForm(){
		
	}
	function cancel(){
		
	}
	onMounted(() => {

	})
</script>

<style lang='scss' scoped>

</style>