<template>
<!-- htmlcs-disable -->
    <view class="scroll-wrapper">
        <view
            @touchstart="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd"
            class="scroll-inner"
            :style="{
                right: right + 'px'
            }">
            <view class="scroll-content">
                <!-- content default slot -->
                <slot/>
            </view>
            <view class="scroll-controller">
                <!-- controller slot -->
                <slot name="controller"/>
            </view>
        </view>
    </view>
<!-- htmlcs-enable -->
</template>

<script>
import {send} from '../../utils/log';
import * as Conf from '../../utils/conf';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        // 控制器宽度
        controllerWidth: {
            type: Number,
            default: 0
        },
        // 外部控制划回去
        scrollBack: {
            type: Boolean,
            default: false
        },
        keys: {
            type: String
        }
    },
    data() {
        return {
            right: 0,
            touchIng: false,
            startX: 0
        };
    },
    watch: {
        scrollBack() {
            if (!this.touchIng) {
                this.right = 0;
            }
        }
    },
    methods: {
        touchStart(e) {
            if (e.touches.length === 1) {
                this.touchIng = true;
                let touch = e.touches[0];
                this.startX = touch.clientX;
            }
        },
        touchMove(e) {
            if (e.touches.length === 1) {
                let touch = e.touches[0];
                let disX = this.startX - touch.clientX;
                if (disX >= 20) {
                    if (disX > this.controllerWidth) {
                        disX = this.controllerWidth;
                    }
                    this.right = disX;
                    e.cancelable && e.preventDefault();
                    e.stopPropagation && e.stopPropagation();
                }
                else {
                    this.right = 0;
                }
            }
        },
        touchEnd(e) {
            if (e.changedTouches.length === 1) {
                if (this.right >= this.controllerWidth / 2) {
                    this.right = this.controllerWidth;
                    this.$emit('scrollEnd');
                }
                else {
                    this.right = 0;
                    this.$emit('scrollEnd');
                }
            }
            this.touchIng = false;
        }
    }
};
</script>
<style lang="less" scoped>
/* csshint-disable */
.scroll {
    &-wrapper {
        width: 100%;
        overflow: hidden;
    }
    &-inner {
        width: 100%;
        transition: .2s ease-in-out;
        position: relative;
    }
    &-controller {
        position: absolute;
        top: 0;
        left: 100%;
        bottom: 0;
    }
    .info {
        position: absolute;
        right: 0;
        top: 0;
    }
}
</style>


