<template>
	<!-- 全部海绵项目详情 -->
	<view class="projectAllPage">
		<!-- 项目地图位置 -->
		<map
			id="mapProjectAll"
			:show-location="true"
			:longitude="longitude"
			:latitude="latitude"
			scale="14"
			:markers="markerList"
			@markertap="markerClick"
		></map>

		<!-- 项目搜索 -->
		<div class="projectSearch">
			<uni-easyinput
				class="uni-mt-5"
				suffixIcon="search"
				v-model="projectName"
				placeholder="请输入项目名称"
				@iconClick="searchProject"
			></uni-easyinput>
			<div class="imgType">
				<img
					:src="item.imgUrl"
					alt=""
					:class="['imgs', projectTypeId == item.id ? 'active' : '']"
					v-for="item in projectTypes"
					:key="item.id"
					@click="changeType(item)"
				/>
			</div>
		</div>

		<!-- 项目详情弹窗 -->
		<uni-popup ref="popupDetail" type="bottom" :mask-click="true">
			<div class="projectCon">
				<div class="flex names">
					<p class="title ellipsis">{{ projectObj.projectName }}</p>
					<img class="stars" src="/static/images/star.png" alt="未收藏" @click="collect()" v-if="ifStar == 0" />
					<img class="stars" src="/static/images/star-act.png" alt="收藏" @click="collect()" v-if="ifStar == 1" />
				</div>
				<div class="detailCon">
					{{ projectObj.projectOverview }}
				</div>
				<div class="projectImg flex" v-if="projectObj.sysFileList.length > 0">
					<img :src="item.url" alt="" class="imgs" v-for="item in projectObj.sysFileList" :key="item.id" @click="checkLarge(item.url)" />
				</div>
				<div class="projectImg flex flex-center" v-if="projectObj.sysFileList.length == 0">
					<img src="/static/images/noData.jpg" alt="" class="imgs" />
				</div>
				<button class="buttonSay" type="primary" @click="gotoSay()">我想说</button>
			</div>
		</uni-popup>

		<!-- 我想说 提交框 -->
		<uni-popup ref="popup" type="bottom" :mask-click="true" class="projectForms">
			<uni-forms :modelValue="formData" :rules="rules" ref="valiForm">
				<uni-forms-item label="留言标题" required label-width="100%" name="title">
					<uni-easyinput type="text" autoHeight v-model="formData.title" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="具体描述" required label-width="100%" name="desc">
					<uni-easyinput type="textarea" autoHeight v-model="formData.desc" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="现场图片(最多3张)" required label-width="100%" name="coverPhotosFileList">
					<UploadImage
						ref="imagesUp"
						:saveFileArr="formData.coverPhotosFileList"
						:limit="3"
						:refField="'commentPhotos'"
						:refType="'public_project_miniuser_comment'"
					/>
				</uni-forms-item>
				<button type="primary" @click="submitData">提交留言</button>
			</uni-forms>
		</uni-popup>

		<!-- 查看最大图片 -->
		<uni-popup ref="popupImg" type="center" :mask-click="true">
			<img :src="largeImg" alt="查看大图" style="width: 99vw" />
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow, onShareAppMessage } from '@dcloudio/uni-app';
import { projectInfoCollect, projectInfoRemove, projectCommentAdd, projectInfoAll } from '@/utils/homeApi.js';
import UploadImage from '@/pages/components/imageUpload.vue'; //公共上传图片
import buildIcon from '/static/images/buildIcon.png';
import gisIcon from '/static/images/gisIcon.png';
import gwbzIcon from '/static/images/gwbzIcon.png';
import gwpcIcon from '/static/images/gwpcIcon.png';
import landIcon from '/static/images/landIcon.png';
import parkIcon from '/static/images/parkIcon.png';
import waterIcon from '/static/images/waterIcon.png';

const projectList = ref([]);
const projectName = ref('');
const projectTypeId = ref('');
const mapContext = ref(null);
const longitude = ref(113.943);
const latitude = ref(30.926);
const markerList = ref([]);
const ifStar = ref('0');
const projectObj = ref({ sysFileList: [] });
const popup = ref(null);
const popupDetail = ref(null);
const popupImg = ref(null);
const largeImg = ref('');
const valiForm = ref(null);
const imagesUp = ref(null);
const projectTypes = ref([
	{ name: 'GIS平台', id: '1701129308194377729', iconUrl: gisIcon, imgUrl: '/static/images/gisType.png' },
	{ name: '管网排查', id: '1701129031496142849', iconUrl: gwpcIcon, imgUrl: '/static/images/gwpcType.png' },
	{ name: '道路广场', id: '1701128777853997058', iconUrl: landIcon, imgUrl: '/static/images/landType.png' },
	{ name: '公园绿地', id: '1701128863459741697', iconUrl: parkIcon, imgUrl: '/static/images/parkType.png' },
	{ name: '建筑社区', id: '1701128641279070210', iconUrl: buildIcon, imgUrl: '/static/images/buildType.png' },
	{ name: '水系统', id: '1701128943340261378', iconUrl: waterIcon, imgUrl: '/static/images/waterType.png' },
	{ name: '管网泵站', id: '1701129103495565313', iconUrl: gwbzIcon, imgUrl: '/static/images/gwbzType.png' }
]);

const formData = ref({
	coverPhotosFileList: [],
	desc: '',
	title: null,
	projectId: null,
	wechatMiniuserId: uni.getStorageSync('userIdXGWXMN')
});
const rules = ref({
	title: {
		rules: [{ required: true, errorMessage: '标题不能为空' }]
	},
	desc: {
		rules: [{ required: true, errorMessage: '描述不能为空' }]
	},
	coverPhotosFileList: {
		rules: [{ required: true, type: 'array', errorMessage: '请上传图片' }]
	}
});

