<template>
    <view class="scroll-choose-all">
        <view class="middleLine">
            <span class="sanjiao"></span>
        </view>
        <scroll-view
            class="scroll-choose"
            scroll-x="true"
            upper-threshold="5"
            lower-threshold="5"
            :scroll-left="scrollLeftInit"
            show-scrollbar="false"
            @scroll="scroll"
            @scrolltoupper="upper"
            @scrolltolower="lower"
            scroll-with-animation="true"
        >
            <view
                class="scroll-con"
                :style="{width: scrollWid}"
            >
                <view class="topLine">
                    <view
                        class="allLine"
                        :style="{'marginRight': maginL + 'px'}"
                        :class="item.type"
                        v-for="(item,index) in scrollList"
                        :key="index"
                    ></view>
                </view>
                <view
                    class="bottomNum"
                    :style="{'paddingLeft': allNumLeft}"
                >
                    <text
                        class="allNum"
                        :style="{width: (maginL + 2) * 10 + 'px',left: -((maginL + 2) * 5) + 'px'}"
                        v-for="(item,index) in scrollNumList"
                        :key="index"
                    >
                        {{radix ? item*0.1 : item}}
                    </text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: "ScrollChoose",
    props: {
        //起始值和终止值差距不要过大，否则会影响页面性能(暂不支持设置小数)
        /**
         * 初始值（注意：初始值应在起始值和终止值之间）
         */
        scrollLeft: {
            type: Number,
            default: 0,
        },
        /**
         * 滚动区域起始值（注意：起始值不能大于终止值）
         */
        scrollStart: {
            type: Number,
            default: 20,
        },
        /**
         * 滚动区域终止值
         */
        scrollEnd: {
            type: Number,
            default: 240,
        },
        /**
         * 线间距
         */
        maginL: {
            type: Number,
            default: 10,
        },
        /**
         * 小数
         */
        radix: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            scrollList: [],
            scrollNumList: [],
            scrollWid: "100vw",
            scrollLeftInit: 0,
            allNumLeft: "",

            timer: {},
        };
    },
    mounted() {
        this.init();
    },
    watch: {
        radix: {
            handler(val) {
                this.init();
            },
        },
    },
    computed: {},
    methods: {
        init() {
            this.scrollList = [];
            this.scrollNumList = [];
            for (let i = this.scrollStart; i < this.scrollEnd + 1; i++) {
                let _line = {};
                if (i % 5 == 0) {
                    if (i % 10 == 0) {
                        this.scrollNumList.push(i);
                        _line.type = "LLine";
                    } else {
                        _line.type = "MLine";
                    }
                } else {
                    if (!this.radix) {
                        _line.type = "SLine";
                    }
                }
                this.scrollList.push(_line);
            }
            this.scrollWid =
                uni.upx2px(750) +
                (this.scrollEnd - this.scrollStart) * (this.maginL + 2) +
                "px";
            if (this.scrollStart % 10 != 0) {
                if (this.scrollStart > 0) {
                    this.allNumLeft =
                        (10 - (this.scrollStart % 10)) * (this.maginL + 2) +
                        uni.upx2px(372) +
                        "px";
                } else {
                    this.allNumLeft =
                        Math.abs(this.scrollStart % 10) * (this.maginL + 2) +
                        uni.upx2px(372) +
                        "px";
                }
            }
            setTimeout(() => {
                this.changScroll(
                    Math.round(
                        (this.scrollLeft - this.scrollStart) * (this.maginL + 2)
                    )
                );
            }, 100);
        },
        changScroll(scrollLeft) {
            if (!this.radix)
                this.$emit(
                    "scroll",
                    Math.round(
                        scrollLeft / (this.maginL + 2) + this.scrollStart
                    )
                );
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                let scrollLen = (
                    Number(scrollLeft / (this.maginL + 2)) + this.scrollStart
                ).toFixed(1);
                this.scrollLeftInit =
                    (scrollLen - this.scrollStart) * (this.maginL + 2);
                this.$emit("scroll", scrollLen);

                // //#region
                // if (this.radix) {
                //     if (
                //         scrollLen > 10 &&
                //         (scrollLen % 5 != 0 || scrollLen % 10 != 0)
                //     ) {
                //         let strNum = Number(
                //             scrollLen
                //                 .toString()
                //                 .charAt(scrollLen.toString().length - 1)
                //         );
                //         if (strNum <= 3) {
                //             scrollLen -= strNum;
                //         } else if (strNum > 7) {
                //             scrollLen += 10 - strNum;
                //         } else if (strNum > 3 && strNum < 5) {
                //             scrollLen += 5 - strNum;
                //         } else if (strNum <= 7) {
                //             scrollLen += 5 - strNum;
                //         }
                //         console.log(strNum);
                //     }
                //     this.scrollLeftInit =
                //         (scrollLen - this.scrollStart) * (this.maginL + 2);
                //     this.$emit("scroll", scrollLen * 0.1);
                // } else {
                // this.scrollLeftInit =
                //     (scrollLen - this.scrollStart) * (this.maginL + 2);
                // this.$emit("scroll", scrollLen);
                // }
                ////#endregion
            }, 50);
        },
        upper: function (e) {
            setTimeout(() => {
                // console.log('----' + this.scrollStart)
                // this.$emit('scroll', this.radix ? this.scrollStart * 0.1 : this.scrollStart);
            }, 50);
        },
        lower: function (e) {
            setTimeout(() => {
                // console.log('v----' + this.scrollStart)
                // this.$emit('scroll', this.radix ? this.scrollStart * 0.1 : this.scrollStart);
            }, 50);
        },
        scroll: function (e) {
            this.changScroll(e.detail.scrollLeft);
        },
    },
};
</script>

<style lang="scss" scoped>
@charset "UTF-8";

// * {
// 	touch-action: none;
// }

.scroll-choose-all {
    width: 750rpx;
    height: 100px;
    background: rgba($color: $main-color, $alpha: 0.1);
    margin: 10px 0;
    // border-bottom: 1px solid #ccc;
    // border-top: 1px solid #ccc;

    position: relative;
}

.sanjiao {
    width: 0;
    height: 0;
    border-radius: 10rpx;
    border-right: 25rpx solid transparent;
    border-left: 25rpx solid transparent;
    border-top: 25rpx solid $main-color;
    position: relative;
    left: -22rpx;
    top: 18rpx;
    z-index: 2;
}

.middleLine {
    position: absolute;
    width: 2px;
    height: 32px;
    background: $main-color;
    left: 375rpx;
    margin-left: -5rpx;
    z-index: 1;
}

.middleLine:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid $main-color;
}

.scroll-choose {
    width: 750rpx;
    height: 100px;

    .scroll-con {
        height: 100px;
        overflow: hidden;

        .topLine {
            height: 70px;
            padding: 0 372rpx;
        }

        .bottomNum {
            height: 70px;
            padding: 0 0 0 372rpx;
            width: 100%;

            // display: flex;
            // flex-wrap: nowrap;
            .allNum {
                display: inline-block;
                position: relative;
                // width: 70px;
                // left: -35px;
                text-align: center;
                font-size: $title-size;
                color: #999;
            }
        }

        .allLine {
            display: inline-block;
            // margin-right: 5px;
            width: 2px;
            // background: #999;
            position: relative;
        }

        .allLine:last-child {
            margin-right: 0px !important;
        }

        .LLine {
            height: 60px;
            background: #dddddd;
        }

        .MLine {
            height: 50px;
            top: -10px;
            background-color: #dddddd;
        }

        .SLine {
            height: 35px;
            top: -15px;
            background: #ebebeb;
        }
    }
}
</style>
