<template>
	<view>
		<input type="hidden" v-if="name=='loc'" name="lng" :value="tvalue.lng" style="display:none;" />
		<input type="hidden" v-else :name="name+'_lng'" :value="tvalue.lng" style="display:none;" />
		<input type="hidden" v-if="name=='loc'" name="lat" :value="tvalue.lat" style="display:none;" />
		<input type="hidden" v-else :name="name+'_lat'" :value="tvalue.lat" style="display:none;" />
		<template v-if="hasmore">
			<input type="hidden" :name="name+'_name'" :value="loc.name" style="display:none;" />
			<input type="hidden" :name="name+'_addr'" :value="loc.addr" style="display:none;" />
			<input type="hidden" :name="name+'_latlng'" :value="tvalue.lat+','+tvalue.lng" style="display:none;" />
		</template>
		<view style="display:flex;align-items: center;">
			<template v-if="left">
				<view class="_btn" :class="{_disabled:disabled}" @tap="map_select">
					<view class="_icon _mapicon"></view>
				</view>
				<slot name="show" :data="{value:tvalue, loc:loc, bet:innerbet}">
					<view style="line-height:1.5em;font-size:0.9em;flex: 1; margin-left:0.5em;text-align:left;">
						<view v-if="loc.name || loc.addr">{{loc.name}}<br />{{loc.addr}}</view>
						<view v-else-if="tvalue.lat == 0" style="padding-top:0.3em;display:inline-block;">{{lang('selmap.select')}}</view>
						<view v-else style="padding-top:0.3em;display:inline-block;">{{lang('selmap.loced')}}</view>
					</view>
				</slot>
			</template>
			<template v-else>
				<slot name="show" :data="{value:tvalue, loc:loc, bet:innerbet}">
					<view style="line-height:1.5em;font-size:0.9em;flex: 1; margin-right:0.5em;">
						<view v-if="loc.name || loc.addr">{{loc.name}}<br />{{loc.addr}}</view>
						<view v-else-if="tvalue.lat == 0" style="padding-top:0.3em;display:inline-block;">{{lang('selmap.select')}}</view>
						<view v-else style="padding-top:0.3em;display:inline-block;">{{lang('selmap.loced')}}</view>
					</view>
				</slot>
				<view class="_btn" :class="{_disabled:disabled}" @tap="map_select">
					<view class="_icon _mapicon"></view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import gcoord from '@/util/gcoord.js'
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['update:lng', 'update:lat', 'change'],
		props: {
			name: {
				type: String,
				default: 'loc'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			hasmore: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			bet: {
				type: [String, Number],
				default: 10000000
			},
			lat: {
				type: [String, Number],
				default: ''
			},
			lng: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				loc: {},
				vlat: null,
				vlng: null
			};
		},
		watch: {
			lat: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.vlat = null;
				},
				immediate: true
			},
			lng: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.vlng = null;
				},
				immediate: true
			}
		},
		computed: {
			tvalue() {
				var ret = {};
				if (this.vlat !== null) {
					ret.lat = this.vlat;
				} else {
					ret.lat = this.tofloat(this.lat);
				}
				if (this.vlng !== null) {
					ret.lng = this.vlng;
				} else {
					ret.lng = this.tofloat(this.lng);
				}
				return ret;
			},
			innerbet() {
				var bet = this.bet;
				if (bet <= 1)
					return 1;
				return this.toint(bet);
			}
		},
		mounted() {},
		methods: {
			async map_select(e) {
				if (this.disabled)
					return;
				var result;
				if (this.toint(this.lat) == 0) {
					result = this.getstorage('_map');
					if (!result || result.length != 2) {
						result = [1164000000, 398000000];
					} else {
						result[0] += 50000 * Math.random();
						result[1] += 50000 * Math.random();
					}
				} else {
					result = gcoord.transform([this.lng / this.innerbet, this.lat / this.innerbet], gcoord.WGS84, gcoord.GCJ02);
					result[0] = this.caldectoint(result[0]);
					result[1] = this.caldectoint(result[1]);
				}
				try {
					var retchoose = await uni.chooseLocation({
						longitude: result[0] / this.innerbet,
						latitude: result[1] / this.innerbet
					});
				} catch (res) {
					if (res.errMsg.indexOf('cancel') > -1)
						return;
					this.alert(res.errMsg);
					return;
				}
				if (!retchoose.longitude)
					return this.alert(this.lang('selmap.noselect'));
				var result = gcoord.transform([retchoose.longitude, retchoose.latitude], gcoord.GCJ02, gcoord.WGS84);
				result[0] = this.caldectoint(result[0]);
				result[1] = this.caldectoint(result[1]);
				this.setstorage('_map', result);
				this.loc.name = retchoose.name;
				this.loc.addr = retchoose.address;
				this.loc.distance = retchoose.distance;
				this.$emit('update:lng', result[0]);
				this.$emit('update:lat', result[1]);
				this.vlat = result[1];
				this.vlng = result[0];
				this.$emit('change', {
					name: this.name,
					from: 'choose',
					value: {
						...this.loc
					},
					lng: result[0],
					lat: result[1]
				});

				//gcj02
				// gcoord.WGS84	[lng,lat]	WGS-84坐标系，GPS设备获取的经纬度坐标
				// gcoord.GCJ02	[lng,lat]	GCJ-02坐标系，google中国地图、soso地图、aliyun地图、mapabc地图和高德地图所用的经纬度坐标
				// gcoord.BD09	[lng,lat]	BD-09坐标系，百度地图采用的经纬度坐标
				// gcoord.BD09LL	[lng,lat]	同BD09
				// gcoord.BD09MC	[x,y]	BD-09米制坐标，百度地图采用的米制坐标，单位：米
				// gcoord.BD09Meter	[x,y]	同BD09MC
				// gcoord.Baidu	[lng,lat]	百度坐标系，BD-09坐标系别名，同BD-09
				// gcoord.BMap	[lng,lat]	百度地图，BD-09坐标系别名，同BD-09
				// gcoord.AMap	[lng,lat]	高德地图，同GCJ-02
				// gcoord.WebMercator	[x,y]	Web Mercator投影，墨卡托投影，同EPSG3857，单位：米
				// gcoord.WGS1984	[lng,lat]	WGS-84坐标系别名，同WGS-84
				// gcoord.EPSG4326	[lng,lat]	WGS-84坐标系别名，同WGS-84
				// gcoord.EPSG3857	[x,y]	Web Mercator投影，同WebMercator，单位：米
				// gcoord.EPSG900913	[x,y]	Web Mercator投影，同WebMercator，单位：米
			},
			caldectoint(dec) {
				if (this.innerbet <= 1)
					return dec;
				return this.toint(dec * this.innerbet);
			}
		}
	}
