<template>
    <view
        class="swiper">
        <!-- 小程序自带轮播 -->
        <swiper
            :current="current"
            :style="{
                height: maxHeight + 'px'
            }"
            :previous-margin="swiperMargin"
            :next-margin="swiperMargin"
            class="swiper"
            autoplay
            circular
            @change="handleSwiperChange"
            @animationfinish="handleAnimationFinish"
            :interval="2000"
            :duration="500">
            <swiper-item
                v-for="(item, index) in options"
                :key="index"
                item-id="index"
                :class="{
                    'swiper-item': index === current
                }">
                <view
                    :style="{
                        height: maxHeight + 'px'
                    }"
                    class="item-wrapper">
                    <view
                        :style="{
                            width: width + 'px',
                            height: height + 'px',
                            opacity: index === current ? 1 : 0.6,
                            transform: current === index ? 'scale(' + maxHeight / height + ')' : ''
                        }"
                        class="item">
                        <view
                            :style="{
                                width: '100%',
                                height: '100%',
                                backgroundImage: 'url(' + item.img + ')',
                                backgroundSize: 'cover'
                            }"
                            class="custom-item">
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        /**
         * 高度
         */
        height: {
            type: Number,
            default: 205
        },
        /**
         * 宽度
         */
        width: {
            type: Number,
            default: 154
        },
        /**
         * 最大高度
         */
        maxHeight: {
            type: Number,
            default: 246
        },
        /**
         * 最大宽度
         */
        maxWidth: {
            type: Number,
            default: 185
        },
        /**
         * 自定义项间距（不建议修改）；默认项间距为最大宽度减去宽度再除以二 (maxWidth - width) / 2；注：如果要设置自定义宽度，无法保证宽高比例不变
         */
        gap: {
            type: Number,
            default: 8
        },
        /**
         * 数据数组
         */
        options: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            // 屏幕宽度
            screenWidth: 0,
            // 当前选中索引
            current: 0,
            // 当前完成选中索引
            finishCurrent: 0
        };
    },
    created() {
        this.screenWidth = this.getSrceenWidth();
    },
    methods: {
        /**
         * 得到屏幕宽度
         *
         * @return {number} screenWidth 屏幕宽度
         */
        getSrceenWidth() {
            // 使用同步方法
            let systemInfo = getSystemInfo();
            return systemInfo.screenWidth;
        },
        handleSwiperChange(obj) {
            this.current = obj.detail.current;
        },
        handleAnimationFinish(obj) {
            this.finishCurrent = obj.detail.current;
        }
    },
    computed: {
        // 计算 swiper 的前后边距
        swiperMargin() {
            let swiperMargin = (this.getSrceenWidth() - this.maxWidth) / 2 + 'px';
            // 如果有自定义间距
            if (this.gap) {
                // 为了达到自定义的项边距，swiper 露出距离还要再加上 默认项间距减去自定义项间距这部分的距离
                swiperMargin = (this.getSrceenWidth() - this.maxWidth) / 2 + (this.maxWidth - this.width) / 2 - this.gap + 'px';
            }
            return swiperMargin;
        }
    }
};
</script>
<style lang="less" scoped>
.item-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper {
    overflow: hidden;
}
.item {
    transform: scale(1);
    transition: transform .5s cubic-bezier(.2, 0, .2, 1);
    opacity: .5;
}
.indicator-wrapper {
    display: flex;
    justify-content: center;
}
</style>