<template>
	<view>
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-titles text-main-color"></text> {{title}}
			</view>
		</view>
		<view class="cu-card case no-card solid-bottom bg-white padding-top-xs" v-for="(item, index) in list" :key="index" @click="clickCard(item)">
			<view class="cu-item shadow">
				<view v-if="item.imgs && item.imgs.length > 2" class="flex justify-between align-center multi-pic-container">
					<view class="left-view"><image class="radius-img" :src="item.imgs[0]" mode="aspectFill"></image></view>
					<view class="flex-column-between align-center right-view">
						<image class="radius-img" :src="item.imgs[1]" mode="aspectFill"></image>
						<image class="radius-img" :src="item.imgs[2]" mode="aspectFill"></image>
					</view>
				</view>
				<view v-else-if="item.imgs && item.imgs.length > 1" class="flex justify-between align-center multi-pic-container">
					<view class="left-view"><image class="radius-img" :src="item.imgs[0]" mode="aspectFill"></image></view>
					<view class="left-view"><image class="radius-img" :src="item.imgs[1]" mode="aspectFill"></image></view>
				</view>
				<view v-else-if="item.imgs && item.imgs.length" class="flex justify-between align-center multi-pic-container">
					<view class="whole-view"><image class="radius-img" :src="item.imgs[0]" mode="aspectFill"></image></view>
				</view>
				<view class="cu-item item-margin-custom">					
					<view class="content flex-sub">
						<view class="text-xl">{{item.name}}</view>
						<view class="text-sm text-gray margin-tb-xs">{{item.desc == null ? "" : item.desc}}</view>
						<view class="flex justify-between align-end">
							<view class="text-red text-sm">自营直选，不满意重新服务，全程上险</view>
							<!-- <view class="text-red text-price text-xl">{{item.goodsStandardList[0].goodsPrice}}</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "vertical-card",
		props: {
			title: '',
			list: {
				type: Array,
				default: []
			},
			multiPicMode: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		methods: {
			clickCard(item) {
				uni.$emit('clickCard', item)
			}
		}
	}
</script>

<style scoped>
	.item-margin-custom {
		margin: 10rpx 30rpx 30rpx 30rpx;
	}
	
	.multi-pic-container {
		height: 246rpx;
		overflow: hidden;
	}
	
	.multi-pic-container > .whole-view {
		width: 100%;
		height: 100%;
	}
	
	.multi-pic-container > .whole-view > image {
		width: 100%;
		height: 100%;
	}
	
	.multi-pic-container > .left-view {
		width: calc(50% - 7rpx);
		padding-left: 30rpx;
		height: 100%;
	}
	
	.multi-pic-container > .left-view > image {
		height: 100%;
		width: 100%;
	}
	
	.multi-pic-container > .right-view {
		width: calc(50% - 7rpx);
		padding-right: 30rpx;
		height: 100%;
	}
	
	.multi-pic-container > .right-view > image {
		height: calc(50% - 7rpx);
		width: 100%;
	}
	
	.radius-img {
		border-radius: 10rpx;
	}
</style>
