<template>
	<!--风险提示 uniapp地图版本 -->
	<view class="riskWarnUni">
		<!-- 搜索 -->
		<div class="searchP">
			<uni-easyinput
				class="uni-mt-5"
				suffixIcon="search"
				v-model="searchVal"
				placeholder="请输入搜索关键词"
				@iconClick="searchPosition"
			></uni-easyinput>
		</div>
		<uni-popup ref="popupSearch" type="bottom" :is-mask-click="true">
			<div class="searchCon popup-height">
				<p class="part" v-for="item in searchList" :key="item.id" @click="gotoTask(item)">
					{{ item.address }}
				</p>
			</div>
		</uni-popup>

		<!-- 地图 -->
		<map
			id="mapUni"
			:show-location="true"
			:longitude="longitude"
			:latitude="latitude"
			scale="14"
			:markers="markerList"
			@markertap="markerClick"
		></map>

		<!-- 面板 -->
		<div class="btnCont">
			<p :class="['btn', activeIndex == '1' ? 'active' : '']" @click="checkWeather('1')">
				<img src="/static/images/point.png" alt="point" class="btnImg" />
				气象预警
			</p>
			<p :class="['btn', activeIndex == '2' ? 'active' : '']" @click="setWaterLogging('2')">
				<img src="/static/images/point.png" alt="point" class="btnImg" />
				渍水风险
			</p>
			<p :class="['btn', activeIndex == '3' ? 'active' : '']" @click="setLandWater('3')">
				<img src="/static/images/water.png" alt="point" class="btnImg" />
				路面积水情况
			</p>
		</div>
		<!-- 气象预警弹窗 -->
		<uni-popup ref="popup" type="center" :is-mask-click="false">
			<uni-popup-dialog
				type="success"
				cancelText="关闭"
				confirmText="收到"
				title="气象预警提醒"
				:content="weatherContent"
				@confirm="closePopup"
				@close="closePopup"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 图标点击查看积水视频图片 -->
		<uni-popup ref="popupImg" type="center">
			<view class="popup-content">
				<img
					src="https://server1.wh-nf.cn:9000/newfiber-standard/2024/06/15/Dingtalk_20240615160137_20240615160213A785.jpg"
					alt="1"
					class="imgPopup"
				/>
			</view>
		</uni-popup>
		<!-- 路面积水情况统计 -->
		<div class="landCount" v-if="showCount">
			<p>
				<span class="green"></span>
				正常({{ normal }}处)
			</p>
			<p>
				<span class="yellow"></span>
				中风险({{ earlyWarn }}处)
			</p>
			<p>
				<span class="red"></span>
				高风险({{ warn }}处)
			</p>
		</div>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { onTabItemTap } from '@dcloudio/uni-app';
import { rtuWarnList, moduleGeometryData, getWeatherWarn } from '@/utils/homeApi.js';
import markerG from '/static/images/markerG.png';
import markerY from '/static/images/markerY.png';
import markerR from '/static/images/markerR.png';

const mapContext = ref(null);
const longitude = ref(113.943);
const latitude = ref(30.926);
const searchVal = ref('');
const searchList = ref([]);
const popupSearch = ref(null);
const popup = ref(null);
const popupImg = ref(null);
const weatherContent = ref('');
const showCount = ref(false);
const markerList = ref([]);
const activeIndex = ref('3');
const normal = ref(0);
const earlyWarn = ref(0);
const warn = ref(0);

