<template>
	<view>
		<u-form-item :label="label" :required="required">
			<u-button
				type="primary"
				size="mini"
				text="定位"
				class="custom_btn"
				:custom-style="{
					width: '100rpx',
					margin: 0,
					position: 'absolute',
					right: 0,
					top: 0,
				}"
				@click="fnLocation"
			/>
		</u-form-item>
		<u-line />
		<u-form-item label="经度" :prop="longitudeProp" :required="required">
			<u-input v-model="longitude" border="none" readonly input-align="right" />
		</u-form-item>
		<u-line />
		<u-form-item label="纬度" :prop="latitudeProp" :required="required">
			<u-input v-model="latitude" border="none" readonly input-align="right" />
		</u-form-item>
		<u-line />
	</view>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			default: "位置",
		},
		longitudeProp: {
			type: String,
			default: "",
		},
		latitudeProp: {
			type: String,
			default: "",
		},
		required: {
			type: Boolean,
			default: true,
		},
		longitude: {
			type: String,
			required: true,
		},
		latitude: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			selfLongitude: "",
			selfLatitude: "",
		};
	},

	mounted() {
		this.$on("acceptLocationData", this.handleAcceptLocationData);
	},
	beforeDestroy() {
		this.$off("acceptLocationData", this.handleAcceptLocationData);
	},

	methods: {
		fnLocation() {
			uni.navigateTo({
				url: "/pages/map/index",
			});
		},
		handleAcceptLocationData(event) {
			this.longitude = event.longitue.toString();
			this.latitude = event.latitude.toString();
		},
	},
};
</script>

<style scoped lang="scss">
.custom_btn {
	transform: translate(-10px, -11px)
}
</style>
