<template>
    <view class="swiper">
        <template v-if="options.length > 1">
            <!-- 小程序自带轮播 -->
            <swiper
                :current="current"
                :style="{
                    height: maxHeight + 'px',
                }"
                previous-margin="8px"
                next-margin="8px"
                :autoplay="autoplay"
                :interval="3000"
                :duration="500"
                :circular="false"
                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: 1,
                                transform: current === index ? 'scale(1.06)' : '',
                            }"
                            class="item"
                        >
                            <card-swiper-item 
                                :item="item"
                                @cardBtnClick="cardBtnClick"
                            />
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </template>
        <view
            v-else-if="options.length === 1"
            :style="{
                height: maxHeight + 3 + 'px',
            }"
            class="item-wrapper"
        >
            <view 
                :style="{
                    width: width + 'px',
                    height: height + 'px',
                    marginLeft: gap + 'px',
                    marginRight: gap + 'px',
                    opacity: 1,
                }"
                class="item"
            >
                <card-swiper-item 
                    :item="options[0]"
                    @cardBtnClick="cardBtnClick"
                />
            </view>
        </view>
    </view>
</template>
<script>
import CardSwiperItem from './CardSwiperItem';
/**
 * @file 会员卡片轮播
 * @author jiaxiangju
 * @categories 功能组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
        CardSwiperItem
    },
    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: 0
        },
        /**
         * 数据数组
         */
        options: {
            type: Array,
            default() {
                return [];
            }
        },
        autoplay: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 当前选中索引
            current: 0,
            // 当前完成选中索引
            finishCurrent: 0
        };
    },
    methods: {
        handleSwiperChange(obj) {
            this.current = obj.detail.current;
            this.$emit('handleTap', obj.detail.current);
        },
        handleAnimationFinish(obj) {
            this.finishCurrent = obj.detail.current;
        },
        handleTapItem(index) {
            this.current = index;
            this.$emit('handleTap', index);
        },
        cardBtnClick(btnInfo) {
            if (btnInfo.btnStatus) {
                this.$emit('cardBtnTap', btnInfo);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.image {
    width: 100%;
    height: auto;
    display: block;
}
.item-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper {
    overflow: visible;
}
.swiper-item {
    overflow: visible;
    &--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;
}
.indicator-wrapper {
    display: flex;
    justify-content: center;
}

</style>
