<template>
	<view>
		<view class="dynamics" v-html="$utils.stringFormatHtml(item.title)">
		</view>

		<view class="address" 
		@click.stop="openLocation(item.latitude, item.longitude)"
		v-if="item.address">
			<uv-icon size="30rpx" name="map"></uv-icon>
			<view class="text-ellipsis">
				{{ item.address }}
			</view>
		</view>

		<view class="Artworkimages">
			<view class="wrokimg" @click.stop="previewImage(images, i)" :key="i" v-for="(img, i) in images">
				<image :src="img" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {},
		},
		computed : {
			images(){
				if(!this.item.image){
					return []
				}
				return this.item.image.split(',')
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">

	.dynamics {
		margin-top: 20rpx;
		font-size: 28rpx;
		letter-spacing: 3rpx;
	}

	.address {
		font-size: 24rpx;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		background-color: #eee;
		padding: 10rpx 20rpx;
		width: fit-content;
		border-radius: 40rpx;
		max-width: calc(100% - 40rpx);
	}

	.Artworkimages {
		display: flex;
		flex-wrap: wrap;

		.wrokimg {
			margin: 10rpx;

			image {
				height: 190rpx;
				width: 190rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>