<template>
	<view class="zs-img-box">
			<image class="img1 image" v-if="!isError" :class="'lazy' + elIndex" :style="{width,height,borderRadius:radius == 'full'?'16rpx':'16rpx 16rpx 0 0' }" :src="url1" :mode='mode' @error="error"></image>
			<image class="image" v-else  :style="{width,height,borderRadius:radius == 'full'?'16rpx':'16rpx 16rpx 0 0' }" :src="defaultSrc" :mode='mode'></image>
	</view>
</template>

<script>
	import guid from '@/utils/guid.js';
	import {rpxTopx} from '@/utils/tool.js'
	export default {
		props: {
			src: {
				type: String,
				default:''
			},
			width: {
				type: String,
				default: '100rpx'
			},
			height: {
				type: String,
				default: '100rpx'
			},
			radius:{
				type: String,
				default: 'half'
			},
			mode:{
				type: String,
				default: ''
			},
			type:{
				type: String,
				default: ''
			},
			
		},
		data() {
			return {
				elIndex: guid(),
				Observer:null,
				// defaultSrc:'data:image/png;base64,[encoded data, 4508 characters]',
				defaultSrc:require('../../static/error-img.png'),
				imgSrc:require('../../static/loading-img.png'),
				
			isError:false
			}
		},
		watch: {
			src(val,old) {
				if(val != old){
					this.isError = false
					this.url1 = val
				}
			}
		},
		computed: {
			url1:{
				get:function(){
					return this.imgSrc
				},
				set:function(val){
					 this.imgSrc = val
				}
			}
		},
		methods: {
			error() {
				this.isError = true
			}
		},
		onReady() {
			this.Observer = uni.createIntersectionObserver(this)
			this.Observer.relativeToViewport({bottom: -50}).observe('.lazy' + this.elIndex, (res) => {
				if(this.type != 'hotel'){
					let width = this.width.replace('rpx','')
					this.url1 = this.src +'?x-oss-process=image/resize,w_'+ (Math.ceil(rpxTopx(width))*2 )
				}else{
					this.url1 = this.src
				}
			})
		},
		beforeDestroy() {
			this.Observer&&this.Observer.disconnect()
		}
	}
</script>

<style lang="scss" scoped>
	.zs-img-box{
		position: relative;
		.image{
			vertical-align: bottom;
			will-change: transform
		}
	}

</style>