</script>

<style scoped>
	._btn {
		padding: 0.2em;
		width: 2em;
		height: 2em;
		border: 1px solid #cccccc;
		display: inline-block;
		border-radius: 0.3em;
		background: #ffffff;
	}

	._btn._disabled {
		background: #ebebeb;
		filter: grayscale(0.8);
	}

	._icon {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-size: cover;
	}

	._icon._mapicon {
		background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTUxMiA1MTJtLTUxMiAwYTUxMiA1MTIgMCAxIDAgMTAyNCAwIDUxMiA1MTIgMCAxIDAtMTAyNCAwWicgZmlsbD0nIzFFOUZGRic+PC9wYXRoPjxwYXRoIGQ9J002NjguNTQxIDM0NS43MTRjMC05MS41NzktODAuOTIxLTE2My45OS0xNzAuMzc3LTE2My45OS04OS40NSAwLTE2OC4yNDMgNzIuNDA5LTE2OC4yNDMgMTYzLjk4OSAwIDgzLjA1MyAxNjguMjQzIDI4My4yNTggMTY4LjI0MyAyODMuMjU4czE3MC4zNzctMTk1Ljk0MyAxNzAuMzc3LTI4My4yNTd6IG0tMjMyLjEzNSA4LjUyMmMwLTM2LjIxIDI5LjgxLTY2LjAyMiA2My44ODUtNjMuODk3IDM0LjA4OSAwIDYzLjg5OSAyNy42ODcgNjMuODk5IDYzLjg5NyAwLjAwMSAzNC4wNzUtMjcuNjkyIDYzLjg4NS02My44OTkgNjMuODg1LTM0LjA3NSAwLjAwMS02My44ODUtMjcuNjc5LTYzLjg4NS02My44ODV6JyBmaWxsPScjRkZGRkZGJz48L3BhdGg+PHBhdGggZD0nTTUzNi40NjUgNzU4Ljc2bC0yLjA4Ni02LjI2N2MyLjYwMi0wLjk3NyA1LjIwNC0xLjk1NSA3LjgyOC0yLjk1MyAzMi4zMDUtNDcuMjM5IDEwMC4xNDYtNzkuNzc2IDE3OC42MjMtNzkuNzc2IDIuOTM4IDAgNS44NTkgMC4wNTYgOC43NjcgMC4xNDZsLTEuNDIxLTQuNzMyYzIxLjMwMS02LjM5NiA0NC43My04LjUxNiA2Ni4wMjktMTAuNjU1aC0wLjAwMXYyMS4zMTFjLTMuNTA3IDAuMzg4LTcuMDE1IDAuNzc3LTEwLjUzNiAxLjE5MSAxMS44NTUgMi44MjMgMjMuMjEgNi40MjggMzMuOTU0IDEwLjcyMlY1MDEuMTg4YzAtMjMuNDI5LTE5LjE2NS00Mi41OTktNDQuNzE1LTQyLjU5OUg2NjQuMjk0Yy02MS43NjYgMTA4LjYxNi0xNjguMjUyIDIzMi4xNDctMTY4LjI1MiAyMzIuMTQ3UzM5My44MDkgNTY3LjIwNCAzMzQuMTc0IDQ1OC41OWgtODcuMzE4Yy0yMy40MyAwLTQ0LjcxNiAxOS4xNjctNDQuNzE2IDQyLjU5OXYyOTguMTY2YzAgMjMuNDE4IDIxLjI4NiA0Mi41ODYgNDQuNzE2IDQyLjU4NmgyNzkuNjljLTIuOTEtOS42ODEtNC40NTYtMTkuNzIzLTQuNDU2LTMwLjAyMyAwLTE4Ljc5NyA1LjExMS0zNi43MzYgMTQuMzc1LTUzLjE1OHogbS0yNDkuMTQyLTMzLjk0N2MtMTkuMTY3LTguNTI1LTM2LjIwNy0yMS4zMDEtNTUuMzcyLTM0LjA3NWwxMi43NzQtMTcuMDVjMTcuMDM3IDEyLjc4NiAzNi4yMDUgMjMuNDI5IDUzLjI0IDM0LjA3NmwtMTAuNjQyIDE3LjA0OXogbTk3Ljk3MiA0NC43MThjLTE5LjE2Ny04LjUxNi0zOC4zMzQtMTQuOTA3LTU5LjYzNS0yMy40MzRsOC41MTQtMTkuMTY5YzE5LjE2NiA4LjUyNiAzOC4zMzcgMTcuMDU0IDU3LjUwMyAyMS4zMTNsLTYuMzgyIDIxLjI5eiBtNzIuNDExIDEyLjc4NGMtOC41MjQgMC0xNy4wMzctMi4xMzQtMjcuNjkzLTQuMjYzbDQuMjY0LTIxLjI5OGM4LjUyMSAyLjEzIDE5LjE2NyAyLjEzIDI3LjY4MSA0LjI2MSAxMC42NTYgMi4xMzMgMjEuMjk4IDAgMzEuOTU3IDBsMi4xMjkgMjEuM2ExMTYuMzQ1IDExNi4zNDUgMCAwIDEtMzguMzM4IDB6JyBmaWxsPScjRkZGRkZGJz48L3BhdGg+PHBhdGggZD0nTTc3Mi45MDcgODQxLjkzOWMyMy40MTggMCA0NC43MTUtMTkuMTY2IDQ0LjcxNS00Mi41ODdWNjg3Ljc0NGMtMTAuNzQ0LTQuMjk0LTIyLjA5OS03Ljg5Ny0zMy45NTQtMTAuNzIyLTE1LjcxOSAxLjg1My0zMS42OTkgNC4yMjktNDkuMDk5IDkuNDVsLTQuOTc0LTE2LjU2M2EyNzkuOTgxIDI3OS45ODEgMCAwIDAtOC43NjctMC4xNDZjLTc4LjQ3NyAwLTE0Ni4zMTggMzIuNTM3LTE3OC42MjMgNzkuNzc2IDE0LjU2MS01LjU0MSAyOS44MTgtMTEuNzczIDQ5LjY2MS0yMi42MDlsOC41MjUgMTkuMTY5Yy0yMy40MyAxMC42NTctNDIuNTk4IDE5LjE2OS01OS42MzUgMjUuNTZsLTQuMjk1LTEyLjg5OGMtOS4yNjQgMTYuNDIyLTE0LjM3NSAzNC4zNjEtMTQuMzc1IDUzLjE1NiAwIDEwLjMwMiAxLjU0NiAyMC4zNDQgNC40NTYgMzAuMDIzaDI0Ni4zNjV6IG0tODMuMDY0LTE2My45ODZsOC41MjUgMTkuMTY0Yy0xOS4xNjkgOC41MjUtMzYuMjA3IDE3LjA1MS01OS42MzcgMjcuNjk0bC04LjUyMS0xOS4xNjhjMjMuNDMtMTAuNjQyIDQwLjQ2NS0xOS4xNjUgNTkuNjMzLTI3LjY5eicgZmlsbD0nI0ZGRkZGRicgb3BhY2l0eT0nLjQnPjwvcGF0aD48L3N2Zz4=");
	}
</style>