<!--
 * @Description: 图片组-轮播组件
 * @Date: 2020-06-29 11:32:32
 * @LastEditTime: 2020-10-10 14:49:58
 * @LastEditors: 李璕
--> 
<template>
    <div
        v-if="isShow"
        class="see-image-swiper"
        @mouseenter="pauseSwiper"
        @mouseleave="startSwiper"
        @click="swiperClick"
        :style="{
            height: wrapperHeight + 'px',
        }"
    >
        <swiper
            v-if="true"
            :auto-update="true"
            :auto-destroy="true"
            :options="swiperOption"
            @slideChange="slideChange"
            ref="appSwiper"
            :style="{
                height: wrapperHeight + 'px',
            }"
        >
            <swiper-slide
                class="see-image-swiper__wrapper"
                ref="swiper"
                v-for="(img, idx) in imageList"
                :key="img.src + idx"
                :class="{
                    'see-image-swiper__wrapper--mobile': isMobile && !isDesign,
                    'swiper-no-swiping': !isMobile,
                }"
                :data-tips="img.tips"
            >
                <template v-if="!img.src && isDesign">
                    <div class="see-image-swiper--empty__main">
                        <div class="see-image-swiper--empty__main__title">
                            轮播图
                        </div>
                        <div class="see-image-swiper--empty__main__desc">
                            支持扩展名：.png .jpg .bmp .gif
                        </div>
                    </div>
                </template>

                <img
                    class="see-image-swiper__wrapper__image"
                    :src="img.src"
                    :link="img.link"
                />
            </swiper-slide>
        </swiper>
        <div
            v-if="!isMobile && imageList.length > 1"
            class="see-image-swiper-next"
            @click.stop="goPrev"
        ></div>
        <div
            v-if="!isMobile && imageList.length > 1"
            class="see-image-swiper-prev"
            @click.stop="goNext"
        ></div>

        <div
            class="see-image-swiper__dots"
            :class="{
                'see-image-swiper__dots--mobile': isMobile,
            }"
        >
            <span
                class="swiper-pagination-bullet"
                @click="goSlide(idx)"
                v-for="(img, idx) in imageList"
                :key="idx"
                :class="{
                    'swiper-pagination-bullet-active': idx === activeIdx,
                }"
            ></span>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import permissionMixin from "./permission-mixin";
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);

