<template>
    <view class="preview-container">
        <!-- 右上角关闭按钮 -->
        <view class="close-btn" @click="close">
            <text class="close-icon">✕</text>
        </view>
        
        <!-- 下载按钮 -->
        <view class="download-btn" @click="downloadImage">
            <text class="download-icon">⬇️</text>
        </view>
        
        <!-- 图片预览区域，使用movable-area和movable-view实现缩放移动 -->
        <movable-area class="movable-area" :style="{ width: '100vw', height: '100vh' }">
            <movable-view
                class="movable-view"
                direction="all"
                :scale="true"
                :scale-min="0.5"
                :scale-max="3"
                :scale-value="scaleValue"
                @scale="onScale"
                :x="x"
                :y="y"
                :style="{
                    width: rotatedWidth + 'px',
                    height: rotatedHeight + 'px'
                }"
            >
                <view 
                    class="image-wrapper"
                    :style="{
                        width: imgWidth + 'px',
                        height: imgHeight + 'px',
                        transform: 'rotate(90deg)',
                        transformOrigin: 'center center'
                    }"
                >
                    <image
                        :src="imageUrl"
                        class="preview-img"
                        mode="aspectFill"
                        :style="{
                            width: imgWidth + 'px',
                            height: imgHeight + 'px'
                        }"
                        @load="onImageLoad"
                    ></image>
                </view>
            </movable-view>
        </movable-area>
        
        <!-- 图片信息提示 -->
        <view class="scale-tip" v-if="showScaleTip">
            当前缩放: {{ Math.round(scaleValue * 100) }}%
        </view>
    </view>
</template>

<script>
export default {
    onLoad(options) {
        this.imageUrl = decodeURIComponent(options.url) // 接收传递的图片URL，需要解码
    },
    
    data() {
        return {
            imageUrl: '',
            // 缩放相关
            scaleValue: 1,
            x: 0,
            y: 0,
            // 图片原始尺寸
            imgWidth: 0,
            imgHeight: 0,
            // 旋转后的尺寸（交换宽高）
            rotatedWidth: 0,
            rotatedHeight: 0,
            // 提示显示控制
            showScaleTip: false,
            tipTimer: null,
            // 屏幕尺寸
            windowWidth: 0,
            windowHeight: 0
        }
    },
    
    mounted() {
        // 获取屏幕尺寸
        const systemInfo = uni.getSystemInfoSync();
        this.windowWidth = systemInfo.windowWidth;
        this.windowHeight = systemInfo.windowHeight;
    },
    
    methods: {
        // 图片加载完成后获取尺寸
        onImageLoad(e) {
            const { width, height } = e.detail;
            
            // 保存原始尺寸
            this.imgWidth = width;
            this.imgHeight = height;
            
            // 旋转90度后，宽度和高度互换
            this.rotatedWidth = height;  // 旋转后宽度 = 原高度
            this.rotatedHeight = width;  // 旋转后高度 = 原宽度
            
            // 计算初始位置居中
            this.resetPosition();
            
            console.log('图片加载:', {width, height}, '旋转后:', {rotatedWidth: this.rotatedWidth, rotatedHeight: this.rotatedHeight});
        },
        
        // 重置位置到中心
        resetPosition() {
            // 计算居中的偏移量
            this.x = (this.windowWidth - this.rotatedWidth) / 2;
            this.y = (this.windowHeight - this.rotatedHeight) / 2;
            
            console.log('重置位置:', {x: this.x, y: this.y, windowWidth: this.windowWidth, windowHeight: this.windowHeight});
        },
        
        // 缩放事件处理
        onScale(e) {
            this.scaleValue = e.detail.scale;
            
            // 显示缩放提示
            this.showScaleTip = true;
            if (this.tipTimer) {
                clearTimeout(this.tipTimer);
            }
            this.tipTimer = setTimeout(() => {
                this.showScaleTip = false;
            }, 1500);
        },
        
        // 关闭预览
        close() {
            uni.navigateBack();
        },
        
        // 下载图片
        downloadImage() {
            uni.showLoading({
                title: '下载中...'
            });
            
            // 先获取图片信息（如果是网络图片需要先下载）
            uni.downloadFile({
                url: this.imageUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        // 保存图片到相册
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: () => {
                                uni.hideLoading();
                                uni.showToast({
                                    title: '保存成功',
                                    icon: 'success'
                                });
                            },
                            fail: (err) => {
                                uni.hideLoading();
                                console.error('保存失败', err);
                                
                                // 处理用户拒绝权限的情况
                                if (err.errMsg.includes('auth deny')) {
                                    uni.showModal({
                                        title: '提示',
                                        content: '需要您授权保存图片到相册',
                                        success: (res) => {
                                            if (res.confirm) {
                                                uni.openSetting({
                                                    success: (settingRes) => {
                                                        console.log('打开设置页面', settingRes);
                                                    }
                                                });
                                            }
                                        }
                                    });
                                } else {
                                    uni.showToast({
                                        title: '保存失败',
                                        icon: 'none'
                                    });
                                }
                            }
                        });
                    } else {
                        uni.hideLoading();
                        uni.showToast({
                            title: '下载失败',
                            icon: 'none'
                        });
                    }
                },
                fail: (err) => {
                    uni.hideLoading();
                    console.error('下载失败', err);
                    uni.showToast({
                        title: '下载失败',
                        icon: 'none'
                    });
                }
            });
        },
        
        // 双击重置缩放和位置（可选功能）
        onDoubleTap() {
            this.scaleValue = 1;
            this.resetPosition();
        }
    },
    
    // 页面返回前清理定时器
    onUnload() {
        if (this.tipTimer) {
            clearTimeout(this.tipTimer);
        }
    }
}
</script>

<style lang="scss" scoped>
.preview-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

.movable-area {
    width: 100vw;
    height: 100vh;
    background: #000;
}

.movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
}

.preview-img {
    display: block;
}

// 关闭按钮
.close-btn {
    position: fixed;
    top: 30rpx;
    right: 30rpx;
    width: 60rpx;
    height: 60rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .close-icon {
        color: #fff;
        font-size: 40rpx;
        line-height: 1;
    }
}

// 下载按钮
.download-btn {
    position: fixed;
    top: 30rpx;
    right: 110rpx;
    width: 60rpx;
    height: 60rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .download-icon {
        color: #fff;
        font-size: 40rpx;
        line-height: 1;
    }
}

// 缩放提示
.scale-tip {
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10rpx 30rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInOut 1.5s ease;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}
</style>