<template>
	<ciy-header ref="header" title="ciy-selmap组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">地图选择器</view>
			<view class="content">
				选择地图上的坐标经纬度，返回WGS84格式。<br/>
			</view>
		</view>
		<form @submit="submitlog">
			<view class="ciy-form">
				<label>v-model绑定</label>
				<view>
					<ciy-selmap v-model:lat="lat" v-model:lng="lng" name="ciy1" @change="chglog('change', $event)"></ciy-selmap>
				</view>
			</view>
			<view class="ciy-form">
				<label>value绑定</label>
				<view>
					<ciy-selmap hasmore :lat="lat" :lng="lng" name="ciy2" @change="chglog('change', $event)"></ciy-selmap>
				</view>
			</view>
			<view class="ciy-form">
				<label>左侧</label>
				<view>
					<ciy-selmap left :lat="lat" :lng="lng" name="ciy3" @change="chglog('change', $event)"></ciy-selmap>
				</view>
			</view>
			<view class="ciy-form">
				<label class="imp">自定义显示</label>
				<view>
					<ciy-selmap v-model:lat="lat" v-model:lng="lng" name="ciy4" @change="chglog('change', $event)">
						<template v-slot:show="{data}">
							{{data.value.lat/data.bet}},{{data.value.lng/data.bet}}
						</template>
					</ciy-selmap>
				</view>
			</view>
			<view class="ciy-form">
				<label>禁用</label>
				<view>
					<ciy-selmap disabled :lat="lat" :lng="lng" name="ciy5" @change="chglog('change', $event)"></ciy-selmap>
				</view>
			</view>

			<view class="txt-center px4 py4">
				<button class="btn" form-type="submit">提交表单</button>
				<button class="btn" @tap="lat=39;lng=116">改变值</button>
			</view>
			<view class="ciy-card formcard" v-if="formdata">
				<view class="content">
					<view v-html="tobr(formdata, true)" class="formdata"></view>
				</view>
			</view>
		</form>

		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="slt">show自定义显示</view>
				<view class="hr"></view>
				<view class="prp">name,lat,lng</view>
				<view class="hr"></view>
				<view class="prp">disabled</view>
				<view class="tip">
					禁止选择。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">initevent</view>
				<view class="tip">
					是否产生初始事件。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">hasmore</view>
				<view class="tip">
					是否form携带更多格式的数据。<br />
					name, addr。<br />
					默认 false
				</view>
				<view class="hr"></view>
				<view class="prp">left</view>
				<view class="tip">
					是否左侧显示。<br />
					默认 false
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change, update:lat, update:lng</view>
				<view class="tip">
					数值变更事件<br />
					from: choose<br/>
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				lat: '',
				lng: '',
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>