
<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
import CarouselItem from 'jdd-design/components/carousel-item';
export default {
    name: `${prefix}-carousel`,
    mixins: [prefixMixins],
    components: {
        CarouselItem
    },
    props: {
        width: {
            type: Number,
            default: 800
        },
        height: {
            type: Number,
            default: 400
        },
        interval: {
            type: Number,
            default: 50000
        },
        showArrow: {
            type: String,
            validator: val => {
                return ['always', 'hover', 'none'].indexOf(val) > -1;
            },
            default: 'always'
        },
        showDot: {
            type: Boolean,
            default: true
        },
        direction: {
            type: String,
            validator: val => {
                return ['horizontal', 'vertical'].indexOf(val) > -1;
            },
            default: 'horizontal'
        },
        position: {
            type: String,
            default: 'bottom'
        },
        type: {
            type: String
        }
    },
    provide() {
        return {
            jddCarousel: this
        };
    },
    data() {
        return {
            items: [],
            current: 0,
            moveStyle: null,
            isHover: false,
            finished: true
        };
    },
    computed: {
        carouselClass() {
            let clsNames = [`${prefix}-carousel`];
            this.type && clsNames.push(`${prefix}-carousel--${this.type}`);
            return clsNames;
        },
        carouselStyle() {
            let style = {};
            style.width = `${this.width}px`;
            style.height = `${this.height}px`;
            return style;
        },
        isShowArrow() {
            if (this.showArrow === 'always') return true;
            if (this.showArrow === 'hover') return this.isHover;
            if (this.showArrow === 'none') return false;
            return true;
        },
        itemWidth() {
            if (this.type === 'card') {
                return this.width / 2;
            }
            return this.width;
        },
        itemHeight() {
            return this.height;
        }
    },
    watch: {
        current: function(to, from) {
            this.scrollTo(from, to);
            this.$emit('change', to);
        },
        width: function(val) {
            this.items.forEach((m, n) => {
                m.reset(val);
            });
        }
    },
    methods: {
        scrollTo(from, to) {
            this.items.forEach((m, n) => {
                m.move(from, to);
            });
        },
        addCarouselItem(item) {
            item.index = this.items.length;
            this.items.push(item);
        },
        removeCarouselItem(item) {
            this.items.splice(this.items.indexOf(item), 1);
        },
        handleMouseEnter() {
            if (!this.timeId) return;

            this.isHover = true;
            if (this.timeId) {
                clearInterval(this.timeId);
                this.timeId = null;
            }
        },
        handleMouseOut() {
            this.isHover = false;
            this.timeId = setInterval(() => {
                this.handleRightClick();
            }, this.interval);
        },
        handleLeftClick() {
            if (!this.finished) return;
            if (this.current > 0) {
                this.current--;
            } else {
                this.current = this.items.length - 1;
            }
        },
        handleRightClick() {
            if (!this.finished) return;
            if (this.current < this.items.length - 1) {
                this.current++;
            } else {
                this.current = 0;
            }
        },
        handleGoClick(index) {
            this.current = index;
        },
        load() {
            if (this.$slots.default && this.$slots.default.length > 1) {
                this.timeId = setInterval(() => {
                    this.handleRightClick();
                }, this.interval);
                this.scrollTo(0, 0);
            }
        }
    },
    mounted() {
        this.load();
    },
    render() {
        let node = (
            <div
                class={this.carouselClass}
                onMouseover={this.handleMouseEnter}
                onMouseleave={this.handleMouseOut}
                style={this.carouselStyle}
            >
                {this.$slots.default}
                {this.showDot &&
                    this.$slots.default &&
                    this.$slots.default.length > 1 && (
                        <div
                            class={[
                                `${prefix}-carousel-bar`,
                                `${prefix}-carousel-bar--${this.position}`
                            ]}
                        >
                            {this.$slots.default.map((m, n) => {
                                return (
                                    <div
                                        class={[
                                            `${prefix}-carousel-bar-item`,
                                            { active: n == this.current }
                                        ]}
                                        key={n}
                                        onClick={() => {
                                            this.handleGoClick(n);
                                        }}
                                    />
                                );
                            })}
                        </div>
                    )}
                {this.isShowArrow &&
                    this.$slots.default &&
                    this.$slots.default.length > 1 && (
                        <div class={`${prefix}-carousel-arrow`}>
                            <div
                                class={`${prefix}-carousel-arrow-left`}
                                onClick={this.handleLeftClick}
                            >
                                <i class={`${prefix}-icon-arrow-left`} />
                            </div>
                            <div
                                class={`${prefix}-carousel-arrow-right`}
                                onClick={this.handleRightClick}
                            >
                                <i class={`${prefix}-icon-arrow-right`} />
                            </div>
                        </div>
                    )}
            </div>
        );
        return node;
    }
};
</script>