<template>
	<view class="store-card">
		<!-- 左侧图片+导航 -->
		<view class="store-left">
			<image class="store-photo" :src="store.photo || '/static/logo.png'" mode="aspectFill"></image>
			<view class="nav-btn" @click.stop="$emit('navigate', store)">
				<image class="nav-icon" src="/static/ic_navigation.png" mode="aspectFit"></image>
				<text class="nav-text">导航</text>
			</view>
		</view>

		<!-- 右侧信息 -->
		<view class="store-right">
			<view class="store-header">
				<text class="store-name">{{ store.name }}</text>
				<text class="store-type">
					{{ store.type === 'human' ? '人工洗车' : '自助洗车' }}
				</text>
			</view>
			<view class="store-row">
				<image class="row-icon" src="/static/ic_pitch.png" mode="aspectFit"></image>
				<text class="row-text">{{ store.address }}</text>
			</view>
			<view class="store-row">
				<image class="row-icon" src="/static/ic_phone.png" mode="aspectFit"></image>
				<text class="row-text">联系方式：{{ store.phone }}</text>
			</view>
			<view class="store-row coupon-row">
				<image class="row-icon" src="/static/ic_coupon.png" mode="aspectFit"></image>
				<text class="row-text">可用优惠券：{{ store.availableCouponCount || 0 }} 张</text>
				<view class="coupon-link" @click.stop="$emit('viewCoupons', store)">
					<text class="coupon-link-text">点击查看</text>
					<text class="coupon-link-arrow">›</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'StoreCard',
		props: {
			store: {
				type: Object,
				required: true
			}
		},
		emits: ['viewCoupons', 'navigate']
	}
</script>

<style scoped>
	.store-card {
		display: flex;
		background: #fff;
		border-radius: 24rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
	}

	/* 左侧 */
	.store-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 24rpx;
		flex-shrink: 0;
		background: #F5F5F5;
		border-radius: 20rpx;
		border: 2rpx solid #E8E8E8;
		overflow: hidden;
	}
	.store-photo {
		width: 180rpx;
		height: 180rpx;
	}
	.nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		width: 180rpx;
		height: 64rpx;
		background: #fff;
	}
	.nav-btn:active {
		opacity: 0.7;
	}
	.nav-icon {
		width: 32rpx;
		height: 32rpx;
	}
	.nav-text {
		font-size: 26rpx;
		color: #333;
		font-weight: 600;
	}

	/* 右侧 */
	.store-right {
		flex: 1;
		min-width: 0;
	}
	.store-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}
	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		margin-right: 12rpx;
	}
	.store-type {
		font-size: 22rpx;
		color: #E8A735;
		font-weight: 600;
		flex-shrink: 0;
	}

	/* 信息行 */
	.store-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10rpx;
		line-height: 1.5;
	}
	.row-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
		margin-top: 4rpx;
		flex-shrink: 0;
	}
	.row-text {
		font-size: 24rpx;
		color: #666;
		flex: 1;
	}

	/* 优惠券行 */
	.coupon-row {
		align-items: center;
		margin-bottom: 0;
	}
	.coupon-link {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #FFB800, #FF9500);
		padding: 6rpx 20rpx;
		border-radius: 24rpx;
		margin-left: 12rpx;
		flex-shrink: 0;
	}
	.coupon-link:active {
		opacity: 0.8;
	}
	.coupon-link-text {
		font-size: 22rpx;
		color: #fff;
		font-weight: 500;
	}
	.coupon-link-arrow {
		font-size: 24rpx;
		color: #fff;
		margin-left: 4rpx;
	}
</style>
