<template>
    <view
        class="swiper"
    >
        <!-- 小程序自带轮播 -->
        <swiper
            :current="current"
            :style="{
                height: maxHeight + 'px',
            }"
            :previous-margin="width + 'px'"
            :next-margin="width + 'px'"
            :autoplay="true"
            :interval="3000"
            :duration="1000"
            circular
            class="swiper"
            @change="handleSwiperChange"
        >
            <swiper-item
                v-for="(item, index) in options"
                :key="index"
                item-id="index"
                :class="{
                    'swiper-item--center': current === index,
                    'swiper-item--last': current !== index,
                }"
                class="swiper-item"
            >
                <view
                    :style="{
                        height: maxHeight + 'px',
                    }"
                    class="item-wrapper"
                    @tap="onSwiperItem(item)"
                >
                    <view
                        :style="{
                            width: width + 'px',
                            height: height + 'px',
                        }"
                        class="item"
                    >
                        <view
                            :style="{
                                width: '22.30vw',
                                height: '29.79vw',
                                backgroundImage: 'url(' + item.img + ')',
                                backgroundSize: '100% auto',
                                backgroundRepeat: 'no-repeat',
                            }"
                            class="custom-item"
                        >
                            <!-- icon 动效 -->
                            <image class="custom-item-icon" src="https://medactivity.cdn.bcebos.com/act618/main/main-swiperlist-icon.png"/>
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
import {navigate} from '@utils/navigate';
/**
 * @file 淡入淡出滚动
 * @author 颜廷熙
 * @categories 
 * @tags 
 */
export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        /**
         * 高度
         */
        height: {
            type: Number,
            default: 205
        },
        /**
         * 宽度
         */
        width: {
            type: Number,
            default: 154
        },
        /**
         * 最大高度
         */
        maxHeight: {
            type: Number,
            default: 246
        },
        /**
         * 数据数组
         */
        options: {
            type: Array,
            default() {
                return [];
            }
        },
        /**
         * 自动轮播
         */
        autoplay: {
            type: Boolean,
            default: false
        },
        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: '618_prima'
        }
    },
    data() {
        return {
            // 当前选中索引
            current: 0,
            // 当前完成选中索引
            finishCurrent: 0
        };
    },
    methods: {
        handleSwiperChange(obj) {
            this.current = obj.detail.current;
        },
        onSwiperItem(item) {
            navigate({
                url: item.unifiUrl,
                log: {
                    type: 'clk',
                    value: `${this.logPrefix}_swiper`,
                    ext: {
                        pd: 'act',
                        value_id: item.id
                    }
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
@keyframes breathe{
    0%{ transform: scale(.85); }
    25%{ transform: scale(1); }
    50%{ transform: scale(.85); }
    75%{ transform: scale(1); }
    100%{ transform: scale(.85); }
}
.item-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper {
    overflow: visible;
}
.swiper-item {
    overflow: visible;
    padding-bottom: 30px;
    transition: padding .3s cubic-bezier(.2, 0, .2, 1);
    // transition: padding, transform .3s cubic-bezier(.2, 0, .2, 1);
    &--center {
        padding-top: 30px;
        padding-bottom: 0;
        z-index: 2;
    }
}
.custom-item {
    margin: 0 auto;
    position: relative;
    &-icon {
        position: absolute;
        right: 2.66vw;
        top: 2px;
        width: 18px;
        height: 18px;
        animation: breathe 1.5s infinite;
    }
}
.swiper-item--last {
    transition: padding 0.3s cubic-bezier(.2, 0, .2, 1) !important;
}
.item {
    transform: scale(1);
    transition: padding .5s cubic-bezier(.2, 0, .2, 1);
}
</style>
