<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <div :class="bem('status')"></div>
        <div
            :class="bem('ball')"
            :style="{ transform: `translate(${cssPx(dx)},${cssPx(dy)})` }"
        ></div>
        <div :class="bem('status')">
            <div>dx:{{ dx }}</div>
            <div>dy:{{ dy }}</div>
            <div>isDragging:{{ isDragging }}</div>
            <div>isMoving:{{ isMoving }}</div>
        </div>
    </div>
</template>

<script>
import drag from '../../utils/drag.js';

export default {
    name: 'demo-px-drag-base',
    props: {},
    data() {
        return { dx: 0, dy: 0, isMoving: false, isDragging: false };
    },
    // computed: {},
    // watch: {},
    mounted() {
        this.drag = new drag(this.$el, {
            lock: 'x',
            onStart: () => {
                this.isDragging = true;
            },
            onDrag: ev => {
                this.isMoving = true;
                if (ev.delta) {
                    this.dx += ev.delta.x;
                    this.dy += ev.delta.y;
                }
            },
            onEnd: ev => {
                // this.dx = 0;
                // this.dy = 0;
                this.isDragging = false;
                console.log(ev.delta);
            },
            onMoveEnd: () => {
                this.isMoving = false;
            },
        });
    },
    // methods: {},
};
</script>

<style lang="scss">
@use '../../styles/px.scss' as *;

.demo-px-drag-base {
    width: 100vw;
    height: 60vh;
    background-color: peachpuff;
    border: 4px solid tomato;
    box-sizing: border-box;
    position: relative;
    &__ball {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -60px;
        margin-top: -60px;
        width: 120px;
        height: 120px;
        background-color: tomato;
        border-radius: 50%;
    }
    &__status {
        background-color: accent(-6);
        color: accent(8);
        position: fixed;
        top: 20px;
        right: 20px;
        width: 16em;
        padding: 1.5em;
        border-radius: 0.5em;
        font-family: get('code-font-family');
        font-size: 10px;
        line-height: 1.5;
    }
}
</style>
