<template>
    <view class="swiper">
        <!-- 小程序自带轮播 -->
        <swiper
            :current="current"
            :style="{
                height: maxHeight + 'px',
            }"
            :previous-margin="width + 'px'"
            :next-margin="width + 'px'"
            :autoplay="autoplay"
            :interval="3000"
            :duration="animationDuration"
            :circular="true"
            class="swiper"
            @change="handleSwiperChange"
            @animationfinish="handleAnimationFinish"
        >
            <swiper-item
                v-for="(item, index) in options"
                :key="index"
                item-id="index"
                :class="{
                    'swiper-item--center': current === index,
                }"
                class="swiper-item"
                @tap="handleTapItem(index)"
            >
                <view
                    :style="{
                        height: maxHeight + 'px',
                    }"
                    class="item-wrapper"
                >
                    <view
                        :style="{
                            width: width + 'px',
                            height: height + 'px',
                            marginLeft: gap + 'px',
                            marginRight: gap + 'px',
                            opacity: index === current ? 1 : 0.6,
                            transform: current === index ? 'scale(' + maxHeight / height + ') translateY(2px)' : '',
                        }"
                        class="item"
                    >
                        <view
                            :style="{
                                width: '100%',
                                height: '100%',
                                backgroundImage: 'url(' + item.img + ')',
                                backgroundSize: '100% auto',
                                backgroundRepeat: 'no-repeat',
                            }"
                            class="custom-item"
                        >
                            <view v-if="item.rankMinusPrice" class="item__tag">
                                直降
                                <view style="font-weight: 550">¥{{ item.rankMinusPrice }}</view>
                            </view>
                            <view v-else class="item__tag">
                                限时
                                <view>优惠</view>
                            </view>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
/**
 * @file 淡入淡出滚动
 * @author xueyanhui
 * @categories 功能组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {},
    props: {
        /**
         * 高度
         */
        height: {
            type: Number,
            default: 246
        },
        /**
         * 宽度
         */
        width: {
            type: Number,
            default: 180
        },
        /**
         * 最大高度
         */
        maxHeight: {
            type: Number,
            default: 308
        },
        /**
         * 最大宽度
         */
        maxWidth: {
            type: Number,
            default: 226
        },
        /**
         * 自定义项间距（不建议修改）；默认项间距为最大宽度减去宽度再除以二 (maxWidth - width) / 2；注：如果要设置自定义宽度，无法保证宽高比例不变
         */
        gap: {
            type: Number,
            default: 4
        },
        /**
         * 数据数组
         */
        options: {
            type: Array,
            default() {
                return [];
            }
        },
        autoplay: {
            type: Boolean,
            default: false
        }
    },
    data() {
        Object.assign(this, {
            // 加锁，防止动画过程中点击出现闪屏
            lock: false
        });

        return {
            // 当前选中索引
            current: 0,
            // 当前完成选中索引
            finishCurrent: 0,
            // 动画执行时长
            animationDuration: 500
        };
    },
    methods: {
        handleSwiperChange(obj) {
            this.current = obj.detail.current;
            this.$emit('handleTap', obj.detail.current);
        },
        handleAnimationFinish(obj) {
            this.finishCurrent = obj.detail.current;
        },
        handleTapItem(index) {
            // 锁
            if (this.lock) return;
            if (this.timer) clearTimeout(this.timer);

            // 加锁
            this.lock = true;
            this.current = index;

            // 在duration的 1.3 倍秒后 可再次点击
            this.timer = setTimeout(() => {
                this.lock = false;
                this.timer = null;
            }, this.animationDuration * 1.3);

            this.$emit('handleTap', index);
        }
    }
};
</script>
<style lang="less" scoped>
.item-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper {
    overflow: visible;
}
.swiper-item {
    overflow: visible;
    border-radius: 8px;
    &--center {
        z-index: 2;
    }
}
.item {
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
    opacity: 0.5;
    position: relative;

    &__tag {
        width: 40%;
        height: 30px;
        line-height: 13px;
        color: #fff;
        font-size: 10px;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
    }
}
.indicator-wrapper {
    display: flex;
    justify-content: center;
}
.custom-item {
    border-radius: 10px;
}
</style>