// 初始化
function initMap() {
	mapContext.value = uni.createMapContext('mapUni');
	// 移动
	mapContext.value.moveToLocation({
		longitude: longitude.value,
		latitude: latitude.value
	});
}
// 位置搜索
function searchPosition() {
	if (!!!searchVal.value) {
		uni.showToast({
			title: '请输入搜索关键字',
			icon: 'error'
		});
		return false;
	}
	uni.showLoading({
		title: '搜索中...',
		mask: true
	});
	uni.request({
		url: 'https://apis.map.qq.com/ws/place/v1/suggestion', //关键词输入提示
		data: {
			key: 'GRBBZ-L5KWQ-LCA5Q-2VNXD-JT3N6-YUFJZ',
			keyword: searchVal.value,
			region: '孝感', //限制城市范围
			page_index: 1,
			page_size: 20
		},
		header: {
			'Content-Type': 'application/json;charset=UTF-8' //自定义请求头信息
		},
		success: (res) => {
			let datas = res.data;
			if (datas.status == 0) {
				searchList.value = datas.data;
				if (searchList.value.length == 0) {
					uni.showToast({
						title: '未搜到相应结果，请重新输入搜索关键字',
						icon: 'error'
					});
					return false;
				} else {
					popupSearch.value.open();
				}
			} else {
				uni.showToast({
					title: datas.message,
					icon: 'error'
				});
			}
			uni.hideLoading();
		}
	});
}
// 点击位置进行跳转
function gotoTask(item) {
	// 移动
	mapContext.value.moveToLocation({
		longitude: item.location.lng,
		latitude: item.location.lat
	});
	popupSearch.value.close();
}
// 渍水点点位设置
function setWaterLogging(val) {
	activeIndex.value = val;
	showCount.value = false;
	markerList.value = [];
	mapContext.value.removeGroundOverlay({ id: 1 }); //清除图层
	// 添加模型积水图层(真机预览才能测试)
	mapContext.value.addGroundOverlay({
		id: 1, //图片图层 id
		src: 'https://server1.wh-nf.cn:9000/newfiber-standard/2024/01/29/step0_20240129112143A406.png',
		bounds: {
			northeast: { longitude: 113.97755595251466, latitude: 30.95586958507055 }, //东北角经纬度
			southwest: { longitude: 113.94202204748537, latitude: 30.901680738004675 } //西南角经纬度
		},
		success: (res) => {
			console.log('success：', res);
		},
		fail: (err) => {
			console.log('失败：', err);
		}
	});
}
// 路面积水情况
function setLandWater(val) {
	activeIndex.value = val;
	showCount.value = true;
	markerList.value = [];
	mapContext.value.removeGroundOverlay({ id: 1 }); //清除图层
	rtuWarnList().then((res) => {
		let datas = res.data;
		normal.value = datas.normal;
		earlyWarn.value = datas.earlyWarn;
		warn.value = datas.warn;
		if (res.code == 200 && datas.siteList.length > 0) {
			datas.siteList.map((item, index) => {
				if (!!!item.lonLat) return false;
				markerList.value.push({
					id: index,
					longitude: item.lonLat.split(',')[0],
					latitude: item.lonLat.split(',')[1],
					width: 30,
					height: 30,
					iconPath: item.warnLevel == 'normal' ? markerG : item.warnLevel == 'earlyWarn' ? markerY : markerR,
					callout: {
						content: item.stName,
						borderRadius: 8,
						bgColor: '#fff',
						padding: 6,
						display: 'ALWAYS'
					}
				});
			});
			longitude.value = markerList.value[0].longitude;
			latitude.value = markerList.value[0].latitude;
			initMap();
		} else {
			uni.showToast({
				icon: 'none',
				title: '暂无路面积水报警'
			});
		}
	});
}
// 积水点点击
function markerClick(e) {
	console.log('marker点击事件--', e);
	popupImg.value.open();
}
// 查看气象预警
function checkWeather(val) {
	activeIndex.value = val;
	showCount.value = false;
	getWeatherWarn().then((res) => {
		if (!!res.data.desc) {
			weatherContent.value = res.data.desc;
			popup.value.open();
		} else {
			uni.showToast({
				icon: 'none',
				title: '暂无气象预警'
			});
		}
	});
}
function closePopup() {
	popup.value.close();
}

// 切换tab加载
onTabItemTap((e) => {
	initMap(); //初始化地图
	setLandWater('3');
});
</script>

<style lang="scss">
@import '/scss/riskWarn.scss';
</style>