<template>
    <view class="lazy-image-wrapper" :style="{ width: width, height: height }">
        <image :src="optimizedSrc" :style="{ width: width, height: height, opacity: imageLoaded ? 1 : 0 }" :mode="mode"
            @load="onImageLoad" @error="onImageError" :lazy-load="false" :show-menu-by-longpress="false" />
        <view v-if="!imageLoaded && !showError" class="placeholder">
            <view class="loading-bg"></view>
        </view>
        <view v-if="showError" class="error-placeholder">
            <image src="/static/images/home/defaultIcon.png" :style="{ width: width, height: height }" :mode="mode" />
        </view>
    </view>
</template>

<script>
export default {
    props: {
        src: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        },
        mode: {
            type: String,
            default: 'aspectFill'
        }
    },
    data() {
        return {
            imageLoaded: false,
            showError: false
        }
    },
    computed: {
        optimizedSrc() {
            // 直接返回原图，避免无效参数
            return this.src || ''
        }
    },
    methods: {
        onImageLoad() {
            this.imageLoaded = true
            this.showError = false
        },
        onImageError() {
            this.showError = true
            this.imageLoaded = false
        }
    }
}
</script>

<style lang="less" scoped>
.lazy-image-wrapper {
    position: relative;
    overflow: hidden;

    .placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        z-index: 1;

        .loading-bg {
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
            border-radius: 4rpx;
        }
    }

    .error-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        z-index: 2;
    }

    image {
        display: block;
        transition: opacity 0.2s;
    }
}
</style>