<template>
	<view class="hotel-card" @tap="onTap">
		<view class="hotel-card__image-wrap">
			<image 
				class="hotel-card__image" 
				:src="hotel.image || hotel.images[0]" 
				mode="aspectFill"
			/>
			<view v-if="hotel.isRecommend" class="hotel-card__tag hotel-card__tag--recommend">
				<text class="hotel-card__tag-text">推荐</text>
			</view>
			<view v-if="hotel.discount" class="hotel-card__tag hotel-card__tag--discount">
				<text class="hotel-card__tag-text">{{ hotel.discount }}折</text>
			</view>
		</view>
		
		<view class="hotel-card__content">
			<view class="hotel-card__header">
				<text class="hotel-card__name">{{ hotel.name }}</text>
				<view v-if="hotel.stars" class="hotel-card__stars">
					<text v-for="i in hotel.stars" :key="i" class="hotel-card__star">★</text>
				</view>
			</view>
			
			<view class="hotel-card__info">
				<text class="hotel-card__address">📍 {{ hotel.address }}</text>
				<text v-if="hotel.distance" class="hotel-card__distance">距{{ hotel.distanceTarget }}{{ hotel.distance }}</text>
			</view>
			
			<view class="hotel-card__tags">
				<text v-for="(tag, index) in hotel.tags" :key="index" class="hotel-card__tag-item">
					{{ tag }}
				</text>
			</view>
			
			<view class="hotel-card__footer">
				<view class="hotel-card__score">
					<text class="hotel-card__score-value">{{ hotel.score || hotel.rating }}</text>
					<text class="hotel-card__score-label">{{ hotel.scoreText || '分' }}</text>
					<text v-if="hotel.reviewCount" class="hotel-card__reviews">{{ hotel.reviewCount }}条评价</text>
				</view>
				<view class="hotel-card__price">
					<text class="hotel-card__price-symbol">¥</text>
					<text class="hotel-card__price-value">{{ hotel.price }}</text>
					<text class="hotel-card__price-unit">起</text>
					<text v-if="hotel.originalPrice" class="hotel-card__price-original">¥{{ hotel.originalPrice }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'HotelCard',
	props: {
		hotel: {
			type: Object,
			required: true,
			default: () => ({
				name: '',
				image: '',
				images: [],
				address: '',
				price: 0,
				stars: 0,
				score: 0,
				tags: [],
				isRecommend: false,
				discount: 0,
				distance: '',
				distanceTarget: '',
				originalPrice: 0,
				reviewCount: 0,
				scoreText: '分'
			})
		}
	},
	methods: {
		onTap() {
			this.$emit('tap', this.hotel)
		}
	}
}
</script>

<style lang="scss" scoped>
.hotel-card {
	background-color: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.hotel-card__image-wrap {
	position: relative;
	width: 100%;
	height: 360rpx;
}

.hotel-card__image {
	width: 100%;
	height: 100%;
}

.hotel-card__tag {
	position: absolute;
	top: 16rpx;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
}

.hotel-card__tag--recommend {
	left: 16rpx;
	background-color: #ff6b6b;
}

.hotel-card__tag--discount {
	right: 16rpx;
	background-color: #ffa940;
}

.hotel-card__tag-text {
	font-size: 22rpx;
	color: #fff;
	font-weight: 500;
}

.hotel-card__content {
	padding: 24rpx;
}

.hotel-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.hotel-card__name {
	flex: 1;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hotel-card__stars {
	display: flex;
	align-items: center;
	margin-left: 12rpx;
}

.hotel-card__star {
	font-size: 24rpx;
	color: #ffa940;
}

.hotel-card__info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.hotel-card__address {
	flex: 1;
	font-size: 24rpx;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hotel-card__distance {
	font-size: 22rpx;
	color: #007aff;
	margin-left: 16rpx;
	white-space: nowrap;
}

.hotel-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	margin-bottom: 16rpx;
}

.hotel-card__tag-item {
	padding: 4rpx 12rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	font-size: 22rpx;
	color: #666;
}

.hotel-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.hotel-card__score {
	display: flex;
	align-items: baseline;
}

.hotel-card__score-value {
	font-size: 36rpx;
	font-weight: 700;
	color: #007aff;
	margin-right: 8rpx;
}

.hotel-card__score-label {
	font-size: 22rpx;
	color: #999;
	margin-right: 12rpx;
}

.hotel-card__reviews {
	font-size: 22rpx;
	color: #999;
}

.hotel-card__price {
	display: flex;
	align-items: baseline;
}

.hotel-card__price-symbol {
	font-size: 24rpx;
	color: #ff6b6b;
	font-weight: 600;
}

.hotel-card__price-value {
	font-size: 40rpx;
	color: #ff6b6b;
	font-weight: 700;
	margin: 0 4rpx;
}

.hotel-card__price-unit {
	font-size: 22rpx;
	color: #999;
}

.hotel-card__price-original {
	font-size: 22rpx;
	color: #999;
	text-decoration: line-through;
	margin-left: 12rpx;
}
</style>