<template>
    <resource class="focus-image">
        <awesome-swiper name="mySwiper" :reg-success="swiperSuccess" :options="swiperOption" class="swipe">
            <div class="swiper-wrapper" @click="activeLink">
                <div class="swiper-slide"
                     v-for="focus in value.data"
                     :key="focus.src"
                     :style="{backgroundColor: focus.bgColor}">
                    <img-format :src="focus.src" :w="750" :h="480"></img-format>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </awesome-swiper>
        <a-link ref="linkA" :href="activeHref" :yas="value" :yas-f="index" :yas-i="imageIndex"></a-link>
    </resource>
</template>

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

    export default {
        name: 'ResourceFocusImage',
        props: {
            value: Object,
            index: Number
        },
        data() {
            return {
                activeHref: '',
                swiperOption: {
                    loop: true,
                    autoplay: true,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    on:{
                        slideChange: this._slideChange,
                    }
                },
                itemVisibleStatus: {}
            };
        },
        computed: {
            imageIndex() {
                return this.mySwiper ? this.mySwiper.realIndex : 0;
            }
        },
        methods: {
            swiperSuccess(swiper) {
                this.mySwiper = swiper;

                // 注册成功后上报首个slide
                let param = {
                    I_INDEX: this.mySwiper.realIndex + 1,
                    P_NAME: this.$route.name,
                    F_NAME: this.value.template_name,
                    F_ID: this.value.template_id,
                    F_INDEX: this.index + 1,
                    ACTION_URL: this.value.data[this.mySwiper.realIndex].url
                };
                this.dataRecord(param);
            },
            activeLink() {
                const img = this.value.data[this.mySwiper.realIndex];

                if (img) {
                    this.activeHref = img.url;
                    this.$nextTick(() => {
                        this.$refs.linkA.click();
                    });
                }
            },
            _slideChange() {
                if (this.mySwiper) {

                    // fixed: slideChange回调执行时，realIndex为0会前后触发两次
                    if (this.mySwiper.previousIndex === this.value.data.length + 1) {
                        return;
                    }

                    let param = {
                        I_INDEX: this.mySwiper.realIndex + 1,
                        P_NAME: this.$route.name,
                        F_NAME: this.value.template_name,
                        F_ID: this.value.template_id,
                        F_INDEX: this.index + 1,
                        ACTION_URL: this.value.data[this.mySwiper.realIndex].url
                    };

                    this.dataRecord(param);
                }
            },
            dataRecord(param) {
                // index 用户父组件判断当前组件是否可见
                this.$parent.focusComponentDataRecord(this.index, param)
            }
        },
        components: {Resource}
    };
</script>

<style lang="scss">
    .focus-image {
        padding: 0 !important;
        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>