<template>
	<view class="index-page">
		<map style="height: 100vh; width: 100vw;" id="myMap" :markers="markers" show-location show-compass
			@updated="handleMapLoad"></map>
		<view class="rec-swiper">
			<recruitment></recruitment>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				companyData: [{
						label: '薪资',
						value: '20',
						unit: '',
						exLabel: '元/小时'
					},
					{
						label: '年龄',
						value: '20-42',
						unit: '',
						exLabel: '元/小时'
					},
					{
						label: '吃饭',
						value: '2',
						unit: '餐',
						exLabel: '白-夜'
					},
					{
						label: '住宿',
						value: '20',
						unit: '',
						exLabel: '人间'
					},
				],
				markers: [{
						id: 1,
						latitude: 39.90923,
						longitude: 116.397428,
						title: '模拟点位1',
						iconPath: '/static/position-icon.png',
						width: 30,
						height: 30,
						label: {
							content: '模拟点位1',
							textAlign: 'center',
							fontSize: 18,
						}
					},
					{
						id: 2,
						latitude: 39.8,
						longitude: 116.3,
						title: '模拟点位1',
						iconPath: '/static/position-icon.png',
						width: 30,
						height: 30,
						label: {
							content: '模拟点位1',
							textAlign: 'center',
							fontSize: 18,
						}
					},
				]
			}
		},
		onLoad() {
			// 页面加载时的初始化逻辑
		},
		methods: {
			handleMapLoad() {
				console.log('地图加载完成');
				// 获取地图上下文
				const mapContext = uni.createMapContext('myMap');
				// 设置地图中心点到第一个标记点
				mapContext.includePoints({
					points: this.markers.map(marker => ({
						latitude: marker.latitude,
						longitude: marker.longitude
					})),
					padding: [50, 50, 200, 50] // 边距设置
				});
			}
		}
	}
</script>

<style lang="scss">
	.index-page {
		height: 100vh;
		overflow: hidden;
		position: relative;

		.rec-swiper {
			width: calc(100% - 16px);
			// height: 200px;
			// background-color: red; 
			background-color: #FFF;
			margin: 0 8px;
			position: absolute;
			left: 0px;
			bottom: 8px;
			border-radius: 16px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}
	}
</style>