<template>
	<view class="serve-lists">
		<view v-for="(item, index) in info" :key="index" class="serve-lists__list">
				<view class="serve-card" @click="selectType(item)">
					<view>
						<image src="/static/images/shop/pintuan/radioYes.png" mode="aspectFill" class="serve-card-left__img"
							v-if="item.disabled"></image>
						<view class="serve-card-left" v-else>
				
						</view>
					</view>
					<view class="serve-card-right">
						<image :src="item.photo[0]" mode="aspectFill" class="serve-card-right__img"></image>
						<view class="serve-card-right__content">
							<view>
								<view class="serve-card-right__content__title">{{item.title}}</view>
								<view class="serve-card-right__content__price"><text
										style="color: #E8101E;font-weight: 500;">¥{{item.server_price}} </text> {{' '}}|
									{{item.server_time}}分钟
								</view>
							</view>
							<view class="serve-card-right__content__sales">
								销量{{ item.sales_num }}
							</view>
						
						</view>
						
					</view>
				
					
				</view>
			</view>
	</view>
	
	
</template>

<script>
	import request from "@/utils/request";
	export default {
		name: 'ServeCard',
		props: {
	
		},
		computed: {

		},
		data() {
			return {
				info:[],
				apiObj: {
					urls:{
						2:"/user/sjserverlist",
						1:"/user/syrserverlist"
					},
				},
				identityIndex: getApp().globalData.artisanType,
			}
		},
		created() {
			if(this.identityIndex){
				this.getServeList();
			}
		},
		methods: {
			selectType(item){
				item.disabled = !item.disabled 
			},
			getServeList() {
				request.post(this.apiObj.urls[this.identityIndex], {
					state: 2,
					is_promotion: 1
				}).then((res) => {
					this.info = res.data;
					//添加多选状态
					this.info.forEach(item=>{
						this.$set(item, 'disabled', false); 
					})
					console.log(this.info);
				});
			},
			getSelectedItems() {
			    // 筛选出 disabled 为 true 的项（即被选中的项）
			    return this.info.filter(item => item.disabled === true);
			}
		}
	}
</script>

<style scoped lang="scss">
	.serve-lists {
		padding: 20rpx 30rpx;
	
		&__list {
			margin-bottom: 20rpx;
		}
	}
	.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>