<template>
	<ciy-header ref="header" title="ciy-movable组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">可拖动的容器</view>
			<view class="content">
				<view class="tip">
					支持单张底图缩放平移，室内地图/示意图。<br />
					在底图上放置可拖动的组件或固定组件。<br />
				</view>
			</view>
		</view>
		<button class="btn" @tap="setmap()">setmap</button>
		<button class="btn" @tap="setbox()">setbox</button>
		<button class="btn" @tap="getbox()">getbox</button>

		<ciy-movable ref="movable" :width="props.width" :height="props.height" :boxmove="props.boxmove" @boxclick="chglog('boxclick', $event)" @change="chglog('change', $event)">
			<template v-slot="{box}">
				<view :style="'background:#ffffff;border:1px solid #cccccc;border-radius: 2em 0;width:'+box.w+'px;height:'+box.h+'px;'">
					{{box}}
				</view>
			</template>
		</ciy-movable>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">width</view>
				<view class="tip">画布容器宽度。</view>
				<view style="margin:0 1em;">
					<ciy-input bb v-model="props.width" style="width:6em;"></ciy-input>
				</view>
				<view class="hr"></view>
				<view class="prp">height</view>
				<view class="tip">画布容器高度。</view>
				<view style="margin:0 1em;">
					<ciy-input bb v-model="props.height" style="width:6em;"></ciy-input>
				</view>
				<view class="hr"></view>
				<view class="prp">boxmove</view>
				<view class="tip">
					组件是否可移动。<br />
					默认 false
				</view>
				<view style="margin:0 1em;">
					<ciy-switch v-model="props.boxmove"></ciy-switch>
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				<view class="fun">setmap</view>
				<view class="tip">
					打开示意图<br />
					src: 图片地址<br />
					x,y: 左上角x,y坐标，默认0<br />
					sacle: 缩放倍率，默认1<br />
				</view>
				<view class="hr"></view>
				<view class="fun">setbox</view>
				<view class="tip">
					设置组件[{},{}]。<br />
					w,h: 宽高<br />
					x,y: 坐标<br />
					z: 如果设置，则拖动在前<br />
				</view>
				<view class="hr"></view>
				<view class="fun">getbox</view>
				<view class="tip">
					获取组件数据。<br />
					返回[]
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@change</view>
				<view class="tip">
					地图变化、组件拖动<br />
					{<br />
					　x,y,sacle，地图新坐标和缩放倍率<br />
					　index，如果移动地图-1，移动组件index<br />
					　boxs，组件数据<br />
					}<br />
				</view>
				<view class="hr"></view>
				<view class="evt">@boxclick</view>
				<view class="tip">
					组件点击<br />
					{<br />
					　index，组件index<br />
					　boxs，{}组件数据<br />
					}<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>
	<ciy-tabbar ref="tabbar"></ciy-tabbar>
</template>

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

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				props: {
					width: '100%',
					height: '80vw',
					boxmove: true,
				}
			}
		},
		onLoad() {},
		methods: {
			async setbox() {
				this.getrefsSync('movable').Setbox([{
					w: 100,
					h: 200,
					x: 20,
					y: 90,
					z: 0
				}, {
					w: 100,
					h: 200,
					x: 300,
					y: 250,
					z: 0
				}]);
			},
			getbox() {
				var box = this.getrefsSync('movable').Getbox();
				console.log(box);
			},
			setmap() {
				var opn = {};
				opn.src = '/img/lmap.jpg';
				opn.x = 300;
				opn.y = 300;
				opn.scale = 0.5;
				this.getrefsSync('movable').Setmap(opn);
			}
		}
	}
</script>