<template>
	<view class="page">
		<u-navbar title="停车区列表" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<custom-map :areaInfo="areaInfo" @on-polygon-complete="handlePolygonComplete"></custom-map>
	</view>
</template>

<script>
import CustomMap from './components/CustomMap.vue'
export default {
	components: {
		CustomMap
	},
	data() {
		return {
			bgc: {
				backgroundColor: "#fff",
			},
			areaId: '',
			areaInfo: {}
		}
	},
	onLoad(e) {
		if (e.areaId) {
			this.areaId = e.areaId
			this.getArea()
		}
	},
	methods: {
		getArea() {
			this.$u.get(`/app/area/` + this.areaId).then((res) => {
				if (res.code == 200) {
					this.areaInfo = res.data
				} else {
					uni.showToast({
						title: res.msg || '获取区域信息失败',
						icon: 'none'
					})
				}
			}).catch(error => {
				uni.showToast({
					title: '获取区域信息失败',
					icon: 'none'
				})
			});
		},

		handlePolygonComplete(data) {
			// 构造边界字符串
			const boundaryStr = data.points.map(point =>
				`[${point.longitude},${point.latitude}]`
			).join(',')

			// 构造请求数据
			const params = {
				...this.areaInfo,
				boundaryStr:   `[${boundaryStr}]` // 直接使用 boundaryStr
			}
			// 发送保存请求
			this.$u.put('/appVerify/areaEdit', params).then(res => {
				if (res.code === 200) {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res.msg || '保存失败',
						icon: 'none'
					})
				}
			}).catch(() => {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				})
			})
		}
	}
}
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
}

.page {
	width: 100%;
	height: 100%;
}
 </style>