<template>
	<el-dialog title="请设置住宿范围" append-to-body :close-on-click-modal="false" v-model="visible" width="90%">
		<div>
			<el-form :model="form" :rules="rules" ref="formRef" class="demo-ruleForm">
				<el-form-item label="住宿半径(米)" prop="raidus">
					<el-input-number v-model="form.raidus" :min="0" style="width: 100%"></el-input-number>
				</el-form-item>
			</el-form>
			<div id="container"></div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="dataFormSubmit">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick } from 'vue';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { loadTiandituMap } from '/@/api/recruit/recruitstudentsignup';
import { editDormrange } from '/@/api/admin/dict';
import { getDicts } from '/@/api/admin/dict';
import { TIANDITU_TOKEN } from '/@/config/map';

// 消息提示 hooks
const message = useMessage();
const messageBox = useMessageBox();

// 表单引用
const formRef = ref();

// 响应式数据
const tk = TIANDITU_TOKEN; // 天地图的token（在 src/config/map.ts 中配置）
const visible = ref(false);
const canSubmit = ref(false);
const circleShow = ref(false);
const circle = ref<any>(null);
const map = ref<any>(null);

// 地址信息
const center = reactive({ lng: 0, lat: 0 });
const dictId = ref('');

const form = reactive({
	raidus: 0,
});

const rules = {
	raidus: [{ required: true, message: '住宿半径不能为空', trigger: ['blur', 'change'] }],
};

// 监听半径变化
watch(
	() => form.raidus,
	(newVal) => {
		if (newVal !== 0 && newVal !== undefined && circle.value && map.value) {
			// 移除旧圆形
			map.value.removeOverLay(circle.value);
			// 创建新圆形（确保数据类型正确）
			// @ts-ignore
			const newCircle = new window.T.Circle(
				// @ts-ignore
				new window.T.LngLat(
					// @ts-ignore
					parseFloat(center.lng),
					// @ts-ignore
					parseFloat(center.lat)
				),
				// @ts-ignore
				parseFloat(newVal), // 确保半径是数字类型
				{
					color: '#FF0000', // 边框颜色：鲜红色
					weight: 4, // 边框粗细：4像素
					opacity: 0.9, // 边框不透明度：90%
					fillColor: '#FF4444', // 填充颜色：亮红色
					fillOpacity: 0.12, // 填充透明度：12%
				}
			);
			map.value.addOverLay(newCircle);
			circle.value = newCircle;

			// 让新圆形也不拦截鼠标事件
			setTimeout(() => {
				const circleElements = document.querySelectorAll('.tdt-circle, [class*="circle"]');
				circleElements.forEach((el: any) => {
					el.style.pointerEvents = 'none';
				});
			}, 100);
		}
	}
);

