<template>
	<view data-component-name="diy-map" class="diy-map" :style="style">
		<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item, index) in value.list">
			<map id="map" style="width: 100%; height:600rpx" scale="12" :markers="markerst" bindupdated="bindupdated"
				:longitude="item.lng" :latitude="item.lat" show-location>
				<cover-view
					style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;"
					@click="handlerClick(item)" @tap="handlerClick(item)">
					<cover-view style="font-size:24rpx">一键导航</cover-view>
				</cover-view>
			</map>
		</view>

	</view>
</template>

<script>
// 地图
import DiyMinx from './minx.js'
export default {
	name: 'diy-map',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			loading: true,
			markers: []
		};
	},
	created() {
	},
	mixins: [DiyMinx],
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) {
			// this.getDataList();
		}
	},
	computed: {
		markerst() {
			return [{
				id: 1,
				latitude: this.value.list[0].lat,
				longitude: this.value.list[0].lng
			}]
		},
		style() {
			var css = '';
			css += 'background-color:' + this.value.contentBgColor + ';';
			if (this.value.elementAngle == 'round') {
				css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
				css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
			}
			return css;
		}
	},
	methods: {
		tomap(item) {
			uni.openLocation({
				latitude: parseFloat(item.lat),
				longitude: parseFloat(item.lng),
				name: "一键导航",
			})
		},
		async handlerClick(item) {
			await this.__$emitEvent({
				eventName: 'map-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					this.tomap(item);
				}
			})
		}
	}
};
</script>

<style lang="scss"></style>