<template>
	<view @click.stop="$emit('click')" class="niu-image" :class="[inline?'niu-image--inline':'']" :style="[customStyle]">
		<image v-if="preview" @click.stop="clickPreview" class="image" :mode="mode" :src="src"
			:style="{borderRadius: radius,border:border}" :class="[circle?'niu-image--circle':'']"></image>
		<image v-if="!preview" class="image" :mode="mode" :src="src" :style="{borderRadius: radius,border:border}"
			:class="[circle?'niu-image--circle':'']"></image>
	</view>
</template>

<script>
	export default {
		props: {
			mode: {
				type: String,
				default: 'scaleToFill'
			},
			radius: {
				type: String,
				default: ''
			},
			border: {
				type: String,
				default: ''
			},
			src: {
				type: String,
				default: ""
			},
			width: {
				type: String,
				default: ""
			},
			inline: {
				type: Boolean,
				default: false
			},
			height: {
				type: String,
				default: ''
			},
			circle: {
				type: Boolean,
				default: false
			},
			rect: {
				type: String,
				default: ''
			},
			preview: {
				type: Boolean,
				default: false
			},
			left: {
				type: String,
				default: ''
			},
			right: {
				type: String,
				default: ''
			},
			top: {
				type: String,
				default: ''
			},
			bottom: {
				type: String,
				default: ''
			},
			margin: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		methods: {
			clickPreview(e) {
				if (!this.preview) {
					return
				}
				uni.previewImage({
					urls: [this.src]
				})
			}
		},
		computed: {
			customStyle() {
				let style = {};
				if (this.left) {
					style.marginLeft = this.left
				}
				if (this.right) {
					style.marginRight = this.right
				}
				if (this.top) {
					style.marginTop = this.top
				}
				if (this.bottom) {
					style.marginBottom = this.bottom
				}
				if (this.margin) {
					style.margin = this.margin
				}
				let obj = {
					width: this.width ? this.width : this.rect ? this.rect : '100%',
					height: this.height ? this.height : this.rect ? this.rect : '100%',

					...style
				}
				return obj
			}
		},
	}
</script>

<style lang="scss" scoped>
	.niu-image {

		// 不要设置inline-block，会出问题
		&--circle {
			border-radius: 50%;
			overflow: hidden;
		}

		&--inline {
			display: inline-block;
			line-height: 1;
		}

		font-size: 0;

		.image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>