/* 縮小失敗。正在傳回未縮小的內容。
(1,5): run-time error CSS1030: Expected identifier, found 'component('
(1,5): run-time error CSS1031: Expected selector, found 'component('
(1,5): run-time error CSS1025: Expected comma or open brace, found 'component('
(145,2): run-time error CSS1019: Unexpected token, found ')'
(147,5): run-time error CSS1030: Expected identifier, found 'component('
(147,5): run-time error CSS1031: Expected selector, found 'component('
(147,5): run-time error CSS1025: Expected comma or open brace, found 'component('
(165,43): Scanner error CSS1002: Unterminated string: "len > 1
(167,40): Scanner error CSS1002: Unterminated string: " />
(353,2): run-time error CSS1019: Unexpected token, found ')'
(355,5): run-time error CSS1030: Expected identifier, found 'component('
(355,5): run-time error CSS1031: Expected selector, found 'component('
(355,5): run-time error CSS1025: Expected comma or open brace, found 'component('
(442,2): run-time error CSS1019: Unexpected token, found ')'
(444,5): run-time error CSS1030: Expected identifier, found 'component('
(444,5): run-time error CSS1031: Expected selector, found 'component('
(444,5): run-time error CSS1025: Expected comma or open brace, found 'component('
(492,2): run-time error CSS1019: Unexpected token, found ')'
(495,12): run-time error CSS1035: Expected colon, found 'POPUP'
(496,12): run-time error CSS1035: Expected colon, found 'SLIDESHOW'
(497,12): run-time error CSS1035: Expected colon, found 'SWIPER'
(498,12): run-time error CSS1035: Expected colon, found 'ZOOMIN'
(500,12): run-time error CSS1035: Expected colon, found 'values('
(505,8): run-time error CSS1030: Expected identifier, found 'freeze('
(505,8): run-time error CSS1031: Expected selector, found 'freeze('
(505,8): run-time error CSS1025: Expected comma or open brace, found 'freeze('
(507,5): run-time error CSS1030: Expected identifier, found 'component('
(507,5): run-time error CSS1031: Expected selector, found 'component('
(507,5): run-time error CSS1025: Expected comma or open brace, found 'component('
(853,2): run-time error CSS1019: Unexpected token, found ')'
 */
