<template>
	<view class="serve-card" @click="$emit('selectDetail',info.id)">
		<view v-if="showRadio">
			<image src="/static/images/shop/pintuan/radioYes.png" mode="aspectFill" class="serve-card-left__img"
				v-if="value==info.id"></image>
			<view class="serve-card-left" v-else>

			</view>
			
		</view>
		<view class="serve-card-right">
			<image :src="info.photo[0]" mode="aspectFill" class="serve-card-right__img"></image>
			<view class="serve-card-right__content">
				<view>
					<view class="serve-card-right__content__title">{{info.title}}</view>
					<view class="serve-card-right__content__price"><text
							style="color: #FF4767;font-weight: 500;">¥{{info.server_price}} </text> {{' '}}|
						{{info.server_time}}分钟
					</view>
				</view>
				<view class="serve-card-right__content__sales">
					销量{{ info.sales_num }}
				</view>
			
			</view>
			
		</view>

		
	</view>
</template>

<script>
	export default {
		name: 'ServeCard',
		props: {
			value: Number,
			info: {
				type: Object,
				default: () => ({})
			},
			showRadio: {
				type: Boolean,
				default: true
			}
		},
		model: {
			prop: "value",
			event: "selectDetail",
		},
		computed: {

		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.serve-card {
		width: 690rpx;
		padding: 20rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.serve-card-left {
			width: 32rpx;
			height: 32rpx;
			border: 4rpx solid #CDCFD2;
			border-radius: 40rpx;
			margin-left: 30rpx;
			margin-right: 24rpx;
		}

		.serve-card-left__img {
			width: 40rpx;
			height: 40rpx;
			margin-left: 30rpx;
			margin-right: 24rpx;
		}

		.serve-card-right {
			flex: 1;
			display: flex;

			&__img {
				width: 172rpx;
				height: 172rpx;
				border-radius: 24rpx;
				margin-right: 30rpx;
				flex-shrink: 0;
			}

			&__content {
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;

				&__title {
					width: 324rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					  display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
					      -webkit-box-orient: vertical; /* 垂直排列 */
					      -webkit-line-clamp: 2; /* 限制显示两行 */
					      overflow: hidden; /* 隐藏超出范围的内容 */
					      text-overflow: ellipsis; /* 使用省略号 */
				}

				&__price {
					margin-top: 18rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}

				&__sales {
					width: 100%;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}
</style>