<template>
  <div class="ShipFeet flex"
  	:style="$store.state.app.device == 'desktop'? 'height: calc(100vh - 84px);' : 'height: var(--mobile-hight-with-navbar)'">
  	<div class="padding-top-xs" style="width: var(--page-sidebar-width)"
  		v-if="$store.state.app.device == 'desktop'">
		  <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.type == 1" 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.group_name }}</span>
					</div>
				  </div>
				  <div class="action flex align-center">
					  <div class="flex align-center">
					    <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>
	<!-- 添加或修改角色配置对话框 -->
	<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="type">
					<el-radio-group v-model="regionForm.type" @change="changeType">
					   <el-radio :disabled="regionForm.id != undefined" label="0">分类</el-radio>
					   <el-radio :disabled="regionForm.id != undefined" label="1">区域</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="所属分类：" prop="pid">
					<el-tree-select v-model="regionForm.pid" :data="regionData" @change="changeOperate"
					   :props="{ value: 'id', label: 'group_name', children: 'children' }" value-key="id"
					   placeholder="选择所属分类" check-strictly />
				</el-form-item>
				<el-form-item label="分类名称：" prop="group_name">
					<el-input v-model="regionForm.group_name" placeholder="请输入分类名称" @input="changeOperate"/>
				</el-form-item>
				<el-form-item label="区域类型：" prop="fence_type" v-if="regionForm.type == 1&&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>
</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,
		group_name: '区域管理',
		type: 0,
		children: [{
			id: 1,
			group_name: '广州易站',
			type: "0",
			pid: 0,
			children: [{
				id: 9,
				group_name: '易站001',
				type: "1",
				pid: 1,
				fence_type: "1"
			  }, {
				id: 10,
				group_name: '易站002',
				type: "1",
				pid: 1,
				fence_type: "1"
			  }]
		  }, {
			id: 2,
			group_name: '武汉易站',
			type: "0",
			pid: 0,
			children: [{
			  id: 5,
			  group_name: '易站001',
			  type: "1",
			  pid: 2,
			  fence_type: "0"
			}, {
			  id: 6,
			  group_name: '易站002',
			  type: "1",
			  pid: 2,
			  fence_type: "1"
			}]
		  }, {
			id: 3,
			group_name: '广西易站',
			type: "0",
			pid: 0,
			children: [{
			  id: 7,
			  group_name: '易站001',
			  type: "1",
			  pid: 3,
			  fence_type: "1"
			}, {
			  id: 8,
			  group_name: '易站002',
			  type: "1",
			  pid: 3,
			  fence_type: "1"
			}]
		}]
	}],
	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 { regionForm, regionData, rules } = toRefs(data);
/** 查询角色列表 */
function getList() {
	
}
function changeOperate(){
	if(!regionForm.value.operate){
		regionForm.value.operate = true;
	}
}
function changeType(key){
	regionForm.value.fence_type = (key == 0?null:"0");
	regionForm.value.type = key;
	if(regionForm.value.operate){
		regionForm.value.operate = false;
	}
	finishSta.value = false;
	classTitle.value = (key == 0?"新增分类":"新增区域");
}
function changeFenceType(){
	if(regionForm.value.operate){
		regionForm.value.operate = false;
	}
	finishSta.value = false;
}

/** 重置新增的表单以及其他数据  */
function classReset() {
	regionForm.value = {
		group_name: "",
		pid: 0,
		type: "0",
		fence_type: null,
		add_userid: 1,
		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 = (row.type == 0?"新增分类":"新增区域");
}
function handleEditRegion(row){
	classReset();
	classOpen.value = true;
	let _obj = JSON.parse(JSON.stringify(row));
	classTitle.value = (row.type == 0?"修改分类":"修改区域");
	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){
	if(regionForm.value.group_name == ""){
		proxy.$modal.msgError("请先填写分类名称！！！");
		return;
	}
	if(ev.lon.length == 0&&regionForm.value.type == 1){
		proxy.$modal.msgError("请先绘制报警区域！！！");
		finishSta.value = false;
		return;
	}
	// console.log(ev)
}
function onSubimt(){
	finishSta.value = true;
}
function handleDeleteRegion(key){
	proxy.$modal.confirm('是否确认删除該條数据项?')
	.then(function () {
		// return delRole(ruleIds);
	}).then(() => {
		proxy.$modal.msgSuccess("删除成功");
	}).catch(() => {});
}
// 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>