<style lang="less">
.componet-period-time-slider {
    width: 100%;
    height: 182rpx;
    position: relative;
    z-index: 2;
    overflow-x: hidden;
}

.componet-period-time-slider .peroid-content-wrapper {
    width: 658rpx;
    position: absolute;
    // left: 48rpx;
    // right: 48rpx;
    height: 182rpx;
}

.componet-period-time-slider .period-time-scroller {
    position: absolute;
    left: 32rpx;
    right: 32rpx;
    overflow: hidden;
}

.componet-period-time-slider .sliders-scroller-wrapper {
    display: inline-block;
    position: relative;
    // border-right: 1px solid #c4c4c4;
    height: 100%;
}
.componet-period-time-slider .sliders-list {
    height: 100%;
    width: 100%;
}

.componet-period-time-slider .sliders-wrapper {
    width: 40px;
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    &:last-child {
        height: 154rpx;
        border-right: 1px solid #c4c4c4;
    }
}

.componet-period-time-slider .disabled-block {
    position: absolute;
    height: 120rpx;
    // line-height: 120rpx;
    left: 0;
    right: 0;
    background-repeat: repeat;
}

.componet-period-time-slider .sliders {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.componet-period-time-slider .sliders .label {
    width: 100%;
    box-sizing: border-box;
    height: 62rpx;
    position: relative;
    .split {
        position: absolute;
        height: 34rpx;
        width: 1px;
        left: 0;
        bottom: 0;
        background: #c4c4c4;
    }
    .text {
        position: absolute;
        left: 14rpx;
        top: 0;
        font-weight: 500;
        font-size: 26rpx;
        line-height: 32rpx;
        color: #656872;
        font-family: Montserrat;
    }
}

.componet-period-time-slider .sliders .slider-block {
    width: 100%;
    height: 120rpx;

    box-sizing: border-box;
    background-repeat: repeat;
    &.hasBorder {
        border-left: 1px solid #ccc;
    }
    &.is-booked-selected-slider {
        background-color: rgba(229, 87, 79, 0.6);
    }
    &.is-can-selected-slider {
        background-color: rgba(0, 220, 35, 0.2);
    }
}

.componet-period-time-slider .selected-area {
    height: 120rpx;
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 12;
    &.showBg {
        background: rgba(0, 220, 35, 0.2);
    }
}

.componet-period-time-slider .selected-area.disabled {
    // background-color: rgba(255, 77, 94, 0.26);
}

.componet-period-time-slider .booked-area {
    height: 100%;
    position: absolute;
    bottom: 0;
    font-size: 24rpx;
    line-height: 112rpx;
    text-align: center;
    color: rgba(6, 6, 61, 0.3);
    z-index: 11;
    .bg {
        position: absolute;
        bottom: 0;
        height: 120rpx;
        width: 100%;
        background-repeat: repeat;
    }
    &.selected {
        z-index: 12;
        .bg {
            background-color: rgba(255, 232, 35, 0.2);
        }
    }
    .booked-user-info {
        padding: 18rpx;
        background: #ffffff;
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
        border-radius: 54rpx;
        position: absolute;
        bottom: 66rpx;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        align-items: center;
        z-index: 13;
        text-align: left;
        .avatar {
            width: 72rpx;
            height: 72rpx;
            display: block;
            border-radius: 50%;
        }
        .info {
            width: 156rpx;
            margin-left: 22rpx;
            .name {
                font-weight: 500;
                font-size: 28rpx;
                line-height: 40rpx;
                color: #000000;
                margin-top: 2rpx;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .time {
                color: #656872;
                font-weight: 500;
                font-size: 20rpx;
                line-height: 24rpx;
                font-family: Montserrat;
            }
        }
    }
}

.componet-period-time-slider .selected-area .start,
.componet-period-time-slider .selected-area .end {
    position: absolute;
    height: 100%;
    width: 50rpx;
    background: transparent;
    /* display: flex;
  flex-direction: row;
  justify-content: center; */
}

.componet-period-time-slider .selected-area .start {
    left: 0;
    transform: translateX(-50%);
}

.componet-period-time-slider .selected-area .end {
    right: 0;
    transform: translateX(50%);
}

.componet-period-time-slider .selected-area .start-axis {
    /* right:-20%; */
    // margin-left: 20rpx;
    left: 50%;
    transform: translateX(-50%);
}

.componet-period-time-slider .selected-area .end-axis {
    // margin-left: 30rpx;
    right: 50%;
    transform: translateX(50%);
}

.componet-period-time-slider .selected-area .axis {
    height: 100%;
    width: 3px;
    background-color: #00dc23;
    position: absolute;
}

.componet-period-time-slider .selected-area .axis.disabled {
    background-color: #e5574f;
    &::before {
        border-color: #e5574f;
    }
}

.componet-period-time-slider .selected-area .end-axis:before {
    content: ' ';
    position: absolute;
    height: 24rpx;
    width: 24rpx;
    background-color: #fff;
    border: 3px solid #00dc23;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 13;
    border-radius: 50%;
}
.childSt {
    position: absolute;
    display: flex;
    justify-content: center;
    padding-top: 44rpx;
    top: 62rpx;
    z-index: 10;
}
.text {
    height: 16px;
    width: 38px;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 4rpx 4rpx 4rpx 8rpx;
    color: rgba(255, 255, 255, 1);
    font-family: Montserrat;
    font-size: 20rpx;
    font-weight: 500;
    line-height: 24rpx;
    text-align: center;
}

.ok {
    background: rgba(24, 195, 93, 0.6);
}
.err {
    background: rgba(255, 54, 54, 0.6);
}
.wait {
    background: rgba(65, 107, 255, 0.6);
}
</style>

<template>
    <div
        class="componet-period-time-slider"
        v-on:touchend.stop="stopPragation"
    >
        <div class="peroid-content-wrapper">
            <scroller-x
                @componet-scroller-x-scroll="scroll"
                containerId="peroid-content-wrapper"
                canMove="{{!isSelectPeriodIng}}"
                scrollLeft="{{scrollLeft}}"
            >
                <div
                    class="sliders-scroller-wrapper"
                    style="position:relative"
                >
                    <div
                        class="sliders-list"
                    >
                        <div
                            class="sliders-wrapper"
                            v-for="(item,index) in sliders"
                            data-index="{{index}}"
                        >
                            <div class="sliders">
                                <div
                                    class="label"
                                    v-if="index%2==0"
                                >
                                    <div class="split"></div>
                                    <div class="text">{{item.label}}</div>
                                </div>
                                <!-- slider-block class判断逻辑:如果选中了, 则需判断该块的状态来增加对应的背景色 -->
                                <!-- slider-block style判断逻辑: 
                一: 如果是过去的状态下: 1-需要展示过去状态需要红斜线(该块不是预定状态下(因为预定的斜线在booked-area里合并展示) 2- 是在选择区域,选择区域在过去状态需要红斜线)展示红斜线 
                二: 如果展示未运营时间范围内且disabledUnopened 则需要展示 红斜线-->
                                <div
                                    class="{{'slider-block' + (item.isInSelectArea ? (item.isBooked || item.status=='unOpened' || item.status=='past')?' is-booked-selected-slider':' is-can-selected-slider' :'') + (index%2==0? ' hasBorder':'')}}"
                                    data-index="{{index}}"
                                    v-on:click="selectPeriod22"
                                    style="{{((item.status=='past'&& (showPastDisabled || item.isInSelectArea)) ||  (disabledUnopened && item.status=='unOpened'))? 'background-color:'+'#e3e3e3' : ''+';'+(item.isBooked?'background-image:url('+h5StaticPath+'/page-meeting-room/bg_disabled_red_v2.svg)':''+';position:relative')}}"
                                >
                                    <!-- 审批 -->
                                    <!-- <div
                                        v-if="item.checked&&item.status!=='past'"
                                        class="{{item.checked?'childSt':''}}"
                                        style="{{'left:'+item.left+'px'}}"
                                        bindtouchstart="touchstart"
                                    >
                                        <div class="[text,{{item.checked}}]">
                                            <span>{{item.text}}</span>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        v-for="(item,index) in sliders"
                        data-index="{{index}}"
                        v-if="item.checked&&item.status!=='past'"
                        class="{{item.checked?'childSt':''}}"
                        style="{{'left:'+item.left+'px'}}"
                        v-on:click="selectPeriod"

                    >
                        <div class="[text,{{item.checked}}]">
                            <span>{{item.text}}</span>
                        </div>
                    </div>

                    <div
                        @click.stop="deleteSelectedBookArea"
                        class="{{'selected-area'+(canBookSelectArea?'': 'disabled') + (isSelectPeriodIng? ' showBg': '')}}"
                        v-if="startIndex!==null"
                        style="{{'left:' +selectArealeft + 'px;right:'+ selectAreaRight+ 'px;' }}"
                    >
                        <div
                            class="start"
                            data-from="start"
                        >
                            <div class="{{'start-axis axis'+ (!firstSelectSliderCanBook?' disabled': '')}}"></div>
                        </div>
                        <div
                            class="end"
                            v-on:touchmove.stop="changeEndTimeMove"
                            v-on:touchstart.stop="changeEndTimeStart"
                            v-on:touchend.stop="changeEndTimeEnd"
                        >
                            <div
                                class="{{'end-axis axis'+ (!endSelectSliderCanBook ? 'disabled': '')}}"
                                data-from="end"
                            ></div>
                        </div>
                    </div>

                    <!-- <div
                        class="{{'booked-area' + (index === selectedBookAreaIndex? ' selected': '')}}"
                        v-for="(item,index) in formattedBookList"
                        :key="index"
                        style="{{'left:' +item.left + 'px;right:'+ (item.right)+ 'px;'}}"
                        bindlongtap="{{deleteSelectedBookArea(index)}}"
                    >
                        <div
                            class="bg"
                            style="{{'background-image:url('+h5StaticPath+'/page-meeting-room/bg_disabled_red_v2.svg)'}}"
                        ></div>
                    </div> -->
                </div>
            </scroller-x>
        </div>
    </div>
</template>

<script>
import {
    generateTimeValuesByArea,
    SliderUnit
} from '@/service/meetingTimes';
import { generateTimeSliders, TimeStart, TimeEnd } from '@/packagesEnv/pages/common.js'
let SliderWidth = 40; // ('单位为px');
let startX = 0;
let scrollerMarginLeft = 16; // ('单位为px');
let axiosWidth = 56; // ('单位为px');
let componentWrapInfo = {};
let maxScrollLeft = 0;
let addTimer = null;
let reduceTimer = null;
let overRightMoveX = 0;
let reduceLeftMoveX = 0;
let SlidersWrapperTotaLength = ((TimeEnd - TimeStart) / SliderUnit) * SliderWidth;
let ShowAreaLength = 0;
import wepy from '@wepy/core';
import config from '@/config';
wepy.component({
    data: {
        sliders: [],
        bookedTimeValues: [], //这个用来判断当前slider是否是占用的
        formattedBookList: [], //这个用来展示占用人名字居中的
        startIndex: null,
        duration: 0,
        selectArealeft: 0,
        selectAreaRight: '100%',
        sliderFrom: '', //end,触发结束轴，start触发增加轴,
        scrollLeft: 0,
        isSelectPeriodIng: false, //用来标记是否在滑动选时间中
        componentWrapWidth: 375,
        h5StaticPath: config.h5StaticPath,
        scrollLeftByTouch: 0, //用来记录自身滚动值，与设置的值区分开，防止多次设置组件内部滚动值会出现抖动
        featuresVersion: config.featuresVersion,
        selectedBookAreaIndex: null
    },
    props: {
        selectValue: Object,
        disabledPast: {
            type: Boolean,
            default: false
        },
        defaultSelectedPeriod: Object,
        bookedList: Array,
        hiddenBookedUserName: {
            type: Boolean,
            default: false
        },
        customList: Array,
        disabledUnopened: {
            type: Boolean,
            default: false
        },
        showPastDisabled: {
            type: Boolean,
            default: false
        }
    },
    ready() {
        this.getComponentWrapInfo().then(({ area }) => {
            ShowAreaLength = area;
            maxScrollLeft = ShowAreaLength - SlidersWrapperTotaLength;
            const { selectValue } = this;
            if (selectValue && selectValue.start && selectValue.end) {
                // 防止此时选择时间列表还未全部渲染完毕
                setTimeout(() => {
                    this.setValeByStartAndValue(selectValue.start, selectValue.end);
                }, 500);
            }
        });

    },
    computed: {
        sliders() {
            //  固定服务定制时间
            let sliders = [];
            this.customList && this.customList.map(item => {
                let resArr = [];
                resArr = generateTimeSliders(
                    item.openStartTime,
                    item.openEndTime,
                    this.disabledPast
                );
                for (let i = 0; i < sliders.length; i++) {
                    const ele = sliders[i];
                    for (let j = 0; j < resArr.length; j++) {
                        const anEle = resArr[j];
                        if (ele.value == anEle.value && ele.status) {
                            anEle.status = ele.status
                        }
                    }
                }
                sliders = resArr;
            })
            // 找出已经booked, 并标记isBooked
            if (this.formattedBookList && this.formattedBookList.length !== 0) {
                sliders = sliders.map((slider, idx) => {
                    let item = { ...slider };
                    let sliderHasBooked = this.bookedTimeValues.find(
                        time => slider.value == time
                    );
                    if (typeof sliderHasBooked === 'number') {
                        item.isBooked = true;
                    }
                    // 审批状态
                    this.formattedBookList.map(fb => {
                        let { checked, text, left } = this.checkApprovalStatus(fb,slider, idx);
                        if (checked!= '' &&  checked) {
                            item.checked = checked;
                            item.text = text;
                            item.left = left;
                        }

                    })
                    return { ...item };
                });

            }
            // 找出在selectesArea里面的, 并标记isInSelectArea
            if (this.startIndex !== null && this.duration) {
                let start = sliders[this.startIndex].value;
                let end = start + this.duration * SliderUnit;
                sliders = sliders.map((slider, index) => {
                    let isInSelectArea = false;
                    if (slider.value >= start && slider.value < end) {
                        isInSelectArea = true;
                    }
                    return { ...slider, isInSelectArea };
                });
            }
            console.log(sliders, '----sliders');
            return sliders;
        },
        formattedBookList() {
            let { formattedBookList } = this.formattedPeriodBookList(this.bookedList);
            return formattedBookList;

        },
        bookedTimeValues() {
            let {
                formattedBookList,
                bookedTimeValues
            } = this.formattedPeriodBookList(this.bookedList);
            return bookedTimeValues;

        },
        canBookSelectArea() {
            let { canBooked } = this.selectAareaCanBook();
            return canBooked;
        },
        firstSelectSliderCanBook() {
            let { firstCanBook } = this.selectAareaCanBook();
            return firstCanBook;
        },
        endSelectSliderCanBook() {
            let { endCanBook } = this.selectAareaCanBook();
            return endCanBook;
        }
    },
    watch: {
        selectValue: function (newSelectValue, oldSelectValue) {
            if (JSON.stringify(oldSelectValue) !== JSON.stringify(newSelectValue)) {
                if (newSelectValue.from !== 'outer') {
                    return;
                }
                if (newSelectValue && newSelectValue.start && newSelectValue.end) {
                    this.setValeByStartAndValue(newSelectValue.start, newSelectValue.end);
                } else {
                    this.reset();
                }
            }
        },
        bookedList: function (newBookedList, oldBooledList) {
            if (JSON.stringify(oldBooledList) !== JSON.stringify(newBookedList)) {
                // this.changedSlidersWithBookList();
                const { selectValue } = this;
                if (selectValue && selectValue.start && selectValue.end) {
                    this.setValeByStartAndValue(selectValue.start, selectValue.end);
                }
            }
        },
        disabledPast: function (newDisabledPast, oldDisabledPast) {
            const { selectValue } = this;
            if (selectValue && selectValue.start && selectValue.end) {
                this.setValeByStartAndValue(selectValue.start, selectValue.end);
            }
        }
    },
    methods: {
        // 审批状态
        checkApprovalStatus22(fb, slider, idx) {
            const preFb = fb.end - 0.5
            if (slider.value === preFb && fb.hasOwnProperty('approvalStatus')) {
                let checked = '';
                let text = '';
                let len = 0;
                let left = 0;
                const dx = (fb.end - fb.start) * 2;
                len = dx * 40;
                left = -(preFb - fb.start) * 40;
                switch (fb.approvalStatus) {
                    case 0:
                        checked = 'wait';
                        text = '待审批';
                        break;
                    case 1:
                        checked = 'ok';
                        text = '已通过';
                        break;
                    case 2:
                        checked = 'err';
                        text = '已拒绝';
                        break;
                    default:
                        break;
                }
                return { checked, text, len, left }
            } else {
                return false
            }
        },
        // 审批状态
        checkApprovalStatus(fb, slider, idx) {
            let dxCenter = fb.end - (fb.end - fb.start) / 2;
            var left = 0;
            const floatIdx = String(dxCenter).indexOf('.') + 1; // 小数点的位置
            const floatLen = floatIdx ? String(dxCenter).length - floatIdx : 0 ; // 小数点的位数
            if (floatLen === 2) {
                dxCenter = dxCenter - 0.5 / 2
                left = 0 + dxCenter / 0.5 * 40;
            }
            if (floatLen === 1 || !floatLen) {
                dxCenter = dxCenter - 0.5
                left = 19 + dxCenter / 0.5 * 40;
               
            }
            if (slider.value === dxCenter && fb.hasOwnProperty('approvalStatus')) {
                let checked = '';
                let text = '';
                switch (fb.approvalStatus) {
                    case 0:
                        checked = 'wait';
                        text = '待审批';
                        break;
                    case 1:
                        checked = 'ok';
                        text = '已通过';
                        break;
                    case 2:
                        checked = 'err';
                        text = '已拒绝';
                        break;
                    default:
                        break;
                }
                return { checked, text, left }
            } else {
                return false
            }
        },
        formattedPeriodBookList(bookedList) {
            let formattedBookList = [],
                bookedTimeValues = [];
            if (!bookedList || (bookedList && bookedList.length == 0)) {
                return { formattedBookList, bookedTimeValues };
            }
            formattedBookList = bookedList.map(booked => {
                //todo
                let { start, end } = booked;
                let duration = (end - start) / SliderUnit;
                let list = generateTimeValuesByArea(start, end);
                bookedTimeValues = bookedTimeValues.concat(list);
                let left = ((start - TimeStart) / SliderUnit) * SliderWidth;

                let right = SlidersWrapperTotaLength - left - duration * SliderWidth;
                return { ...booked, duration, left, right };
            });
            return { formattedBookList, bookedTimeValues };
        },
        reset() {
            this.startIndex = null;
            this.duration = 0;
            this.scrollLeft = 0;
            this.selectArealeft = 0;
            this.selectAreaRight = 0;
        },
        setValeByStartAndValue(start, end) {
            let duration = (end - start) / SliderUnit;
            let startIndex = this.sliders.findIndex(item => item.value == start);
            let scrollLeft = -(startIndex * SliderWidth) + 50;
            if (scrollLeft > 0) {
                scrollLeft = 0;
            } else if (scrollLeft < maxScrollLeft) {
                scrollLeft = maxScrollLeft;
            }
            this.startIndex = startIndex;
            this.duration = duration;
            this.scrollLeftByTouch = scrollLeft; //同时也要记录;
            setTimeout(() => {
                this.scrollLeft = scrollLeft;
            }, 100); // 防止初始是，时间轴列表还未渲染完，此时设置滚动不生效
            const { canBookSelectArea } = this;
            this.$emit(
                'component-period-time-slider-judgecanselectedend',
                canBookSelectArea
            );
            this.setSelectArea(startIndex, duration);
        },
        selectAareaCanBook() {
            const { startIndex, duration, sliders, disabledPast } = this;

            let canBooked = true;
            let firstCanBook = true;
            let endCanBook = true;
            // 只有当有值才去判断
            if (sliders && sliders.length && duration && !isNaN(startIndex)) {
                let start = sliders[startIndex].value;
                let selectedSliders = [];
                for (let i = 0; i < duration; i++) {
                    selectedSliders.push(start + i * SliderUnit);
                }
                selectedSliders.forEach((selectedItem, index) => {
                    let selectSlider = sliders.find(item => item.value == selectedItem);
                    if (
                        (selectSlider && disabledPast && selectSlider.status == 'past') ||
                        (selectSlider && selectSlider.status === 'unOpened')
                    ) {
                        canBooked = false;
                        // 在不能预约的块里面是否有第一个,
                        if (index == 0) {
                            firstCanBook = false;
                        }
                        //再不能最后一个
                        if (index == selectedSliders.length - 1) {
                            endCanBook = false;
                        }
                    }
                });
            }

            return { canBooked, firstCanBook, endCanBook };
        },
        scroll(scrollLeft) {
            this.scrollLeftByTouch = scrollLeft;
        },

        selectPeriod22(e) {
            let index = e.$wx.target.dataset.index;
            // if (this.index === index) {
            //   this.cancelSelect();
            // } else {
            //   this.selectSlider(index)
            // }
            this.resetCanBook();
            this.selectSlider(index);
            this.onEndSelectFun();
        },
        selectPeriod(e) {
            const leftPd = 25
            const num = (-this.scrollLeftByTouch + e.x - leftPd) / 40;
            let index = Math.floor(num);
            // if (this.index === index) {
            //   this.cancelSelect();
            // } else {
            //   this.selectSlider(index)
            // }
            this.resetCanBook();
            this.selectSlider(index);
            this.onEndSelectFun();
        },
        resetCanBook() {
            this.canBookSelectArea = true;
        },
        cancelSelect() {
            this.startIndex = null;
            this.duration = 0;
            this.selectArealeft = 0;
            this.selectAreaRight = 0; //默认保留一个宽度;
        },
        selectSlider(index) {
            this.startIndex = index;
            this.duration = 1;
            this.setSelectArea(index, 1);
            this.selectedBookAreaIndex = null;
        },
        setSelectArea(startIndex, duration) {
            // console.log('设置偏移值',left, right);
            let left = SliderWidth * startIndex;
            let right = SlidersWrapperTotaLength - left - duration * SliderWidth;
            this.selectArealeft = parseInt(left);
            this.selectAreaRight = parseInt(right);
        },
        changeEndTimeStart(e) {
            startX = Number(e.touches[0].pageX);
            this.isSelectPeriodIng = true;
        },
        changeEndTimeMove(e) {
            let {
                scrollLeftByTouch,
                startIndex,
                duration,
                selectArealeft,
                selectAreaRight
            } = this;
            let touch = e.touches[0],
                x = Number(touch.pageX);
            let from = e.target.dataset.from;
            if (x === startX) {
                // 没有实质性的移动，不做处理，提高性能
                return;
            }
            let touchLength = parseInt(x - startX);
            startX = x;
            //左边最起始x位置
            let leftLimit = scrollerMarginLeft;
            //因为要保证最少有一格，故滑动start轴最右边是当前结束位置向前移一格
            let startLimit =
                scrollerMarginLeft +
                SliderWidth * (startIndex + duration - 1) +
                scrollLeftByTouch;
            //右边最大结束x位置
            let rightLimit = scrollerMarginLeft + componentWrapInfo.width;
            //因为要保证最少有一格，故滑动end轴结束位置为当前开始位置加一格
            let endLimit =
                scrollerMarginLeft + SliderWidth * (startIndex + 1) + scrollLeftByTouch;
            //end 轴往前滑

            if (touchLength >= 0 && x >= ShowAreaLength) {
                this.clerReduceTimer();
                // console.log('超出右边界,增加右边');
                this.scrollToRightEdgBySelectArea(touchLength);
                return;
            }

            // if (touchLength <= 0 && (selectArealeft + scrollLeftByTouch) < 0) {
            //   this.clearAddTimer();
            //   console.log('左边看不见，可以减少左边');
            //   this.reduceSelectAreaRight();
            //   return
            // }

            if (
                touchLength <= 0 &&
                SlidersWrapperTotaLength -
                (selectAreaRight - touchLength) -
                selectArealeft <=
                SliderWidth
            ) {
                //保证一格，不让滑了
                this.selectAreaRight =
                    SlidersWrapperTotaLength - selectArealeft - SliderWidth;
                return;
            }

            this.clearAddTimer();
            this.clerReduceTimer();
            // console.log('正常滑动增加或减少');
            this.selectAreaRight = selectAreaRight - touchLength;
        },
        scrollToRightEdgBySelectArea() {
            let { scrollLeftByTouch, selectAreaRight } = this;
            if (addTimer) {
                return;
            }

            addTimer = setInterval(() => {
                // console.log('进入增加定时器');
                overRightMoveX = overRightMoveX + 1;
                let translateX = scrollLeftByTouch - overRightMoveX;
                let newSelectAreaRight = selectAreaRight - overRightMoveX; //同时selectAreaRight也要变小
                if (translateX <= maxScrollLeft) {
                    //如果超出边界值，就不在滑动了
                    this.clearAddTimer();
                    this.scrollLeftByTouch = maxScrollLeft; //同时也要记录;
                    this.scrollLeft = maxScrollLeft;
                    this.selectAreaRight = 0;
                    return;
                }
                this.scrollLeftByTouch = translateX; //同时也要记录;
                this.scrollLeft = translateX;
                this.selectAreaRight = newSelectAreaRight;
            }, 10);
        },

        reduceSelectAreaRight() {
            let { scrollLeftByTouch, selectArealeft, selectAreaRight } = this;
            if (addTimer) {
                this.clearAddTimer();
            }
            if (reduceTimer) {
                return;
            }

            reduceTimer = setInterval(() => {
                // console.log('进入减少定时器');
                let toMinScrollLeft = false;
                reduceLeftMoveX = reduceLeftMoveX + 1;
                let translateX = scrollLeftByTouch + reduceLeftMoveX; //scroll增加，滚动减小
                let right = selectAreaRight + reduceLeftMoveX; //right增加，选择区域减小

                let minScrollLeft = -selectArealeft;
                if (translateX >= minScrollLeft) {
                    //当滚动到当前选项结束开始位置位于屏幕左测开始位置
                    toMinScrollLeft = true;
                }

                this.scrollLeftByTouch = toMinScrollLeft ? minScrollLeft : translateX; //同时记录
                this.scrollLeft = toMinScrollLeft ? minScrollLeft : translateX;
                this.selectAreaRight = right;

                if (SlidersWrapperTotaLength - right - selectArealeft <= SliderWidth) {
                    //如果right 减小到与left 只剩一格，则不再减少，并且设置为1格的间距
                    this.clerReduceTimer(); //就不再滑动了
                    // console.log('保证一格了，不再减少了');
                    this.scrollLeftByTouch = toMinScrollLeft ? minScrollLeft : translateX; //同时记录
                    this.scrollLeft = toMinScrollLeft ? minScrollLeft : translateX;
                    this.selectAreaRight =
                        SlidersWrapperTotaLength - selectArealeft - SliderWidth;
                }
            }, 10);
        },

        clearAddTimer() {
            if (addTimer) {
                // console.log('清楚增加定时器');
                overRightMoveX = 0;
                addTimer = clearInterval(addTimer);
            }
        },
        clerReduceTimer() {
            if (reduceTimer) {
                // console.log('清楚减少定时器');
                reduceLeftMoveX = 0;
                reduceTimer = clearInterval(reduceTimer);
            }
        },
        moveLeftToScreenLeft() {
            const { scrollLeftByTouch, selectArealeft } = this;
            let distance = selectArealeft + scrollLeftByTouch;
            if (distance <= 0) {
                this.scrollLeft = scrollLeftByTouch - distance;
            }
        },

        moveRihtToScreenRight() {
            const { scrollLeftByTouch, selectAreaRight } = this;
            let distance =
                SlidersWrapperTotaLength -
                selectAreaRight +
                scrollLeftByTouch -
                ShowAreaLength;
            if (distance > 0) {
                this.scrollLeft = scrollLeftByTouch - distance;
            }
        },
        changeEndTimeEnd() {
            this.clerReduceTimer();
            this.clearAddTimer();
            this.isSelectPeriodIng = false;
            let { selectAreaRight, selectArealeft, startIndex } = this;
            let numbers;
            let remainder;
            let selectAreaX =
                SlidersWrapperTotaLength - selectAreaRight - selectArealeft;
            // console.log('touchEnd', selectAreaX)
            let moveNumbers = (Math.abs(selectAreaX) / SliderWidth)
                .toString()
                .split('.');
            numbers = parseInt(moveNumbers[0]);
            remainder = parseFloat('0.' + moveNumbers[1]);
            if (Math.abs(remainder) >= 0.5) {
                ++numbers;
                //如果进一的时候，屏幕看不到了，则多滚一点
                this.moveRihtToScreenRight();
            }
            // console.log('滑动结束', startIndex, duration);
            this.duration = numbers;
            this.startIndex = startIndex;
            this.setSelectArea(startIndex, numbers);
            startX = 0;
            this.onEndSelectFun();
            // 钉钉短震动（仅在 iPhone 7 / 7 Plus 以上及 Android 机型生效）
            if (wx.canIUse('vibrateShort')) {
                wx.vibrateShort();
            }
        },
        getComponentWrapInfo() {

            if (SlidersWrapperTotaLength && ShowAreaLength) {
                return Promise.resolve({
                    total: SlidersWrapperTotaLength,
                    area: ShowAreaLength
                });
            }
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    this.$wx
                        .createSelectorQuery()
                        .select('.peroid-content-wrapper')
                        .boundingClientRect()
                        .exec(ret => {
                            if (!ret[0].width) {
                                reject();
                                return;
                            }
                            return resolve({
                                area: ret[0].width
                            });
                        });
                }, 300);

            });
        },
        onEndSelectFun() {
            const { startIndex, duration, sliders } = this;
            let start = sliders[startIndex].value;
            let end = start + duration * SliderUnit;
            let hasUuBooked = this.hasUuBooked();
            // console.log(start,'start!!!!!');
            // console.log(end,'end!!!!!');
            this.$emit('component-period-time-slider-select', { start, end, hasUuBooked });

            this.$emit(
                'component-period-time-slider-judgecanselectedend',
                this.canBookSelectArea
            );
        },
        stopPragation() { },
        hasUuBooked() { // 选区有新的增加
            let hasUuBooked = false;
            this.sliders.forEach((item, idx) => {
                if (item.isInSelectArea && !item.isBooked) {
                    hasUuBooked = true;
                }
            });
            return hasUuBooked
        },
        deleteSelectedBookArea() { // 点击 删除
            // console.log('1111');
            let hasUuBooked = this.hasUuBooked();
            if (hasUuBooked) return
            // console.log('222');
            this.$emit('component-bookList-delete')
            // this.selectedBookAreaIndex = idx;
        }
    }
});
</script>

<config>
{
  "usingComponents":{
    "scroller-x": "~@/components/common/scroller-x"
  },
  componentPlaceholder: {
    'scroller-x': 'view'
  }
}
</config