<template>
    <div class="focus-image">
        <div v-swiper:mySwiper="swiperOption" class="swipe">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="focus in value" :style="{backgroundColor: focus.bgColor}">
                    <a-link :href="focus.url">
                        <img-format :src="focus.src" :w="375" :h="240"></img-format>
                    </a-link>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<client>
    import Vue from 'vue';
    import('swiper/dist/css/swiper.css');
    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr');

    Vue.use(VueAwesomeSwiper);
</client>

<script>
    import Resource from './resource';

    export default {
        name: 'ResourceFocusImage',
        props: {
            value: Array
        },
        data() {
            return {
                swiperOption: {
                    loop: true,
                    autoplay: true,
                    pagination: {
                        el: '.swiper-pagination'
                    }
                }
            }
        },
        components: {Resource}
    };
</script>

<style lang="scss">
    .focus-image {
        height: 480px;
        overflow: hidden;

        .swipe {
            position: relative;
            height: 100%;
        }

        .swiper-slide {
            a {
                display: block;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background: #e0e0e0;
            opacity: 1;
            border-radius: 0;

                &.swiper-pagination-bullet-active {
                     width: 20px;
                     background: #fff;
                }
            }
        }
</style>