<template>
	<view class="zs-img-box">
			<image class="img1" 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 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: ''
			},
			
		},
		data() {
			return {
				elIndex: guid(),
				Observer:null,
				defaultSrc:'data:image/png;base64,[encoded data, 4508 characters]',
				imgSrc:require('../../static/img-loading.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) => {
				let width = this.width.replace("px","").replace("r","");
				let height = this.height.replace("px","").replace("r","");
				width = 4*width
				height = 4*height
			  this.url1 = this.src +'?x-oss-process=image/resize,m_fixed,w_'+ Math.ceil(rpxTopx(width))+',h_'+ Math.ceil(rpxTopx(height))
			})
		},
		beforeDestroy() {
			this.Observer&&this.Observer.disconnect()
		}
	}
</script>

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

</style>