<template>
    <div 
        v-if="isShow"
        class="hanzo-drop-area"
        ref="dropArea"
        :style="divStyle"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        @touchcancel="onTouchEnd"
    >
        <slot></slot>
    </div>
</template>
<script>
import { TouchMixin } from '../../common/mixins/touch';
export default {
    name: 'h-drop-area',
    mixins: [TouchMixin],
    props: {
        right: {
            type: Number,
            default: 18
        },
        bottom: {
            type: Number,
            default: 80
        },
        width: {
            type: Number,
            default: 54
        },
        height: {
            type: Number,
            default: 54
        },
        isShow: {
            type: Boolean,
            default: true
        }

    },
    data() {
        return {
            posiX: 0,
            posiY: 0,
            spaceX:0,
            spaceY:0,
            initProps: {}
        }
    },
    computed: {
        divStyle() {
            return {
                left: `${ this.posiX }px`,
                top: `${ this.posiY }px`,
                width: `${ this.width }px`,
                height: `${ this.height }px`
            }
        }
    },
    mounted() {
        this.$nextTick( () => {
            this.init();
        } );
    },
    methods: {
        init() {
            let initProps = {};
            // initProps.left = this.left;
            // initProps.top = this.top;
            initProps.width = this.width;
            initProps.height = this.height;

            this.initProps = initProps;

            // console.log('高度', document.documentElement.clientHeight);
            // console.log('宽度', document.documentElement.clientWidth);
            this.posiX = document.documentElement.clientWidth - this.right - this.width;
            this.posiY = document.documentElement.clientHeight - this.bottom - this.height;
        },
        onTouchStart(event) {
            if ( !this.isShow ) return;
            const touch = event.touches[0];
            this.spaceX = touch.clientX - this.posiX;
            this.spaceY = touch.clientY - this.posiY;
        },
        onTouchMove(event) {
            if ( !this.isShow ) return;
            event.preventDefault();
            // event.stopPropagation();
            this.limitMove( event );
        },
        onTouchEnd(event) {
            if ( !this.isShow ) return;
            // event.preventDefault();
            // event.stopPropagation();
            this.track = [];
        },
        limitMove( event ) {
            const touch = event.touches[0];
            let left = this.$refs.dropArea.offsetLeft;
            let top = this.$refs.dropArea.offsetTop;
            let ch = document.documentElement.clientHeight;
            let cw =  document.documentElement.clientWidth;
            
            
            if ( cw - ( touch.clientX - this.spaceX ) - this.initProps.width <= 0 ) {
                this.posiX = cw - this.initProps.width;
            } else if ( touch.clientX - this.spaceX <= 0 ) {
                this.posiX = 0;
            } else {
                this.posiX = touch.clientX - this.spaceX;
            }

            if ( ch - ( touch.clientY - this.spaceY ) - this.initProps.height <= 0 ) {
                this.posiY = ch - this.initProps.height;
            } else if ( touch.clientY - this.spaceY <= 0 ) {
                this.posiY = 0;
            } else {
                this.posiY = touch.clientY - this.spaceY;
            }
        },
        handleClick( event ) {
            this.$emit( 'click', event );
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>