Vue.component('image-slideshow', {
    template: `
        <div
            class="product-image-box"
            :class="{ 'slideshow-active': isHovering }"
            @mouseenter="startCarousel"
            @mouseleave="stopCarousel"
        >
            <!-- 主圖 -->
            <img
                v-lazy-img="mainImage"
                class="main-image" />

            <!-- 輪播圖 -->
            <img
                v-show="isHovering"
                v-lazy-img="slideImageA"
                class="slide-image"
                :class="{ active: activeIndex === 0 }" />
            <img
                v-show="isHovering"
                v-lazy-img="slideImageB"
                class="slide-image"
                :class="{ active: activeIndex === 1 }" />

            <slot></slot>
        </div>
    `,
    props: {
        mainImage: {
            type: String,
            required: true,
        },
        images: {
            type: Array,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        cdnPrefixes: {
            type: Array,
            required: false,
        },
    },
    data() {
        return {
            processedImages: [],
            timer: null,
            index: 0,
            activeIndex: 0, // 輪播圖切換
            slideImageA: '',
            slideImageB: '',
            isHovering: false,
            externalFlag: false,
        };
    },
    methods: {
        // 取得正確圖片路徑
        async getImageUrl(path) {
            const resolver = new ImageResolver(this.cdnPrefixes);
            return await resolver.resolveImage(path);
        },
        // 預處理圖片
        async processImages(imgs) {
            if (!Array.isArray(imgs) || !imgs?.length) {
                this.processedImages = imgs;
                return;
            }

            if (!Array.isArray(this.cdnPrefixes) || !this.cdnPrefixes?.length) {
                this.processedImages = imgs;
                return;
            }

            const resolved = await Promise.all(imgs.map((img) => this.getImageUrl(img).catch(() => null)));

            // 過濾掉解析失敗的 null
            this.processedImages = resolved.filter(Boolean);
        },
        // 圖片是否要輪播
        checkCarousel() {
            if (this.disabled) return;

            return Array.isArray(this.processedImages) && this.processedImages.length;
        },
        // 尋找下一張輪播圖片
        next() {
            this.index = (this.index + 1) % this.processedImages.length;
            const nextImg = this.processedImages[this.index];

            if (this.activeIndex === 0) {
                this.slideImageB = nextImg;
                this.activeIndex = 1;
            } else {
                this.slideImageA = nextImg;
                this.activeIndex = 0;
            }
        },
        // 定時輪播圖片
        startCarousel() {
            if (!this.checkCarousel()) return;

            // 如果已有事件動作，不再觸發
            if (this.timer || this.externalFlag) return;

            this.isHovering = true;
            this.index = 0;

            // 初始化
            this.slideImageA = this.processedImages[0];
            this.slideImageB = this.processedImages[1] || this.processedImages[0];
            this.activeIndex = 0;

            this.timer = setInterval(this.next, 1600);
        },
        // 停止輪播
        stopCarousel() {
            if (this.externalFlag) return;

            clearInterval(this.timer);
            this.timer = null;
            this.isHovering = false;
        },
        // 外層呼叫開始輪播
        externalStartTrigger() {
            this.startCarousel();
            this.externalFlag = true;
        },
        // 外層呼叫停止輪播
        externalStopTrigger() {
            this.externalFlag = false;
            this.stopCarousel();
        },
    },
    watch: {
        images: {
            immediate: true,
            handler(newImages) {
                this.processImages(newImages);
            },
        },
    },
});

Vue.component('image-swiper', {
    template: `
        <div
            class="swiper-wrapper"
            @mouseenter.stop="toggleTimer = false"
            @mousedown.stop="mouseDown"
            @mousemove.stop="mouseMove"
            @mouseup.stop="mouseUp"
            @mouseleave.stop="mouseLeave"
            @touchstart.stop="touchStart"
            @touchmove.stop="touchMove"
        >
            <keep-alive>
                <transition :name="swiperName">
                    <div class="item">
                        <img
                            v-lazy-img="images[show]"
                            draggable="false"
                            :style="len > 1
                                ? { cursor: isDragging ? 'grabbing' : 'grab' }
                                : {}" />
                    </div>
                </transition>
            </keep-alive>
            <!-- arrows -->
            <div v-if="!disabled && arrows && len > 1">
                <div class="button-prev" @click.stop.prevent="toPrev">
                    <slot name="arrows-prev">
                        <i class="arrow-left" style="border-width: 2px 2px 0 0; border-color: #bdbdbd;"></i>
                    </slot>
                </div>
                <div class="button-next" @click.stop.prevent="toNext">
                    <slot name="arrows-next">
                        <i class="arrow-right" style="border-width: 2px 2px 0 0; border-color: #bdbdbd;"></i>
                    </slot>
                </div>
            </div>
            <!-- dots -->
            <div class="dot-group" v-if="!disabled && dots && len > 1">
                <div
                    v-for="i in visibleDots"
                    :key="i"
                    :class="{ 'active': show === i }"
                    @click.stop.prevent="changeIndex(i)"
                ></div>
            </div>
        </div>
    `,
    props: {
        images: {
            type: Array,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        isAuto: {
            type: Boolean,
            default: false,
        },
        delay: {
            type: Number,
            default: 3000,
        },
        arrows: {
            type: Boolean,
            default: true,
        },
        dots: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            isDragging: false,
            swiperName: 'swiper-next',
            show: 0,
            len: 0,
            xDown: null,
            yDown: null,
            toggleTimer: true,
        };
    },
    computed: {
        visibleDots() {
            if (this.len <= 1) return [];

            const prev = (this.show - 1 + this.len) % this.len;
            const curr = this.show;
            const next = (this.show + 1) % this.len;

            return [prev, curr, next];
        },
    },
    methods: {
        // 下一張圖
        toNext() {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.swiperName = 'swiper-next';
            this.show = this.show + 1 >= this.len ? 0 : this.show + 1;
            this.$emit('return-show', this.show);
        },
        // 上一張圖
        toPrev() {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.swiperName = 'swiper-prev';
            this.show = this.show - 1 < 0 ? this.len - 1 : this.show - 1;
            this.$emit('return-show', this.show);
        },
        // 指定圖片
        changeIndex(i) {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.show = i;
            this.$emit('return-show', this.show);
        },
        // 滑動處理
        handleMove(xUp, yUp, e) {
            if (this.disabled) return;
            if (this.len <= 1) return;
            if (this.xDown === null || this.yDown === null) return;

            const xDiff = this.xDown - xUp;
            const yDiff = this.yDown - yUp;

            if (Math.abs(xDiff) > Math.abs(yDiff)) {
                xDiff > 0 ? this.toNext() : this.toPrev();
                e?.preventDefault?.();
            }

            this.xDown = null;
            this.yDown = null;
            this.isDragging = false;
        },
        // 滑動起始點
        mouseDown(e) {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.isDragging = true;
            this.xDown = e.clientX;
            this.yDown = e.clientY;
        },
        // 滑動
        mouseMove(e) {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.handleMove(e.clientX, e.clientY, e);
        },
        // 停止滑動
        mouseUp() {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.xDown = null;
            this.yDown = null;
            this.isDragging = false;
        },
        // 停止滑動
        mouseLeave() {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.mouseUp();
            this.toggleTimer = true;
        },
        // 滑動起始點
        touchStart(e) {
            if (this.disabled) return;
            if (this.len <= 1) return;

            this.isDragging = true;
            this.xDown = e.touches[0].clientX;
            this.yDown = e.touches[0].clientY;
        },
        // 滑動
        touchMove(e) {
            if (this.disabled) return;
            if (this.len <= 1) return;

            const t = e.touches[0];
            this.handleMove(t.clientX, t.clientY, e);
        },
        // 自動輪播
        autoPlay() {
            if (!this.isAuto) return;

            setInterval(() => {
                if (this.disabled) return;

                if (this.toggleTimer) this.toNext();
            }, this.delay);
        },
    },
    mounted() {
        this.len = this.images.length;
        this.autoPlay();
    },
});

Vue.component('image-with-popup', {
    template: `
        <img
            ref="originalImg"
            v-lazy-img="src"
            @mousemove="ShowPopup"
            @mouseleave="HidePopup" />
    `,
    data() {
        return {
            throttleTimer: null,
        };
    },
    props: {
        src: { type: String, required: true },
        disabled: { type: Boolean, default: false },
        zoomInScale: { type: Number, default: 2 },
        popupWidth: { type: Number, default: 500 },
        popupHeight: { type: Number, default: 500 },
    },
    methods: {
        // 將目前滑鼠所指圖片位置，放大後顯示於 popup
        ShowPopup(event) {
            if (this.disabled) return;

            // 設定每 50 毫秒只觸發一次，如果正在等待更新，則不執行
            if (this.throttleTimer) return;
            this.throttleTimer = setTimeout(() => (this.throttleTimer = null), 50);

            // 取得圖片與滑鼠的相對位置
            const img = this.$refs.originalImg;
            const imgRect = img.getBoundingClientRect();
            const mouseX = event.clientX - imgRect.left;
            const mouseY = event.clientY - imgRect.top;

            // 計算 popup 顯示位置，避免超出螢幕所視大小
            let leftPosition = mouseX + 10;
            let topPosition = mouseY + 10;

            if (event.clientX + this.popupWidth > window.innerWidth) {
                leftPosition = mouseX - 10 - this.popupWidth;
            }

            if (event.clientY + this.popupHeight > window.innerHeight) {
                topPosition = mouseY - 10 - this.popupHeight;
            }

            // 動態建立 popup
            const popupId = 'previewPopupImg-' + this._uid;
            let popup = document.getElementById(popupId);
            let popupImg;

            if (!popup) {
                img.parentElement.style.position = 'relative'; // 上層父元素必須為 relative

                popup = document.createElement('div');
                popup.id = popupId;
                popup.className = 'preview-popup';
                popup.style.width = this.popupWidth + 'px';
                popup.style.height = this.popupHeight + 'px';

                popupImg = document.createElement('img');
                popupImg.className = 'preview-popup-img';
                popupImg.src = img.src;
                popupImg.style.transform = `scale(${this.zoomInScale})`;

                popup.appendChild(popupImg);
                img.parentElement.appendChild(popup);
            } else {
                popupImg = popup.querySelector('.preview-popup-img');
            }

            // 根據滑鼠位置設定 popupImg 的圖片位置
            const percentX = (mouseX / img.width) * 100;
            const percentY = (mouseY / img.height) * 100;
            popupImg.style.transformOrigin = `${percentX}% ${percentY}%`;

            // 設定 popup 顯示位置
            popup.style.left = leftPosition + 'px';
            popup.style.top = topPosition + 'px';
        },
        // 移除圖片 popup
        HidePopup() {
            const popup = document.getElementById('previewPopupImg-' + this._uid);
            if (popup) popup.remove();
        },
    },
});

Vue.component('image-zoom-in', {
    template: `
        <div class="zoom-container" @mousemove="OnZoom" @mouseleave="ResetZoom">
            <img
                ref="originalImg"
                v-lazy-img="src"
                class="zoom-img" />
        </div>
    `,
    data() {
        return {
            throttleTimer: null,
        };
    },
    props: {
        src: { type: String, required: true },
        disabled: { type: Boolean, default: false },
        zoomInScale: { type: Number, default: 2 },
    },
    methods: {
        // 將目前滑鼠所指圖片位置，原圖放大顯示
        OnZoom(event) {
            if (this.disabled) return;

            // 設定每 50 毫秒只觸發一次，如果正在等待更新，則不執行
            if (this.throttleTimer) return;
            this.throttleTimer = setTimeout(() => (this.throttleTimer = null), 50);

            // 取得圖片容器與滑鼠的相對位置
            const img = this.$refs.originalImg;
            const container = event.target;
            const containerRect = container.getBoundingClientRect();
            const mouseX = event.clientX - containerRect.left;
            const mouseY = event.clientY - containerRect.top;

            // 根據滑鼠位置設定 img 的圖片位置
            const percentX = (mouseX / containerRect.width) * 100;
            const percentY = (mouseY / containerRect.height) * 100;
            img.style.transform = `scale(${this.zoomInScale})`;
            img.style.transformOrigin = `${percentX}% ${percentY}%`;
        },
        // 移除圖片 popup
        ResetZoom() {
            const img = this.$refs.originalImg;
            img.style.transform = 'scale(1)';
            img.style.transformOrigin = 'center center';
        },
    },
});

class IMAGE_MODE {
    static POPUP = 'POPUP';
    static SLIDESHOW = 'SLIDESHOW';
    static SWIPER = 'SWIPER';
    static ZOOMIN = 'ZOOMIN';

    static values() {
        return [IMAGE_MODE.POPUP, IMAGE_MODE.SLIDESHOW, IMAGE_MODE.SWIPER, IMAGE_MODE.ZOOMIN];
    }
}

Object.freeze(IMAGE_MODE);

Vue.component('image-gallery', {
    template: `
        <div class="product-image-box">
            <!-- 當前預覽圖 -->
            <div style="display: flex; justify-content: center;" @click="previewImageClick">
                <image-zoom-in
                    v-if="mode === IMAGE_MODE.ZOOMIN"
                    :key="'preview_' + show"
                    :src="allImage[show].img"
                    :disabled="disabled"
                    :zoom-in-scale="zoomInScale"
                ></image-zoom-in>
                <image-swiper
                    v-else-if="mode === IMAGE_MODE.SWIPER"
                    :key="'preview_' + show"
                    :images="allImage.map(m => m.img)"
                    :disabled="disabled"
                    :is-auto="isAuto"
                    :delay="delay"
                    :arrows="arrows"
                    :dots="dots"
                    @return-show="updateShow"
                ></image-swiper>
                <image-with-popup
                    v-else-if="mode === IMAGE_MODE.POPUP"
                    :key="'preview_' + show"
                    :src="allImage[show].img"
                    :disabled="disabled"
                    :zoom-in-scale="zoomInScale"
                    style="width: 100%;"
                ></image-with-popup>
            </div>
            <!-- 縮圖列 -->
            <div class="thumbnail-bar-wrapper" v-if="thumbs">

                <!-- slider 模式 -->
                <template v-if="!thumbsFlex">
                    <!-- 箭頭 -->
                    <div
                        v-if="canScrollLeft"
                        class="float-left"
                        @click="scrollThumbnails(-1)"
                    >
                        <div class="icon-circle-arrow-left"></div>
                    </div>
                    <div
                        v-if="canScrollRight"
                        class="float-right"
                        @click="scrollThumbnails(1)"
                    >
                        <div class="icon-circle-arrow-right"></div>
                    </div>
                    <!-- 縮圖 -->
                    <div
                        ref="thumbnailBar"
                        class="thumbnail-bar"
                        @mousedown="onTrackPointerDown"
                        @touchstart="onTrackPointerDown"
                    >
                        <div
                            class="thumbnail-track"
                            :style="{ transform: 'translateX(' + translateX + 'px)' }"
                        >
                            <div
                                :ref="'thumbnailRef_' + i"
                                class="thumbnail"
                                v-for="(img, i) in allImage"
                                :key="'thumb-' + i"
                                :class="{ active: show === i }"
                                @click.prevent="onThumbnailClick(i)"
                            >
                                <div class="thumbnail-box">
                                    <img
                                        v-lazy-img="img.img"
                                        @load="onThumbnailImageLoad(i)"
                                        draggable="false" />
                                </div>
                                <div v-if="img.text" class="thumbnail-text">{{ img.text }}</div>
                            </div>
                        </div>
                    </div>
                </template>

                <!-- flex-wrap 模式 -->
                <div v-else class="thumbnail-bar-flex">
                    <div class="thumbnail-track-flex">
                        <div
                            v-for="(img, i) in allImage"
                            :key="'thumb-' + i"
                            class="thumbnail-flex"
                            :class="{ active: show === i }"
                            @click.prevent="onThumbnailClick(i)"
                        >
                            <div class="thumbnail-box">
                                <img v-lazy-img="img.img" draggable="false" />
                            </div>
                            <div v-if="img.text" class="thumbnail-text">{{ img.text }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    props: {
        mode: {
            type: String,
            required: true,
        },
        mainImage: {
            type: String | Object,
            required: true,
        },
        images: {
            type: Array,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        zoomInScale: {
            type: Number,
            default: 2,
        },
        isAuto: {
            type: Boolean,
            default: false,
        },
        delay: {
            type: Number,
            default: 3000,
        },
        arrows: {
            type: Boolean,
            default: true,
        },
        dots: {
            type: Boolean,
            default: true,
        },
        thumbs: {
            type: Boolean,
            default: false,
        },
        thumbsFlex: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            IMAGE_MODE,
            show: 0,
            isDragging: false,
            translateX: 0,
            dragMoved: false,
            thumbnailReady: false,
            thumbnailWidth: 0,
        };
    },
    computed: {
        allImage() {
            const list = [
                this.normalizeImageItem(this.mainImage),
                ...this.images.map((x) => this.normalizeImageItem(x)),
            ];

            // 過濾重複 url
            const unique = [];
            const urlSet = new Set();

            list.forEach((item) => {
                if (!urlSet.has(item.url)) {
                    urlSet.add(item.url);
                    unique.push(item);
                }
            });

            return unique.map((x) => ({
                img: x.url,
                text: x.text ?? null,
            }));
        },
        canScrollLeft() {
            if (!this.thumbnailReady) return false;

            return this.translateX < 0;
        },
        canScrollRight() {
            if (!this.thumbnailReady) return false;

            const minTranslate = this.getMinTranslate();
            return this.translateX > minTranslate;
        },
    },
    methods: {
        // 格式化 Image 資料
        normalizeImageItem(item) {
            // 若原本是 string，轉成 { url: string }
            if (typeof item === 'string') {
                return { url: item };
            }

            // 若已經是新格式 { url, text? }
            if (item && typeof item === 'object' && item.url) {
                return { url: item.url, text: item.text ?? null };
            }

            return { url: '', text: null };
        },
        // 點擊縮圖
        onThumbnailClick(i) {
            if (this.dragMoved) return;
            this.show = i;
        },
        // 點擊縮圖移動置中
        scrollToActiveThumbnail() {
            this.$nextTick(() => {
                const bar = this.$refs.thumbnailBar;
                if (!bar) return;

                const track = bar.querySelector('.thumbnail-track');
                if (!track) return;

                const activeEl = this.$refs['thumbnailRef_' + this.show];
                if (!activeEl) return;

                const containerWidth = bar.offsetWidth;
                const contentWidth = track.scrollWidth;

                const elOffsetLeft = activeEl[0].offsetLeft;
                const elWidth = activeEl[0].offsetWidth;

                // 讓目標縮圖置中
                let newTranslateX = -(elOffsetLeft - containerWidth / 2 + elWidth / 2);

                // 限制範圍
                const maxTranslate = 0;
                const minTranslate = Math.min(0, containerWidth - contentWidth);

                if (newTranslateX > maxTranslate) newTranslateX = maxTranslate;
                if (newTranslateX < minTranslate) newTranslateX = minTranslate;

                this.translateX = newTranslateX;
            });
        },
        // 計算移動距離
        getMinTranslate() {
            const bar = this.$refs.thumbnailBar;
            if (!bar) return 0;

            const track = bar.querySelector('.thumbnail-track');
            if (!track) return 0;

            const containerWidth = bar.offsetWidth;
            const contentWidth = track.scrollWidth;
            return Math.min(0, containerWidth - contentWidth);
        },
        // 拖曳動作
        onTrackPointerDown(e) {
            const isTouch = e.type === 'touchstart';
            const dragStartX = isTouch ? e.touches[0].clientX : e.clientX;
            const startTranslateX = this.translateX;

            this.isDragging = true;
            this.$refs.thumbnailBar.classList.add('dragging');
            this.dragMoved = false;

            const moveHandler = (ev) => {
                const currentX = ev.type.startsWith('touch') ? ev.touches[0].clientX : ev.clientX;
                const dx = currentX - dragStartX;
                if (Math.abs(dx) > 1) this.dragMoved = true;

                this.translateX = startTranslateX + dx;

                // 限制範圍
                const maxTranslate = 0;
                const minTranslate = this.getMinTranslate(); // 內容寬 - 視窗寬
                if (this.translateX > maxTranslate) this.translateX = maxTranslate;
                if (this.translateX < minTranslate) this.translateX = minTranslate;
            };

            const upHandler = () => {
                this.isDragging = false;
                this.$refs.thumbnailBar.classList.remove('dragging');
                if (isTouch) {
                    window.removeEventListener('touchmove', moveHandler);
                    window.removeEventListener('touchend', upHandler);
                } else {
                    window.removeEventListener('mousemove', moveHandler);
                    window.removeEventListener('mouseup', upHandler);
                }
            };

            if (isTouch) {
                window.addEventListener('touchmove', moveHandler);
                window.addEventListener('touchend', upHandler);
            } else {
                window.addEventListener('mousemove', moveHandler);
                window.addEventListener('mouseup', upHandler);
            }
        },
        // 更新 show
        updateShow(value) {
            this.show = value;
        },
        // 點擊左右箭頭滑動
        scrollThumbnails(direction) {
            const step = this.thumbnailWidth * 5; // 滑動 5 張
            const newTranslate = this.translateX - direction * step;

            const maxTranslate = 0;
            const minTranslate = this.getMinTranslate();

            this.translateX = Math.min(maxTranslate, Math.max(minTranslate, newTranslate));
        },
        // 圖片讀取後執行
        onThumbnailImageLoad(i) {
            // 只計算第 1 張載入後的寬度
            if (i !== 0) return;

            this.$nextTick(() => {
                requestAnimationFrame(() => {
                    const thumb = this.$refs['thumbnailRef_0'];
                    if (thumb && thumb[0]) {
                        this.thumbnailWidth = thumb[0].offsetWidth + 12;
                        this.thumbnailReady = true;
                    }
                });
            });
        },
        // 圖片點擊事件
        previewImageClick(event) {
            // 判斷是否點擊在 button 或其內部元素上
            const isButtonClicked = event.target.closest('[class^="button-"], [class*=" button-"]');
            if (isButtonClicked) return;

            this.$emit('preview-image-click');
        },
    },
    watch: {
        show() {
            if (!this.thumbs) return;
            this.scrollToActiveThumbnail();
        },
    },
});