<template>
	<view class="waterfall-item-container">
		<view class="waterfall-item" @tap="onTap">
			<image :src="params.image" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
			<view class="content">
				<view>{{params.name}}</view>
                <view>{{params.msg}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"helangWaterfallItem",
		options:{
			virtualHost: true
		},
		props:{
			params:{
				type: Object,
				default(){
					return {}
				}
			},
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-container').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height",height,this.$props.tag);
				}).exec();
			},
			onTap(){
				this.$emit("click",this.$props.index,this.$props.tag);
			}
		}
	}
</script>

<style lang="scss" scoped>
.waterfall-item{
    width: 100%; background: #fff; border-radius: 10rpx;
	image{ display: block; width: 100%; height: 350rpx; border-radius: 10rpx 10rpx 0 0; }
    .content{
        width: 100%; height: 160rpx; box-sizing: border-box; padding: 20rpx 20rpx 0;
        view{
            &:nth-child(1){ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            &:nth-child(2){ margin-top: 10rpx; line-height: 34rpx; height: 68rpx; color: #999; font-size: 24rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
        }
    }
}
</style>