let MSwiper = "";
export default {
    name: "see-image-swiper",
    mixins: [permissionMixin],
    components: {},
    props: {
        componentData: {
            required: false,
        },
    },
    data() {
        return {
            activeIdx: 0,
            show: true,
            wrapperHeight: 0,
        };
    },
    computed: {
        imageList() {
            return this.componentData.group;
        },
        isMobile() {
            return this.componentData.commonVariable.isMobile;
        },
        isDesign() {
            return this.componentData.commonVariable.pageType === "design";
        },
        swiperOption() {
            return {
                threshold: 20,
                loop: !this.isDesign,
                noSwiping: true,
                preventClicksPropagation: false,
                speed: 300,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                pagination: false,
                on: {
                    init: function () {
                        MSwiper = this;
                    },
                },
            };
        },
    },
    watch: {
        componentData: {
            immediate: true,
            handler: function (newVal, oldVal) {
                if (!this.isShow) {
                    return;
                }
                if (
                    !oldVal ||
                    this.isImagesChange(newVal.group, oldVal.group)
                ) {
                    this.show = false;
                    if (new Date() - this.date > 1000 || !this.date) {
                        this.$nextTick(() => {
                            this.wrapperHeight = 0;
                            this.setWrapperHeight();
                            this.$nextTick(() => {
                                this.show = true;
                                MSwiper.update();
                            });
                        });
                        this.date = new Date();
                    }
                }
            },
        },
    },
    created() {},
    methods: {
        async setWrapperHeight() {
            let wrapperWidth = this.$el.getBoundingClientRect().width;
            let maxHeight = this.wrapperHeight;
            for (let image of this.imageList) {
                let imageInfo = await this.getImgInfo(image.src);

                let imgheight =
                    (wrapperWidth / imageInfo.width) * imageInfo.height;
                maxHeight = imgheight > maxHeight ? imgheight : maxHeight;
            }

            this.wrapperHeight = maxHeight;
        },
        async getImgInfo(imgSrc) {
            if (!imgSrc) {
                if (!this.isMobile) {
                    return {
                        width: 206,
                        height: 118,
                    };
                }
                if (this.isMobile) {
                    return {
                        width: 166,
                        height: 100,
                    };
                }
            }
            return new Promise((resolve, reject) => {
                let image = new Image();
                image.src = imgSrc;
                image.onload = () => {
                    resolve(image);
                };
            });
        },
        goSlide(idx) {
            MSwiper.slideToLoop(idx);
        },
        goNext() {
            let swiper = this.$refs.appSwiper.swiper;
            if (swiper) {
                swiper.slideNext();
            }
        },
        goPrev() {
            let swiper = this.$refs.appSwiper.swiper;
            if (swiper) {
                swiper.slidePrev();
            }
        },
        pauseSwiper() {
            let swiper = this.$refs.appSwiper.swiper;
            if (swiper) {
                swiper.autoplay.stop();
            }
        },
        startSwiper() {
            let swiper = this.$refs.appSwiper.swiper;
            if (swiper) {
                swiper.autoplay.start();
            }
        },
        swiperClick() {
            let realIndex = MSwiper.realIndex;
            if (this.isDesign) {
                console.log("设计态不做跳转");
                return true;
            }
            if (
                realIndex !== undefined &&
                this.imageList[realIndex] &&
                this.imageList[realIndex].link
            ) {
                if (this.isMobile) {
                    location.href = this.imageList[realIndex].link;
                } else {
                    window.open(this.imageList[realIndex].link);
                }
            }
        },
        imgClick(img) {
            if (img.link && !this.isDesign) {
            }
        },
        slideChange() {
            this.activeIdx = MSwiper.realIndex;
        },
        isImagesChange(imgList1, imgList2) {
            if (imgList1.length !== imgList2.length) {
                return true;
            }
            for (let i = 0; i < imgList1.length; i++) {
                if (imgList1[i].src !== imgList2[i].src) {
                    return true;
                }
            }
            return false;
        },
    },
    mounted() {
        //this.interval = setInterval(this.ChangeImg, 3000);
        // window.addEventListener("resize", this.refreshComponents);
    },

    destroyed() {
        // window.removeEventListener("resize", this.refreshComponents);
    },
};
</script>

<style lang="scss">
.see-image-swiper {
    position: relative;
    width: 100%;
    border-radius: 4px;
    .see-image-swiper__wrapper {
        display: flex;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-direction: column;
        .see-image-swiper--empty__main {
            text-align: center;
            background: rgba(204, 204, 204, 0.15);
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .see-image-swiper--empty__main__title {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
            }
            .see-image-swiper--empty__main__desc {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.65);
            }
        }
        .see-image-swiper__wrapper__image {
            border-radius: 4px;
            width: 100%;
        }
    }
    .see-image-swiper__wrapper--mobile {
    }
    .see-image-swiper__wrapper--tips:hover::before {
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        content: attr(data-tips);
        padding: 20px;
        color: white;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        background: #000000;
        font-size: 14px;
        line-height: 23px;
    }

    .see-image-swiper__dots {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 24px;
        left: 0;
        right: 0;
        z-index: 9;
        .swiper-pagination-bullet {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            margin-right: 10px;
            outline: none;
            cursor: pointer;
            opacity: 0.6;
            background: #ffffff;
            border: 1px solid #ececec;
        }
        .swiper-pagination-bullet-active {
            width: 18px;
            background: #fff;
            border: 1px solid #ececec;
        }
    }
    .see-image-swiper__dots--mobile {
        bottom: 10px;
    }
}

.img-box-empty {
    position: relative;

    img {
        opacity: 0.15;
        background: #cccccc;
        border: 1px dashed #000000;
    }

    .img-box-empty-main {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .img-box-empty-main--title {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
        }
        .img-box-empty-main--desc {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.35);
        }
    }
}

.see-image-swiper-next {
    z-index: 2;
    background-image: url("./assets/arrow-left.svg");
    background-size: cover;
    left: 10px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}
.see-image-swiper-prev {
    z-index: 2;
    background-image: url("./assets/arrow-right.svg");
    background-size: cover;
    right: 10px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}
</style>