// 初始化
const init = () => {
	visible.value = true;
	canSubmit.value = true;
	circleShow.value = true;
	nextTick(() => {
		getDicts('recruit_dorm_jw')
			.then((data: any) => {
				const arr = data.data;
				arr.forEach((e: any) => {
					if (e.label == 'bj') {
						form.raidus = e.value;
						dictId.value = e.id;
					} else if (e.label == 'lng') {
						center.lng = e.value;
					} else if (e.label == 'lat') {
						center.lat = e.value;
					}
				});

				// 等待对话框渲染完成后再加载地图
				setTimeout(() => {
					// 调试信息：打印配置数据
					// eslint-disable-next-line no-console
					console.log('地图配置:', { lng: center.lng, lat: center.lat, radius: form.raidus, token: tk });

					loadTiandituMap(tk)
						.then((T: any) => {
							// eslint-disable-next-line no-console
							console.log('天地图API加载成功', T);

							// 清除之前的地图实例（如果存在）
							if (map.value) {
								map.value.clearOverLays();
							}

							// 创建地图实例
							map.value = new T.Map('container');
							// 创建点坐标（确保经纬度是数字类型）
							// @ts-ignore
							const point = new T.LngLat(
								// @ts-ignore
								parseFloat(center.lng),
								// @ts-ignore
								parseFloat(center.lat)
							);

							// 根据半径自动计算合适的缩放级别
							// @ts-ignore
							const radius = parseFloat(form.raidus);
							let zoomLevel = 12; // 默认缩放级别

							// 根据半径动态调整缩放级别
							if (radius <= 1000) {
								zoomLevel = 15; // 1公里以内 - 非常近
							} else if (radius <= 3000) {
								zoomLevel = 14; // 3公里以内 - 近距离
							} else if (radius <= 5000) {
								zoomLevel = 13; // 5公里以内 - 中等距离
							} else if (radius <= 10000) {
								zoomLevel = 12; // 10公里以内 - 较远
							} else if (radius <= 20000) {
								zoomLevel = 11; // 20公里以内 - 远距离
							} else {
								zoomLevel = 10; // 20公里以上 - 超远距离
							}

							// 初始化地图，设置中心点坐标和地图级别
							map.value.centerAndZoom(point, zoomLevel);

							// eslint-disable-next-line no-console
							console.log('地图缩放级别:', zoomLevel, '(半径:', radius, '米)');

							// 添加地图类型切换控件（让用户可以切换卫星图/普通图）
							const ctrl = new T.Control.MapType();
							map.value.addControl(ctrl);

							// 默认使用矢量地图（普通地图），用户可通过右上角控件切换到卫星图

							// 绘制圆形覆盖物（使用前面已计算好的 radius 变量）
							// eslint-disable-next-line no-console
							console.log('绘制圆形:', { center: point, radius: radius, radiusType: typeof radius });

							circle.value = new T.Circle(point, radius, {
								color: '#FF0000', // 边框颜色：鲜红色，更醒目
								weight: 4, // 边框粗细：4像素，更明显
								opacity: 0.9, // 边框不透明度：90%，清晰可见
								fillColor: '#FF4444', // 填充颜色：亮红色
								fillOpacity: 0.12, // 填充透明度：12%，轻盈不遮挡地图
							});
							map.value.addOverLay(circle.value);

							// 让圆形不拦截鼠标事件，使地图可以在圆圈内拖拽
							// 通过 CSS 设置 pointer-events 为 none
							setTimeout(() => {
								const circleElements = document.querySelectorAll('.tdt-circle, [class*="circle"]');
								circleElements.forEach((el: any) => {
									el.style.pointerEvents = 'none';
								});
							}, 100);

							// 添加中心点标记（更明显地标识中心位置）
							const marker = new T.Marker(point);
							map.value.addOverLay(marker);

							// eslint-disable-next-line no-console
							console.log('地图初始化完成 - 圆形已添加');
						})
						.catch((error: any) => {
							// eslint-disable-next-line no-console
							console.error('天地图加载失败:', error);
							message.error('地图加载失败，请检查网络连接或Token配置');
						});
				}, 200);
			})
			.catch(() => {
				message.error('获取地图配置失败');
			});
	});
};

// 表单提交
const dataFormSubmit = async () => {
	try {
		await messageBox.confirm('是否确认保存住宿半径');
		formRef.value?.validate((valid: boolean) => {
			if (valid) {
				canSubmit.value = false;
				editDormrange({ id: dictId.value, value: form.raidus })
					.then(() => {
						message.success('修改成功');
						visible.value = false;
						canSubmit.value = true;
					})
					.catch(() => {
						canSubmit.value = true;
					});
			}
		});
	} catch {
		// 用户取消
	}
};

// 暴露方法给父组件
defineExpose({
	init,
});
</script>

<style scoped>
#container {
	overflow: hidden;
	width: 100%;
	height: 700px;
	margin: 0;
	font-family: '微软雅黑';
	margin-top: 15px;
}

ul li {
	list-style: none;
}

.dialog-footer {
	text-align: right;
}
</style>

<style>
/* 让地图上的圆形覆盖物不拦截鼠标事件，使地图可以拖拽 */
#container svg path[fill*='#FF'],
#container svg path[stroke*='#FF'],
#container svg circle,
#container canvas {
	pointer-events: none !important;
}

/* 但保持标记点可点击 */
#container .tdt-marker,
#container img {
	pointer-events: auto !important;
}
</style>
