<template>
	<view>
		<!-- 店铺列表 -->
		<!-- @scrolltolower="loadMore"
		  refresher-enabled
		  :refresher-triggered="isRefreshing"
		  @refresherrefresh="onRefresh" -->
		<scroll-view scroll-y class="shop-list">
			<view class="shop-item" v-for="(shop, index) in shopList" @click.stop="goToArtisan($event,shop.id)"
				:key="shop.id">
				<!-- 店铺信息 -->
				<view class="shop-header">
					<view class="shop-title">
						<view class="shop-title__left">
							<image :src="shop.head_photo" class="head-photo" mode="aspectFill"></image>
							<text class="title-text">{{shop.name}}</text>
						</view>

						<view class="shop-distance" v-if="shop.distance>=0">
							<text class="shop-distance__left">距您</text>
							<text class="shop-distance__right">{{shop.distance.toFixed(2)}}km</text>
						</view>
						<!-- <image v-if="shop.verified" src="/static/images/verified.png" class="verified-icon" mode="aspectFit"></image> -->
					</view>
					<view class="shop-info">
						<view class="shop-info-left">
							<!-- <view class="rating">
				    <view class="rating-stars">
				      <image v-for="i in 5" :key="i" src="/static/images/star_y.png" class="star-icon" mode="aspectFit"></image>
				    </view>
				    <text class="rating-score">{{shop.rating}}</text>
				  </view> -->
							<!-- <text class="divider">|</text> -->
							<text class="shop-tags" v-for="(tag,i) in shop.servers_kill_arr">
								{{tag}}
							</text>
						</view>


					</view>
				</view>

				<!-- 服务列表 -->
				<scroll-view scroll-x="true">
					<view class="service-list">
						<view class="service-item" v-for="(item, index) in shop.servers_list" :key="index"
							@click.stop="onServiceClick($event,item)">
							<image :src="item.photo[0]" mode="aspectFill" class="service-image" lazy-load></image>
							<view class="service-info">
								<view class="service-title">
									<image
									  class="service-title-type"
									  mode="widthFix"
									  src="@/static/images/shop/pintuan/group.png"
									  v-if="item.team_buy && Object.keys(item.team_buy).length != 0"
									></image>
									<text class="service-title-text">
										{{ item.title }}
									</text>
									
								</view>
								<view class="service-price" v-if=" item.team_buy && Object.keys(item.team_buy).length != 0">
									<text class="price-text">拼团价:</text>
									<text class="price-symbol">¥</text>
									<text class="price-value"        :style="{
                'font-size': `${formatPriceSize(item.server_price, 30, 5)}rpx`,
              }">{{ item.team_buy.price }}</text>
								</view>
								<view class="service-price" v-else>
									<text class="price-symbol">¥</text>
									<text class="price-value">{{ item.server_price }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "shop-list",
		props: {
			// 服务列表数据
			shopList: {
				type: Array,
				default: () => []
			},
			// 是否显示多图布局
			isRefreshing: {
				type: Boolean,
				default: false
			}
			// 手艺人或商家

		},
		data() {
			return {

			};
		},
		methods: {
			onServiceClick(e, service) {
				console.log('service', service)
				// #ifdef APP-PLUS
				e.preventDefault();
				e.stopPropagation();
				// #endif
				this.$emit('service-click', service)
			},
			goToArtisan(e, id) {
				// #ifdef APP-PLUS
				e.preventDefault();
				e.stopPropagation();
				// #endif
				this.$emit('go-artisan', id)
			},
		}
	}
</script>

<style scoped lang="less">
	.shop-item {
		width: 750rpx;
		background-color: #FFFFFF;
		margin-bottom: 24rpx;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
	}

	.shop-header {
		margin-bottom: 20rpx;
	}

	.shop-title {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;

		&__left {
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 12rpx;
		}

	}

	.head-photo {
		width: 56rpx;
		height: 56rpx;
		margin-right: 10rpx;
		border-radius: 28rpx;
	}

	.title-text {
		font-size: 32rpx;
		color: #333;
		max-width: 400rpx;
		font-weight: 500;
		margin-right: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		/* 显示的行数 */
		lines: 1;
	}

	.verified-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.shop-info {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
	}

	.shop-info-left {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.rating {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.rating-score {
		color: #FF94B4;
		margin-right: 8rpx;
	}

	.rating-stars {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-right: 8rpx;
	}

	.star-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}

	.divider {
		color: #EEEEEE;
		margin: 0 16rpx;
	}

	.shop-tags {
		color: #999;
		padding-left: 8rpx;
	}

	.shop-distance {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		&__left {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			margin-right: 8rpx;
		}

		&__right {
			font-weight: 500;
			font-size: 26rpx;
			color: #666666;
			line-height: 37rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.service-list {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		box-sizing: border-box;
		gap: 24rpx;
	}

	.service-item {
		position: relative;
		width: 180rpx;
		/* height: 304rpx; */
	}

	.service-image {
		width: 180rpx;
		height: 180rpx;
		background-color: #000000;
		border-radius: 20rpx;
		display: block;
	}

	/* .service-tag {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  background-color: #FF94B4;
  color: #FFFFFF;
  font-size: 24rpx;
  padding: 6rpx 14rpx;
  border-radius: 20rpx 0 20rpx 0;
} */

	.service-info {
		flex: 1;
		padding-top: 12rpx;
		box-sizing: border-box;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}

	.service-title {
	  margin-bottom: 16rpx;
	   font-weight: 400;
	  	 font-size: 28rpx;
	  	 color: #000000;
	  	 line-height: 28rpx;
	  	 text-align: left;
	  	 font-style: normal;
	  
	  /* 关键：使用flex布局让子元素同行显示 */
	  display: flex;
	  align-items: center;
	  
	  .service-title-type {
	    width: 50rpx;
	    /* 图片与文字之间的间距 */
	    margin-right: 8rpx;
	  }
	  
	  .service-title-text {
	    /* 关键：移除固定宽度，使用flex自动分配剩余空间 */
	    flex: 1;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	  }
	}

	.service-price {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: baseline;
	
	}
	
	.price-text{
		font-weight: 500;
		font-size: 24rpx;
		color: #E8101E;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
	}

	.price-symbol {
		font-weight: 500;
		font-size: 20rpx;
		color: #E8101E;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
	}

	.price-value {
		font-weight: 500;
		font-size: 30rpx;
		color: #E8101E;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
			
	}

	/* H5适配 */
	/* #ifdef H5 */
	.nearby-page {
		/* padding-top: 88rpx; */
	}

	/* #endif */

	/* APP适配 */
	/* #ifdef APP-PLUS */
	.shop-item {
		transform: translateZ(0);
	}

	/* #endif */

	/* 小程序适配 */
	/* #ifdef MP-WEIXIN */
	/* .nearby-page {
  padding-top: calc(88rpx + constant(safe-area-inset-top));
  padding-top: calc(88rpx + env(safe-area-inset-top));
} */
	/* #endif */
</style>