<template>
	<!-- 海绵项目详情 -->
	<view class="projectDetail">
		<!-- 项目地图位置 -->
		<map id="mapProject" :show-location="true" :longitude="longitude" :latitude="latitude" scale="14" :markers="markerList"></map>
		<!-- 项目详情 -->
		<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" />
			</div>
		</div>
		<button class="buttonSay" type="primary" @click="gotoSay()">我想说</button>
		<!-- 我想说 提交框 -->
		<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>
	</view>
</template>

<script setup name="projectHM">
import { ref } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import markerG from '/static/images/markerG.png';
import { projectInfoCollect, projectInfoRemove, projectCommentAdd } from '@/utils/homeApi.js';
import UploadImage from '@/pages/components/imageUpload.vue'; //公共上传图片

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 valiForm = ref(null);
const imagesUp = ref(null);
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('mapProject');
	// 移动
	mapContext.value.moveToLocation({
		longitude: longitude.value,
		latitude: latitude.value
	});
}
// 项目位置设置
function setProject() {
	markerList.value = [
		{
			id: 10,
			latitude: latitude.value,
			longitude: longitude.value,
			width: 30,
			height: 30,
			iconPath: markerG,
			callout: {
				content: projectObj.value.projectName,
				borderRadius: 8,
				bgColor: '#fff',
				padding: 6,
				display: 'ALWAYS'
			}
		}
	];
	initMap();
}

// 项目收藏
function collect() {
	let params = {
		projectId: projectObj.value.id,
		wechatMiniuserId: uni.getStorageSync('userIdXGWXMN')
	};
	if (ifStar.value == 0) {
		projectInfoCollect(params).then((res) => {
			ifStar.value = '1';
		});
	} else {
		projectInfoRemove(params).then((res) => {
			ifStar.value = '0';
		});
	}
}

// 我想说点击
function gotoSay() {
	popup.value.open();
	formData.value.coverPhotosFileList = [];
	formData.value.desc = null;
	formData.value.title = null;
}
// 提交意见
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);
		});
}

// 接收参数
onLoad((option) => {
	projectObj.value = JSON.parse(localStorage.getItem('xgProjectObj'));
	formData.value.projectId = projectObj.value.id;
	// 经纬度转换
	let lonlat = projectObj.value.projectLocation.split(',');
	longitude.value = lonlat[0];
	latitude.value = lonlat[1];
	ifStar.value = projectObj.value.collectStatus;
	setProject();
});
// 转发给朋友
onShareAppMessage((res) => {
	return {
		title: '转发给朋友',
		path: '/pages/projectHM/detail'
	};
});
</script>

<style lang="scss">
.projectDetail {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	#mapProject {
		width: 100%;
		height: 500rpx;
	}
	.buttonSay {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 99;
	}
	.projectCon {
		height: calc(100vh - 600rpx);
		padding: 20rpx;
		position: relative;
		overflow: auto;
		.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: 15rpx auto;
			border-radius: 8rpx;
			color: #7b7b7e;
			font-size: 24rpx;
			height: calc(100vh - 950rpx);
			overflow: auto;
		}
		.projectImg {
			flex-wrap: wrap;
			.imgs {
				width: 100%;
				height: 250rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>