<!-- 免费项目 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<view class="bg-box">
			<!-- 导航 -->
			<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
				<view class="ss-flex-2 ss-col-center">
					<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
					<view style="margin-left: 15rpx; color: #fff; font-size: 28rpx">免费项目</view>
				</view>
				<view class="ss-flex-1"></view>
			</view>
			<view class="title-maney-box">免费余额(元)</view>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 5rpx;">
				<view class="ss-flex-1"></view>
				<view style="font-size: 70rpx;color: #fff;">999.00</view>
				<text class="textIcon icon-yanjing" style="font-size: 60rpx;color: #fff;margin-left: 20rpx;"></text>
				<view class="ss-flex-1"></view>
			</view>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 25rpx;">
				<view class="ss-flex-1"></view>
				<view class="bt-pay-box">去消费</view>
				<view class="ss-flex-1"></view>
			</view>
		</view>
		<view class="ss-flex-2 ss-col-center ss-row-around" style="margin-top:20rpx;">
			<view class="ss-flex-2" style="flex-wrap: wrap;min-width:170rpx;">
				<view class="text-title" style="font-size:23rpx;color:#686868;">今日获得</view>
				<view class="text-title" style="margin-top:5rpx;">
					<text style="font-size:37rpx;color:#EC1C23;">5.34</text>
					<text style="font-size:23rpx;color:#686868;">元</text>
				</view>
			</view>
			<view class="ss-flex-2" style="flex-wrap: wrap;min-width:170rpx;">
				<view class="text-title" style="font-size:23rpx;color:#686868;">昨日获得</view>
				<view class="text-title" style="margin-top:5rpx;">
					<text style="font-size:37rpx;color:#EC1C23;">52.65</text>
					<text style="font-size:23rpx;color:#686868;">元</text>
				</view>
			</view>
		</view>
		<view class="biaoti"><text class="line-info"></text> 免费项目</view>
		<view class="list-wrap" style="margin-top: 10rpx;">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view" v-for="item in listData">
					<!-- 左右布局 -->
					<view style="width: 200rpx;min-height:150rpx;">
						<image class="wh" referrerpolicy="no-referrer"
							src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
					</view>
					<!-- 上下布局 -->
					<view class="ss-flex-1" style="margin-left: 10rpx; margin-top: 5rpx">
						<!-- 服务大项 -->
						<view class="ss-flex-2 ss-col-center">
							<view>精油按摩</view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2 ss-col-center ss-row-center">
								<text class="textIcon icon-fenzhong" style="font-size: 22rpx; color: #3a4450"></text>
								<view style="font-size: 20rpx; color: #3a4450; margin-left: 10rpx; padding-top: 5rpx">
									80分钟</view>
							</view>
						</view>
						<!-- 服务小项 -->
						<view class="ss-flex-2 event-wrap" style="margin-top: 5rpx; flex-wrap: wrap">
							<view class="ss-flex-2" v-for="i in 4">
								<view class="event-box">舒缓疲劳{{ i }}</view>
								<view class="line-box2"></view>
							</view>
						</view>
						<!-- 价格以及预约 -->
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
							<view class="ss-flex-2 ss-col-center ss-row-center">
								<text class="textIcon icon-renminbi1688 icon-rmb"></text>
								<view class="maney-number-box">{{item.price}}</view>
							</view>
							<view class="ss-flex-1"></view>
							<radio
							  :checked="item.selected"
							  color="var(--ui-BG-Main)"
							  style="transform: scale(0.8)"
							  activeBackgroundColor="#FC495C"
							   @tap.stop="onAgree(item)"
							/>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="reservation-box" @click="placeOrder(item)">立即下单</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();

	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/myFeat/wallet/wallet',
		});
	};
	// 勾选同意
	const itemArr=ref([])
	function onAgree(item){
		let isExist=-1
		let listIndex=-1
		// 判断
		if(itemArr.value.length>0){
			for(let i=0;i<itemArr.value.length;i++){
				let info=itemArr.value[i]
				if(info.id==item.id){
					isExist=i
					break
				}
			}
			// 将其删除
			if(isExist>=0){
				itemArr.value.splice(isExist,1)
			}else{
				itemArr.value.push(item)
			}
		}else{
			itemArr.value.push(item)
		}
		for(let t=0;t<listData.value.length;t++){
			let info2=listData.value[t]
			if(info2.id==item.id){
				listIndex=t
				break
			}
		}
		console.log(listIndex,'ggggggg')
		if(listIndex>=0){
			listData.value[listIndex].selected=!listData.value[listIndex].selected
			console.log(listData.value[listIndex].selected,'pppppppppppppp')
		}
		console.log(itemArr.value,'wwwwwwwww')
		console.log(listData.value,'oooooooooooo')
		
	}
	// 免费项目列表
	const listData = ref([
	  {
	    id: 1,
	    price: 240,
	    allManey: 0,
	    number: 0,
		selected:false
	  },
	  {
	    id: 2,
	    price: 220,
	    allManey: 0,
	    number: 0,
		selected:false
	  },
	  {
	    id: 3,
	    price: 270,
	    allManey: 0,
	    number: 0,
		selected:false
	  },
	  {
	    id: 4,
	    price: 499,
	    allManey: 0,
	    number: 0,
		selected:false
	  },
	  {
	    id: 5,
	    price: 499,
	    allManey: 0,
	    number: 0,
		selected:false
	  },
	  {
	    id: 6,
	    price: 499,
	    allManey: 0,
	    number: 0,
		selected:false
	  },
	]);
	const placeOrder=async(item)=>{
		console.log(item,'项目信息')
		uni.reLaunch({
			url: '/pages/XDHome/technician/reservationPlaceOrder/reservationPlaceOrder',
		});
	}
	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.reservation-box {
	  font-size: 28rpx;
	  background-color: #2ab0d5;
	  padding: 20rpx;
	  color: #fff;
	  text-align: center;
	}
	
	.icon-rmb {
	  font-size: 30rpx;
	  color: #e60012;
	  font-weight: 700;
	}
	
	.maney-number-box {
	  font-size: 30rpx;
	  color: #e60012;
	  margin-left: 5rpx;
	  padding-top: 5rpx;
	  font-weight: 650;
	}
	
	.count-number {
	  font-size: 24rpx;
	  color: #555;
	  padding-left: 10rpx;
	  padding-right: 10rpx;
	  box-sizing: border-box;
	}
	
	.count-icon {
	  font-size: 30rpx;
	  color: #999;
	}
	
	.line-box2 {
	  width: 2rpx;
	  height: 25rpx;
	  background-color: #d2d3d5;
	  margin-left: 10rpx;
	  margin-right: 10rpx;
	}
	
	.event-box {
	  font-size: 22rpx;
	  color: #909295;
	  height: 30rpx;
	  line-height: 30rpx;
	  box-sizing: border-box;
	}
	
	.event-wrap {
	  width: 100%;
	  max-height: 60rpx;
	  min-height: 60rpx;
	  overflow-y: auto;
	}
	// ============
	.biaoti {
		width: 95%;
		margin-left: 2.5%;
		font-size: 28rpx;
		color: #36AFCA;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	.line-info {
		display: inline-block;
		width: 4rpx;
		height: 25rpx;
		background-color: #36AFCA;
	}

	.go-box {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #DFDFDF;
		margin-bottom: 30rpx;
	}

	.text-title {
		color: #fff;
		text-align: center;
		width: 100%;
	}

	.bottom-box {
		width: 100%;
		min-height: 140rpx;
		background-color: #5FC3D1;
		color: #fff;
	}

	.bt-pay-box {
		padding: 10rpx 100rpx;
		box-sizing: border-box;
		background-color: #fff;
		color: #36AFCA;
		border-radius: 10rpx;
		font-size: 30rpx;
	}

	.title-maney-box {
		margin-top: 25rpx;
		font-size: 35rpx;
		text-align: center;
	}

	.bg-box {
		width: 100%;
		min-height: 350rpx;
		box-sizing: border-box;
		background-color: #36AFCA;
		color: #fff;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
	  flex-grow: 1;
	  position: relative;
	  width: 95%;
	  margin-left: 2.5%;
	  box-sizing: border-box;
	}
	
	.list {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 10rpx;
	  padding: 10rpx;
	  border-radius: 15rpx;
	  background-color: #fff;
	  box-sizing: border-box;
	  padding-top: 15rpx;
	}
	
	.list-scroll-view {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  width: 100%;
	  padding-bottom: 20rpx;
	  margin-bottom: 30rpx;
	  border-bottom: 1rpx solid #999ba2;
	  box-sizing: border-box;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>