<template>
	<movable-area
		class="k-movable-area"
		:scale-area="scale"
	>
		<movable-view
			v-if="showView"
			class="k-movable-view"
			direction="all"
			inertia
			:disabled="disabled"
			:scale="scale"
			:x="mX"
			:y="mY"
			@touchend="touchend"
			@change="mChange"
		>
			<!-- 默认插槽, 直接在组件内部自定义内容,无需具名使用 -->
			<slot></slot>
		</movable-view>
	</movable-area>
</template>

<script>
	
	/**
	 * movable 区域可移动组件
	 * @description 区域内可移动组件，可做悬浮按钮等 #必须指定组件宽高
	 * @property {Boolean} scale 是否支持双指缩放 （默认：false）
	 * @property {[String, Number]} position 初始化位置 left-center：左中, left-bottom：左下， right-center：右中， right-bottom：右下
	 * @property {[String, Number]} marginR 可拖动视图停止后距离左右两边的间距（默认：10）
	 * @property {[String, Number]} marginB 初始化时视图距离上下两边的间距（默认：10）
	 * @property {type} disabled 是否禁用滑动（默认：false）
	 *
	 **/
	export default {
		name:"k-movable",
		props: {
			// 是否支持双指缩放
			scale: Boolean, 
			// 初始化位置 left-center：左中， left-bottom：左下， right-center：右中， right-bottom：右下
			position: { 
				type: String,
				default: 'left-center'
			},
			// 可拖动视图停止后距离左右两边的间距（默认：10）
			marginR: { 
				type: [String, Number],
				default: 10
			},
			 // 初始化时视图距离上下两边的间距（默认：10）
			marginB: {
				type: [String, Number],
				default: 10
			},
			// 是否禁用滑动
			disabled: Boolean, 
		},
		data() {
			return {
				mX: 300, // x轴偏移量
				mY: 400, // y轴偏移量
				showView: false ,// 是否显示view ， 用作组件初始化时位置移动变化隐藏（会出现没移动到指定位置的问题）
				positionObj: {
					'left-center': [0, 0.5],
					'left-bottom': [0, 1],
					'right-center': [1, 0.5],
					'right-bottom': [1, 1],
				}
			};
		},
		mounted() {
			this.init() // 初始化组件
		},
		methods: {
			mChange(e) {
				// console.log("===>",e.detail)
				this.mX = e.detail.x
				this.mY = e.detail.y
			},
			init() { // 初始化组件
				let area = this.getElement('.k-movable-area')
				this.mX = area.width * this.positionObj[this.position][0] - +this.marginR
				this.mY = area.height * this.positionObj[this.position][1] - +this.marginB
				setTimeout(() => {
					this.showView = true
					setTimeout(() => {
						let view = this.getElement('.k-movable-view')
						this.mX = area.width * this.positionObj[this.position][0] - view.width - +this.marginR
						this.mY = area.height * this.positionObj[this.position][1] - view.width - +this.marginB
					}, 100)
				}, 300)
			},
			touchend() {
				let area = this.getElement('.k-movable-area')
				let view = this.getElement('.k-movable-view')
				if(view.left - area.left < (area.width / 2) - (view.width / 2)){
					this.mX = +this.marginR
					this.mY = view.top
				} else {
					this.mX = area.width - view.width - +this.marginR
					this.mY = view.top
				}
			},
			getElement(e) {
				let result = null
				uni.createSelectorQuery().in(this).select(e).boundingClientRect(data => {
					result = data
				}).exec()
				return result;
			}
		}
	}
</script>

<style scoped lang="scss">
	.k-movable-area {
		height: 100%;
		width: 100%;
		pointer-events: none;
		.k-movable-view {
			pointer-events: auto;
			height: unset;
			width: unset;
			z-index: 9999999;
			animation: opacity 1s 1;
		}
		@keyframes opacity {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
	}

</style>