<template>
    <div :class="carouselItemClass"
         :style="carousleItemStyle">
        <slot></slot>
    </div>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-carousel-item`,
    mixins: [prefixMixins],
    data() {
        return {
            actived: false,
            postion: 0,
            index: 0,
            carousleItemStyle: {},
            directionDic: {
                horizontal: {
                    direction: 'translateX',
                    postion: 'left',
                    value: this.jddCarousel.itemWidth
                },
                vertical: {
                    direction: 'translateY',
                    postion: 'top',
                    value: this.jddCarousel.itemHeight
                }
            }
        };
    },
    computed: {
        carouselItemClass() {
            let clsNames = [
                `${prefix}-carousel-item`,
                `${prefix}-carousel-item--${this.jddCarousel.direction}`
            ];
            this.jddCarousel.type &&
                clsNames.push(
                    `${prefix}-carousel-item--${this.jddCarousel.type}`
                );
            this.actived && clsNames.push('is-active');
            return clsNames;
        }
    },
    methods: {
        move(from, to) {
            if (this.jddCarousel.type === 'card') {
                this.moveCard(from, to);
                return;
            }
            this.postion = 0;
            let step = from - to;
            this.actived = this.index === from;
            let total = this.jddCarousel.items.length;

            if (from === 0 && to === total - 1) {
                step = 1;
                if (this.index === from) {
                    this.postion = 0;
                }
                if (total === 2) {
                    step = -1;
                    if (this.index !== from) {
                        this.postion = this.index;
                    }
                } else {
                    if (this.index !== from) {
                        this.postion = this.index - total;
                    }
                }
            } else if (from === total - 1 && to === 0) {
                step = -1;
                if (this.index === from) {
                    this.postion = 0;
                }
                if (total === 2) {
                    step = 1;
                    if (this.index !== from) {
                        this.postion = this.index - 1;
                    }
                } else {
                    step = -1;
                    if (this.index !== from) {
                        this.postion = this.index - from + total;
                    }
                }
            } else {
                if (this.index !== from) {
                    this.postion = this.index - from;
                } else {
                    this.postion = 0;
                }
            }
            let trans = {
                transform: `${
                    this.directionDic[this.jddCarousel.direction].direction
                }(${this.postion *
                    this.directionDic[this.jddCarousel.direction].value}px)`
            };
            this.carousleItemStyle = {
                ...trans,
                transition: 'none'
            };
            setTimeout(() => {
                this.postion = this.postion + step;
                this.actived = this.index === to;
                trans = {
                    transform: `${
                        this.directionDic[this.jddCarousel.direction].direction
                    }(${this.postion *
                        this.directionDic[this.jddCarousel.direction].value}px)`
                };
                this.carousleItemStyle = {
                    ...trans
                };
            }, 50);
        },
        moveCard(from, to) {
            this.actived = this.index === from;
            let direction = this.directionDic[this.jddCarousel.direction]
                .direction;
            let value = this.directionDic[this.jddCarousel.direction].value;
            let total = this.jddCarousel.items.length;
            let step_r = from - to;
            let step_l = step_r < 0 ? total - to + from : from - total - to;
            let step = Math.abs(step_r) > Math.abs(step_l) ? step_l : step_r;
            if (from === 0 && to === total - 1) {
                step = 1;
            }
            if (from === total - 1 && to === 0) {
                step = -1;
            }
            if (from === to && from === 0) {
                if (this.index === total - 1) {
                    this.postion = -1;
                } else {
                    this.postion = this.index;
                }
            } else {
                if (step < 0) {
                    //to right
                    if (from === 0) {
                        if (this.index === total - 1) {
                            this.postion = -1;
                        } else {
                            this.postion = this.index;
                        }
                    } else {
                        if (this.index < from - 2) {
                            this.postion = total - from + this.index;
                        } else {
                            this.postion = this.index - from;
                        }
                    }
                } else {
                    // to left
                    if (from === total - 1) {
                        if (this.index === 0) {
                            this.postion = 1;
                        } else {
                            this.postion = this.index - total + 1;
                        }
                    } else {
                        if (this.index > from + 2) {
                            this.postion = this.index - total - from;
                        } else {
                            this.postion = this.index - from;
                        }
                    }
                }
            }

            let offset_out = this.postion < 0 ? this.postion + 1 : this.postion;

            this.carousleItemStyle = {
                // width: `${this.jddCarousel.itemWidth}px`,
                // height: `${this.jddCarousel.itemHeight}px`,
                transform: `${direction}(${(this.actived ? 0.5 : offset_out) *
                    value}px) scale(${this.actived ? 1 : 0.8})`,
                transition: 'none'
            };
            setTimeout(() => {
                this.actived = this.index === to;
                if (step === 0) return;
                this.postion += step;
                let offset = this.postion < 0 ? this.postion + 1 : this.postion;

                this.carousleItemStyle = {
                    // width: `${this.jddCarousel.itemWidth}px`,
                    // height: `${this.jddCarousel.itemHeight}px`,
                    transform: `${direction}(${(this.actived ? 0.5 : offset) *
                        value}px) scale(${this.actived ? 1 : 0.8})`
                };
            }, 50);
        },
        reset(width) {
            this.directionDic.horizontal.value = this.jddCarousel.itemWidth;
            this.directionDic.vertical.value = this.jddCarousel.itemHeight;
            let trans = {
                transform: `${
                    this.directionDic[this.jddCarousel.direction].direction
                }(${this.postion *
                    this.directionDic[this.jddCarousel.direction].value}px)`
            };
            this.carousleItemStyle = {
                ...trans,
                transition: 'none'
            };
        }
    },
    inject: {
        jddCarousel: {
            default: null
        }
    },
    mounted() {
        this.jddCarousel && this.jddCarousel.addCarouselItem(this);
        this.actived = this.index === 0;
    },
    beforeDestroy() {
        this.jddCarousel && this.jddCarousel.removeCarouselItem(this);
    }
};
</script>