<template>
    <!-- 图片视频轮播 -->
    <div id="slider1_container" :class="ifShow ? 'slider1_container' : 'slider1_container1'">
        <div data-u="slides" class="slider1_slides" :style="slidesStyle">
            <div v-for="(item, index) in contentData" :key="index">
                <img :src="item.path" :style="slidesStyle" />
            </div>
        </div>
    </div>
</template>
<script>
import JssorSlider from "jssor-slider"
export default {
    name: "jssorSlider",
    watch: {
        contentList(data) {
            this.contentData = this.dataFormat(data);
            this.JssorSliderStart()
        },
        ifShow(newValue) {

        }
    },
    props: {
        //播放内容
        contentList: {
            type: Array,
            default: []
        },
        // 停留时间秒
        sleepTime: {
            type: Number,
            default: 3
        },
        ifShow: {
            type: Boolean,
            default: false
        },
        swiperOptions: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            //   轮播播放数据
            contentData: [],
            slidesStyle: "",
            gifReloadTime: null,
            haveGif: false
        };
    },
    methods: {
        /**
         * gif长时间加载后会不动，定时重新加载. 使用dev启动的时候会有问题,添加?会导致加载不到图片。打包后正常
         */
        gifReload() {
            this.contentData.forEach(item => {
                if (item.path.includes(".gif")) {
                    item.path = item.path.split('?')[0] + '?' + new Date().getTime();
                }
            })
        },
        /**
         * 轮播数据格式处理
         */
        dataFormat(data) {
            let result = [];
            if (data.length > 0) {
                data.forEach((item, index) => {
                    let ob = {};
                    ob.path = item.url ? item.url : item;
                    let fileName = ob.path.split("/");
                    fileName = fileName[fileName.length - 1];
                    let imgRegex = /.(jpg|jpeg|png|gif)/i;
                    let videoRegex = /.mp4/i;
                    if (imgRegex.test(fileName)) {
                        if (/.gif/i.test(fileName)) {
                            this.haveGif = true
                        }
                        ob.type = "img";
                        result.push(ob);
                    } else if (videoRegex.test(fileName)) {
                        ob.type = "video";
                        // result.push(ob);
                    } else {
                        if (ktLog && ktLog.e) {
                            ktLog.e(`${JSON.stringify(item)} 广告文件`);
                        }
                    }
                });
                if (
                    result.length < 2 &&
                    result.length > 0 &&
                    result[0].type !== "video" &&
                    !result[0].path.includes("gif")
                ) {
                    result.push(...result);
                }
            }
            if (ktLog && ktLog.i) {
                ktLog.i(`播放广告数据：${JSON.stringify(result)}`);
            }

            return result;
        },


        JssorSliderStart() {
            this.$nextTick(() => {
                let jssor_1_SlideshowTransitions = [
                    //  { $Duration: 500, $Delay: 30, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2049, $Easing: $Jease$.$OutQuad },
                    // { $Duration: 500, $Delay: 80, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Easing: $Jease$.$OutQuad },
                    { $Duration: 1000, x: -0.2, $Delay: 40, $Cols: 12, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $Jease$.$InOutExpo, $Opacity: $Jease$.$InOutQuad }, $Opacity: 2, $Outside: true, $Round: { $Top: 0.5 } },
                    // { $Duration: 1200, x: 0.2, y: -0.1, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $Jease$.$InWave, $Top: $Jease$.$InWave, $Clip: $Jease$.$OutQuad }, $Round: { $Left: 1.3, $Top: 2.5 } }
                ];
                let defaultOptions = {
                    $AutoPlay: 1,
                    $PauseOnHover: 0,
                    $Idle: this.sleepTime * 1000,
                    $SlideshowOptions: {
                        $Class: $JssorSlideshowRunner$,
                        $Transitions: jssor_1_SlideshowTransitions,
                        $TransitionsOrder: 1
                    },
                    $ArrowNavigatorOptions: {
                        $Class: $JssorArrowNavigator$
                    },
                    $BulletNavigatorOptions: {
                        $Class: $JssorBulletNavigator$
                    }
                };
                new $JssorSlider$('slider1_container', {
                    ...defaultOptions,
                    ...this.swiperOptions
                });
                if (this.gifReloadTime) {
                    clearInterval(this.gifReloadTime);
                    this.gifReloadTime = null
                }
                if (this.haveGif) {
                    this.gifReloadTime = setInterval(() => {
                        this.gifReload()
                        // 两个小时重新加载一次GIF
                    }, 1000 * 60 * 60 * 2)
                }
            })

        },
        resize() {
            this.slidesStyle = `width: ${window.innerWidth}px; height: ${window.innerHeight}px;`
        }

    },
    created() {
        this.resize()
    },
    mounted() {
        this.contentData = this.dataFormat(this.contentList);
        this.JssorSliderStart()
        // window.addEventListener("resize", this.resize);
    },
    beforeDestroy() {
        if (this.gifReloadTime) {
            clearInterval(this.gifReloadTime);
            this.gifReloadTime = null
        }
        // window.removeEventListener("resize", this.resize);
    }
};
</script>
<style scoped>
.sideshow {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ad_item {
    position: relative;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    overflow: hidden;
    transform: rotate(-45deg);
}

.slider1_container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    left: 0;
    top: 0;
}

.slider1_container1 {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: -10;
}

.slider1_slides {
    cursor: move;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
}
</style>