<template>
	<view class="global">
		<view class="header">
			<view id="myMap" class="map" :operation="userForm" :change:operation="bmap.userLoad"></view>
			<button @click="onClick" :operation="operation" :change:operation="bmap.loadOperation">点击</button>
		</view>
	</view>
</template>

<script>
	const {
		Api
	} = require("../../api/index.js");
	export default {
		data() {
			return {
				operation: null,
				points: [],
				renderPoint: false, //点是否已经添加到地图上
				arr: [],
				userForm: {}
			};
		},
		mounted() {
			// 初始化百度地图
			this.userLoad();
		},
		methods: {
			async userLoad() {
				const res = await Api.listUserFleet();
				this.userForm = res.rows[0];
				this.userForm = {
					userForm: this.userForm
				}; // 将 userForm 传递给 operation
			},
			onClick: function(e) {
				this.operation = {
					a: Date.now()
				}; // 每次点击更新 operation 的值
			},
			/**
			 * 接收 renderjs 传过来的数据
			 * @param {Object} data
			 */
			reciveMessage: function(data) {
				console.log(data, 'data接受的值');
			}
		}
	};
</script>

<script module="bmap" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
				infoWindow: null
			};
		},
		mounted() {
			// 初始化百度地图
			this.initBaiDuMap();
		},
		methods: {
			userLoad(newValue) {
				if (newValue && newValue.userForm) {
					this.handleUserForm(newValue.userForm);
				}
			},
			loadOperation(newValue, oldValue, ownerInstance, instance) {
				console.log('newValue', newValue);
				// 数据变更
				if (newValue && newValue.a) {
					// 向uni-app页面组件发送信息
					this.sendMsg();
				}
			},
			sendMsg() {
				// 向页面传参
				this.$ownerInstance.callMethod('reciveMessage', 2);
			},
			// 动态创建Script标签
			createScript(url) {
				return new Promise((resolve, reject) => {
					var script = document.createElement('script');
					script.type = 'text/javascript';
					script.src = url;
					script.onload = () => {
						resolve();
					};
					script.onerror = () => {
						reject();
					};
					document.head.appendChild(script);
				});
			},
			initBaiDuMap() {
				const ak = '5DUDEtoVFyEGUoevl2OlgoYU81DeKGav';
				if (typeof window.BMap == 'function') {
					this.initMap();
				} else {
					window.init = () => this.initMap();
					this.createScript(`http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=init`);
				}
			},
			async initMap() {
				// myMap 要渲染地图的view的id
				this.map = new BMap.Map("myMap");
				let point = new BMap.Point(116.403406, 39.923803);
				this.map.centerAndZoom(point, 15); // 设置中心点
				// var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
				// this.map.addControl(scaleCtrl);
				var zoomCtrl = new BMap.NavigationControl({
					anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
					offset: new BMap.Size(20, 50)
				}); // 添加缩放控件
				this.map.addControl(zoomCtrl);
				var polyline = new BMap.Polyline([
					new BMap.Point(116.399, 39.910),
					new BMap.Point(116.405, 39.920),
					new BMap.Point(116.425, 39.900)
				], {
					strokeColor: "blue",
					strokeWeight: 2,
					strokeOpacity: 0.5
				});
				this.map.addOverlay(polyline);
			},
			handleUserForm(userForm) {
				console.log('UserForm received in renderjs:', userForm);
				// 在这里处理 userForm 数据
			}
		}
	};
</script>

<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 80vh;
	}
</style>