const swiper = {
    template: `
       <section class="center-hero-section" :class="sectionClass" :style="sectionStyle">
            <div class="center-swiper-container">
                <div class="center-swiper-wrapper">
                    <div class="center-swiper-slide" v-for="(slide, index) in slides" :key="slide.id"
                        :class="{ active: currentSlide === index }"
                        :style="{ transform: 'translate3d(' + ((index - currentSlide) * 100) + '%, 0, 0)' }"
                        @click="goTopage(slide.url)">
                        <div class="center-slide-background" 
                            :style="{ 
                                backgroundImage: 'url(' + slide.background + ')',
                                transform: 'translate3d(0, 0, 0)',
                                willChange: 'transform',
                                backfaceVisibility: 'hidden'
                            }">
                        </div>
                    </div>
                </div>
                
                <!-- 箭头导航 -->
                <div class="swiper-nav-arrows">
                    <button class="swiper-arrow swiper-arrow-prev" @click.stop="prevSlide">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="swiper-arrow swiper-arrow-next" @click.stop="nextSlide">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                
                <!-- 指示点 -->
                <div class="swiper-pagination">
                    <span v-for="(slide, index) in slides" 
                          :key="'dot-' + index"
                          class="swiper-pagination-bullet"
                          :class="{ 'swiper-pagination-bullet-active': currentSlide === index }"
                          @click.stop="goToSlide(index)">
                    </span>
                </div>
            </div>
        </section>
    `,
    props: {
        // 轮播图数据
        slides: {
            type: Array,
            default() {
                return [
                    {
                        id: 1,
                        background: 'http://www.detroittechnohouse.com/2022/wzbc/ccxny/202507/W020250722760390408044_ORIGIN.jpg',
                        url: 'http://www.detroittechnohouse.com/2022/wzbc/ylfc/'
                    }, 
                    {
                        id: 2,
                        background: 'http://www.detroittechnohouse.com/2022/wzbc/ccxny/202507/W020250722760092119479_ORIGIN.jpg',
                        url: 'http://www.detroittechnohouse.com/2022/wzbc/ylfc/'
                    }, 
                    {
                        id: 3,
                        background: 'http://www.detroittechnohouse.com/2022/wzbc/ccxny/202507/W020250722759719831806_ORIGIN.jpg',
                        url: 'http://www.detroittechnohouse.com/2022/wzbc/ylfc/'
                    }, 
                ];
            }
        },
        // 自动轮播间隔（毫秒）
        autoplayDelay: {
            type: Number,
            default: 20000
        },
        // 是否启用自动轮播
        autoplay: {
            type: Boolean,
            default: true
        },
        // 是否位于页面顶部（会覆盖header）
        topPosition: {
            type: Boolean,
            default: true
        },
        // 轮播图高度
        height: {
            type: [String, Number],
            default: 300
        }
    }, 
    data() {
        return {
            currentSlide: 0,
            autoplayTimer: null,
            imageCache: new Set()
        };
    },
    computed: {
        sectionClass() {
            return {
                'swiper-top-position': this.topPosition
            };
        },
        sectionStyle() {
            const style = {
                height: typeof this.height === 'number' ? this.height + 'px' : this.height,
                transform: 'translate3d(0, 0, 0)',
                willChange: 'transform',
                backfaceVisibility: 'hidden'
            };
            
            if (this.topPosition) {
                style.top = '0px';
                style.zIndex = '1';
            }
            
            return style;
        }
    },
    mounted() {
        // 预加载所有图片
        this.preloadImages();
        
        if (this.autoplay) {
            this.startAutoplay();
        }
    },
    methods: {
        preloadImages() {
            this.slides.forEach(slide => {
                if (!this.imageCache.has(slide.background)) {
                    const img = new Image();
                    img.src = slide.background;
                    this.imageCache.add(slide.background);
                }
            });
        },
        goTopage(page, params = null) {
            // 构建目标URL
            let targetUrl = page;

            // 如果传入了参数对象
            if (params && typeof params === 'object') {
                const urlParams = new URLSearchParams();

                // 遍历参数对象，添加到URL参数中
                Object.keys(params).forEach(key => {
                    if (params[key] !== null && params[key] !== undefined && params[key] !== '') {
                        urlParams.append(key, params[key]);
                    }
                });

                // 如果有参数，添加到URL中
                if (urlParams.toString()) {
                    const separator = page.includes('?') ? '&' : '?';
                    targetUrl = `${urlParams.toString()}`;
                }
            }

            // 跳转到目标页面
            window.location.href = targetUrl;
        },

        startAutoplay() {
            if (this.autoplayTimer) {
                this.stopAutoplay();
            }
            this.autoplayTimer = setInterval(() => {
                this.nextSlide();
            }, this.autoplayDelay);
        },

        stopAutoplay() {
            if (this.autoplayTimer) {
                clearInterval(this.autoplayTimer);
                this.autoplayTimer = null;
            }
        },

        nextSlide() {
            requestAnimationFrame(() => {
                this.currentSlide = (this.currentSlide + 1) % this.slides.length;
            });
        },

        prevSlide() {
            requestAnimationFrame(() => {
                this.currentSlide = this.currentSlide === 0
                    ? this.slides.length - 1
                    : this.currentSlide - 1;
            });
        },

        goToSlide(index) {
            requestAnimationFrame(() => {
                this.currentSlide = index;
                if (this.autoplay) {
                    this.startAutoplay();
                }
            });
        }
    },

    beforeDestroy() {
        this.stopAutoplay();
        this.imageCache.clear();
    },
    
    watch: {
        slides: {
            handler(newSlides) {
                this.$nextTick(() => {
                    this.preloadImages();
                });
            },
            deep: true
        },
        autoplay(newVal) {
            if (newVal) {
                this.startAutoplay();
            } else {
                this.stopAutoplay();
            }
        }
    }
};

// 注册全局组件
Vue.component('swiper-component', swiper);