<template>
    <div :class="`${prefix}-time-table`">
        <jdd-scrollbar ref="hour"
                       :class="`${prefix}-time-table__hour`"
                       @v-scroll="debounceScroll($event,'hour')">
            <ul>
                <li v-for="item in 24"
                    :key="item"
                    :class="checkDisabled('second',item-1)"
                    @click="handleClick($event,'hour',item-1)">
                    {{ (item-1).toString().padStart(2,'0') }}
                </li>
            </ul>
        </jdd-scrollbar>
        <jdd-scrollbar ref="minute"
                       :class="`${prefix}-time-table__minute`"
                       @v-scroll="debounceScroll($event,'minute')">
            <ul>
                <li v-for="item in 60"
                    :key="item"
                    :class="checkDisabled('second',item-1)"
                    @click="handleClick($event,'minute',item-1)">
                    {{ (item-1).toString().padStart(2,'0') }}
                </li>
            </ul>
        </jdd-scrollbar>
        <jdd-scrollbar ref="second"
                       :class="`${prefix}-time-table__second`"
                       @v-scroll="debounceScroll($event,'second')">
            <ul>
                <li v-for="item in 60"
                    :key="item"
                    :class="checkDisabled('second',item-1)"
                    @click="handleClick($event,'second',item-1)">
                    {{ (item-1).toString().padStart(2,'0') }}
                </li>
            </ul>
        </jdd-scrollbar>
    </div>
</template>

<script>
import Scrollbar from '../scrollbar';
import { debounce, throttle } from 'throttle-debounce';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: 'TimePicker',
    mixins: [prefixMixins],
    components: {
        jddScrollbar: Scrollbar
    },
    props: {
        value: [String, Number],
        start: String,
        end: String
    },
    data() {
        return {
            hour: 0,
            minute: 0,
            second: 0,
            timeId: null,
            startArr: [],
            endArr: []
        };
    },
    watch: {
        start: function() {
            this.setStartEnd();
        },
        end: function() {
            this.setStartEnd();
        }
    },
    mounted() {
        if (this.value) {
            let vals = this.value.split(':').map(m => {
                return parseInt(m);
            });
            let [hour, minute, second] = [...vals];
            this.hour = hour || 0;
            this.minute = minute || 0;
            this.second = second || 0;
            this.$nextTick(() => {
                this.$refs.hour.scrollTo({ y: this.hour * 32 });
                this.$refs.minute.scrollTo({ y: this.minute * 32 });
                this.$refs.second.scrollTo({ y: this.second * 32 });
            });
        }
        this.setStartEnd();
    },
    beforeCreate() {
        if (this.$isServer) return;
        this.debounceScroll = (e, t) => {
            debugger;
            clearTimeout(this.timeId);
            this.timeId = setTimeout(() => {
                this.handleScroll(e, t);
            }, 200);
        };
    },
    methods: {
        handleScroll(evt, type) {
            let from = Math.abs(evt.y);
            let current = Math.round(from / 32);
            if (this.checkDisabled(type, current).includes('is-disabled')) {
                current = this[type];
            }
            let to = current * 32;
            evt.scrollTo({ y: to });
            this[type] = current;
            this.$emit(
                'input',
                `${this.hour
                    .toString()
                    .padStart(2, '0')}:${this.minute
                    .toString()
                    .padStart(2, '0')}:${this.second
                    .toString()
                    .padStart(2, '0')}`
            );
        },
        handleClick(evt, type, val) {
            if (this.checkDisabled(type, val).includes('is-disabled')) return;

            this[type] = parseInt(evt.target.innerHTML);
            this.$refs[type].scrollTo({ y: this[type] * 32 });

            this.$emit(
                'input',
                `${this.hour
                    .toString()
                    .padStart(2, '0')}:${this.minute
                    .toString()
                    .padStart(2, '0')}:${this.second
                    .toString()
                    .padStart(2, '0')}`
            );
        },
        checkDisabled(type, val) {
            let rst = false;
            switch (type) {
                case 'hour':
                    rst = val < this.startArr[0] || val > this.endArr[0];
                    break;
                case 'minute':
                    rst =
                        this.hour * 60 + val <
                            this.startArr[0] * 60 + this.startArr[1] ||
                        this.hour * 60 + val >
                            this.endArr[0] * 60 + this.endArr[1];
                    break;
                case 'second':
                    rst =
                        this.hour * 3600 + this.minute * 60 + val <
                            this.startArr[0] * 3600 +
                                this.startArr[1] * 60 +
                                this.startArr[2] ||
                        this.hour * 3600 + this.minute * 60 + val >
                            this.endArr[0] * 3600 +
                                this.endArr[1] * 60 +
                                this.endArr[2];
                    break;
            }
            let clsNames = [];
            clsNames.push(`${prefix}-time-table__${type}-item`);
            val == this[type] &&
                clsNames.push(`${prefix}-time-table__${type}-item--selected`);
            rst && clsNames.push('is-disabled');
            return clsNames;
        },
        setStartEnd() {
            if (this.start) {
                this.startArr = this.start.split(':').map(m => {
                    return parseInt(m);
                });
                if (this.startArr.length == 2) {
                    this.startArr.push(0);
                }
            }
            if (this.end) {
                this.endArr = this.end.split(':').map(m => {
                    return parseInt(m);
                });
                if (this.endArr.length == 2) {
                    this.endArr.push(0);
                }
            }
        }
    }
};
</script>
