<template>
  	<div class="drag-icon">
		<div  
			class="float-btn bgc-17b3ec"
			:class="{'is-img': $slots.img}" 
			ref="move_div" 
			@touchstart="down" 
			@touchmove="move" 
			@touchend="end"
			:style="{top: top  + 'px', left: left  + 'px', bottom: bottom, right: right}" 
			>
			<slot></slot>
			<slot v-if="$slots.img" name="img"></slot>
			<span v-else>{{text}}</span>
		</div>
	</div>
</template>

<script>
export default {
	name: "DragIcon",
	components: {
	  
	},
	props:{
		text: String,
		style: String,
		bottom: String,
		right: String
	},
  	data() {
		return {
			flags: false,
			position: {x: 0, y: 0, left: 0, top: 0},
			top: undefined,
			left: undefined,
			isModed: false,
			width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
			height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
		}
  	},
  	computed:{
		 
  	},
  	mounted() {
		console.log(this)
  	},
  	methods: {
        down (event) { // 拖动开始的操作
            this.flags = true
            const refs = this.$refs.move_div.getBoundingClientRect()
            let touch = event
            if (event.touches) {
                touch = event.touches[0]
            }
            this.position.x = touch.clientX
            this.position.y = touch.clientY
            this.position.left = refs.left
            this.position.top = refs.top
        },
        move (event) { // 拖动中的操作
            if (this.flags) {
				this.isModed = true
                let touch = event
                if (event.touches) {
                	touch = event.touches[0]
                }
                const xPum = this.position.left + touch.clientX - this.position.x
                const yPum = this.position.top + touch.clientY - this.position.y
                this.left = xPum
                this.top = yPum
                this.banOut()
                // 阻止页面的滑动默认事件
                document.addEventListener('touchmove', function () {
                	event.preventDefault()
                }, {passive: false})
            }
        },
		end () { // 拖动结束的操作
			this.flags = false
			if(this.isModed){
				this.isModed = false
            	this.banOut()
			} else {
				this.$emit('touchEnd')
			}
        },
        banOut () { // 避免拖动出界的限制
            const refs = this.$refs.move_div.getBoundingClientRect()
            if (this.left < 0) {
                this.left = 0
            } else if (this.left > this.width - refs.width) {
                this.left = this.width - refs.width
            }
            if (this.top < 0) {
                this.top = 0
            } else if (this.top > this.height - refs.height) {
                this.top = this.height - refs.height
            }
		},
  	}
}
</script>
<style lang="scss" scoped>
.drag-icon{
	.float-btn{
		&.is-img{
			padding: 0 ;
		}
        position: fixed;
        z-index: 4;
        width: 45px;
        height: 45px;
        font-size: 14px;
        line-height: 30px;
        color: #ffffff;
        bottom: 20px;
        right: 20px;
        border-radius: 50%;
        text-align: center;
		line-height: 20px;
		
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		padding: 0 5px;
    }
}
</style>
