<template>
    <div class="slide" @touchstart.stop.prevent="">

        <div class="line" ref='line'>

            <div class="choose"></div>

        </div>
        <img class="chooseImg left" ref='left' @touchstart='touchStartEvent("left",$event)' @touchmove='touchMoveEvent("left",$event)' :style="{left:left+'px'}" src="@/assets/icon_huakuai.png" alt="">
        <img class="chooseImg right" @touchstart='touchStartEvent("right",$event)' @touchmove='touchMoveEvent("right",$event)' :style="{right:right+'px'}" src="@/assets/icon_huakuai.png" alt="">
    </div>
</template>
<script>
export default {
    name: 'GmSlide',
    props: ['section'],
    data() {
        return {
            left: 0,
            right: 0,
            LeftclientX: 0,
            RightclientX: 0,
            length: 0,
            touchNow: false
        }
    },
    computed: {
        leftMoney() {
            var money = 0
            if (this.length) {
                var per = parseFloat(3100 / this.length)
                money = per * this.left
                money = parseInt(money / 100) * 100
            }
            return money
        },
        rightMoney() {
            var money = 3100
            if (this.length) {
                var per = parseFloat(3100 / this.length)
                money = per * (this.length - this.right)
                money = (parseInt(money / 100) + 1) * 100
            }
            if (money >= 3100) {
                money = '无限'
            }
            return money
        },
        myRent() {
            var str = '0-无限'
            str = this.leftMoney + '-' + this.rightMoney
            return str
        }
    },
    watch: {
        section() {
            if (this.section) {
                var arr = this.section.split('-')
                if (arr.length > 1) {
                    var money1 = parseInt(arr[0].replace('元', ''))
                    var money2 = 3100
                    if (arr[1] != '无限') {
                        money2 = parseInt(arr[1].replace('元', ''))
                    }
                    var per = parseInt(this.length / 3100 * 100)
                    var left = per * money1 / 100
                    var right = (3100 - money2) / 100 * per
                    console.log(money1, money2)
                    this.left = left
                    this.right = right
                    console.log(left, right)
                }
            }
        },
        myRent() {
            if (this.touchNow) {
                this.$emit('changeNowRent', this.myRent)
            }

        }
    },
    mounted() {
        setTimeout(() => {
            this.length = this.$refs.line.offsetWidth
            if (this.section) {
                var arr = this.section.split('-')
                if (arr.length > 1) {
                    var money1 = parseInt(arr[0].replace('元', ''))
                    var money2 = 3100
                    if (arr[1] != '无限') {
                        money2 = parseInt(arr[1].replace('元', ''))
                    }
                    var per = parseInt(this.length / 3100 * 100)
                    var left = per * money1 / 100
                    var right = (3100 - money2) / 100 * per
                    this.left = left
                    this.right = right
                    console.log(money1, money2)
                    console.log(left, right)
                }
            }
        }, 100)

    },
    methods: {
        touchStartEvent(direction, e) {
            this.touchNow = true
            console.log(e)
            if (direction == 'left') {
                this.LeftclientX = e.changedTouches[0].screenX
            }
            if (direction == 'right') {
                this.RightclientX = e.changedTouches[0].screenX
            }

        },
        touchMoveEvent(direction, e) {
            var clientX = e.changedTouches[0].screenX
            var length = this.$refs.line.offsetWidth
            var per = parseInt(length / 3100 * 100)

            if (direction == 'left') {
                var left = clientX - this.LeftclientX + this.left
                var moveLeft = clientX - this.LeftclientX

                if (left > 0 && (moveLeft >= per || moveLeft <= 0 - per) && left < length - this.right - this.$refs.left.offsetWidth / 2) {
                    this.left = left
                    this.LeftclientX = clientX
                }
            }

            if (direction == 'right') {
                var right = this.RightclientX - clientX + this.right
                var moveRight = this.RightclientX - clientX
                if (right > 0 && (moveRight >= per || moveRight <= 0 - per) && right < length - this.left - this.$refs.left.offsetWidth / 2) {
                    this.right = right
                    this.RightclientX = clientX
                }
            }


        },
    }
}

</script>
<style lang="less" scoped>
.slide {
    position: relative;
    height: 0.84rem;
    margin: 0 0.55rem;
    // padding: 0 0.25rem;
    display: flex;
    align-items: center;
}
.line {
    height: 0.08rem;
    background: rgba(242, 244, 245, 1);
    border-radius: 0.1rem;
    position: relative;
    min-height: 0.08rem;
    flex-grow: 1;

    .choose {
        height: 0.08rem;
        background: rgba(21, 168, 170, 1);
        width: 100%;
    }
}

.chooseImg {
    position: absolute;
    top: 0;
    width: 0.76rem;
    height: 0.84rem;
    &.left {
        transform: translateX(-50%);
    }
    &.right {
        transform: translateX(50%);
    }
}
</style>
