<template>
    <!-- AVI详情工作区轮播 -->
    <div class="swiper-pack">
        <swiper 
            :options="swiperOption" 
            ref="mySwiper">
            <!-- 钣金车 -->
            <swiper-slide>
                <SheetMetalCar></SheetMetalCar>
            </swiper-slide>
            <!-- 电泳 -->
            <swiper-slide>
                <Electroporesis></Electroporesis>
            </swiper-slide>
            <!-- 密封防腐 -->
            <swiper-slide>
                <SealedAnticorrosion></SealedAnticorrosion>
            </swiper-slide>
            <!-- 腻子 -->
            <swiper-slide>
                <Putty></Putty>
            </swiper-slide>
            <!-- 中涂 -->
            <swiper-slide>
                <MiddleCoat></MiddleCoat>
            </swiper-slide>
            <!-- 面/色漆 -->
            <swiper-slide>
                <ComplexionPaint></ComplexionPaint>
            </swiper-slide>
            <!-- 成品 -->
            <swiper-slide>
                <FinishedCar></FinishedCar>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    // 钣金车
    import SheetMetalCar from '../components/SheetMetalCar'
    // 电泳
    import Electroporesis from '../components/Electrophoresis'
    // 密封防腐
    import SealedAnticorrosion from '../components/SealedAnticorrosion'
    // 腻子
    import Putty from '../components/Putty'
    // 中涂
    import MiddleCoat from '../components/MiddleCoat'
    // 面/色漆
    import ComplexionPaint from '../components/ComplexionPaint'
    // 成品
    import FinishedCar from '../components/FinishedCar'

    export default {
        name: 'CarouselAviIndex',
        components: {
            swiper,
            swiperSlide,
            SheetMetalCar,
            Electroporesis,
            SealedAnticorrosion,
            Putty,
            MiddleCoat,
            ComplexionPaint,
            FinishedCar
        },
        data () {
            return {
                // swiper配置信息
                swiperOption: {
                    autoplay: {
                        delay: 8000,
                        loop: true
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .swiper-pack {
        min-height: 100%;
        background: rgba(0, 7, 12, 1);

        .swiper-container {

            .swiper-wrapper {

                .swiper-slide {
                    width: 1600px;
                    height: 900px;
                    overflow: hidden;
                }
            }
        }
    }
</style>