// 初始化
function initMap() {
	mapContext.value = uni.createMapContext('mapProjectAll');
	// 移动
	mapContext.value.moveToLocation({
		longitude: longitude.value,
		latitude: latitude.value
	});
}

// 获取项目数据列表
function getDataList() {
	let params = {
		pageNum: 1,
		pageSize: 999,
		projectName: projectName.value, //项目名称
		projectTypeId: projectTypeId.value, //项目类型id
		wechatMiniuserId: uni.getStorageSync('userIdXGWXMN')
	};
	projectInfoAll(params).then((res) => {
		projectList.value = res.data || [];
		setProject(); // 项目位置设置
	});
}
// 搜索项目
function searchProject() {
	projectTypeId.value = ''; //搜索全部
	getDataList(); // 获取项目数据列表
	// 设置中心点
	if (projectList.value.length > 0) {
		longitude.value = projectList.value[0].projectLocation.split(',')[0];
		latitude.value = projectList.value[0].projectLocation.split(',')[1];
	}
}
// 项目类型切换
function changeType(item) {
	projectTypeId.value = item.id;
	console.log(projectTypeId.value);
	setProject(); // 项目位置设置
}

// 项目位置设置
function setProject() {
	markerList.value = [];
	let markerArr = [];
	let projectArr = JSON.parse(JSON.stringify(projectList.value));
	if (projectTypeId.value == '') {
		markerArr = projectArr;
	} else {
		markerArr = projectArr.filter((item) => item.projectTypeId == projectTypeId.value);
	}
	markerArr &&
		markerArr.map((item, index) => {
			// 加载对应图标
			let iconPath = projectTypes.value.filter((val) => val.id == item.projectTypeId)[0].iconUrl;
			markerList.value.push({
				id: index,
				projectNo: item.projectNo,
				longitude: item.projectLocation.split(',')[0],
				latitude: item.projectLocation.split(',')[1],
				width: 24,
				height: 33,
				iconPath: iconPath,
				callout: {
					content: item.projectName,
					borderRadius: 8,
					bgColor: '#fff',
					padding: 6,
					display: 'ALWAYS'
				}
			});
		});
	initMap();
}
// 地图项目点击
function markerClick(item) {
	let projectNo = markerList.value[item.markerId].projectNo;
	projectObj.value = projectList.value.filter((val) => val.projectNo == projectNo)[0];
	projectObj.value.sysFileList = projectObj.value.sysFileList || [];
	popupDetail.value.open();
}

// 项目收藏
function collect() {
	let params = {
		projectId: projectObj.value.id, //项目id
		wechatMiniuserId: uni.getStorageSync('userIdXGWXMN')
	};
	if (ifStar.value == 0) {
		projectInfoCollect(params).then((res) => {
			ifStar.value = '1';
		});
	} else {
		projectInfoRemove(params).then((res) => {
			ifStar.value = '0';
		});
	}
}
// 查看大图
async function checkLarge(url) {
	largeImg.value = url;
	popupImg.value.open();
}

// 我想说点击
function gotoSay() {
	popup.value.open();
	formData.value.coverPhotosFileList = [];
	formData.value.desc = null;
	formData.value.title = null;
	formData.value.projectId = projectObj.value.id; //项目id
}
// 提交意见
function submitData() {
	valiForm.value
		.validate()
		.then((res) => {
			projectCommentAdd(formData.value).then((res) => {
				uni.showToast({
					icon: 'none',
					title: '提交成功'
				});
				popup.value.close();
				imagesUp.value.clearImages(); //图片清空
			});
		})
		.catch((err) => {
			console.log('err', err);
		});
}

onShow(() => {
	searchProject(); // 默认搜索
});
</script>

<style lang="scss">
.projectAllPage {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	#mapProjectAll {
		width: 100%;
		height: 100%;
	}

	.projectSearch {
		position: absolute;
		width: 90%;
		left: 3%;
		background: #fff;
		border-radius: 20rpx;
		padding: 15rpx;
		top: 10rpx;
		z-index: 99;
		.imgType {
			display: flex;
			justify-content: space-around;
			margin-top: 10rpx;
			.imgs {
				cursor: pointer;
				width: 80rpx;
				height: 114rpx;
				padding-bottom: 5rpx;
			}
			.active {
				border-bottom: 5rpx solid red;
			}
		}
	}
	.projectCon {
		height: 600rpx;
		padding: 20rpx;
		overflow: auto;
		background: #fff;
		.buttonSay {
			position: fixed;
			right: 30rpx;
			bottom: 30rpx;
			z-index: 99;
		}
		.names {
			justify-content: space-between;
			background: #fff;
			padding: 20rpx;
			border-radius: 8rpx;
			.title {
				font-size: 30rpx;
			}
			.stars {
				width: 30rpx;
				height: 30rpx;
			}
		}
		.detailCon {
			background: #fff;
			padding: 20rpx;
			margin: 5rpx auto;
			border-radius: 8rpx;
			color: #7b7b7e;
			font-size: 24rpx;
			line-height: 36rpx;
			overflow: auto;
		}
		.projectImg {
			flex-wrap: wrap;
			.imgs {
				width: 32%;
				height: 250rpx;
				margin-bottom: 20rpx;
				margin-left: 5rpx;
			}
		}
	}
}
</style>