<template>
	<view class="s-header-card">
		<zzx-icon name="location" size="14"></zzx-icon>
		<text>观山湖区第十二小学</text>
	</view>
	<view class="content">
		<view class="s-selectdate-card">
			<view class="s-title">选择日期</view>
			<view class="select-card-list">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="item-card" v-for="item in 3" @click="open_calendar">
						<view class="day">今天</view>
						<view class="date">04.23</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="s-selecttime-card">
			<view class="s-title">选择时段</view>
			<view class="select-card-list">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="item-card" :style="{background: `${check_index==index?'#F0FFBB':'#F6F6F6'}`}" v-for="(item,index) in 8" @click="check_item(index)">
						<view class="time">06：00-08：00</view>
						<view class="allowance">余82</view>
						<view class="price">￥95</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="g-userinfo-card">
			<view class="r-user">
				<view class="user-title">用户信息</view>
				<view class="invite">
					<zzx-icon name="wechat" size="16"></zzx-icon>
					<view style="margin-bottom: 8rpx;">邀请微信好友</view>
					<zzx-icon name="ashRight" size="12"></zzx-icon>
				</view>
			</view>
			<view class="user-tags">张三</view>
			<view class="r-user-list" v-for="item in 2">
				<view class="minus-user">-</view>
				<view class="r-list">
					<view class="name">张三</view>
					<view class="id-num">身份证 51**************10</view>
				</view>
			</view>
			<view class="g-adduser-btn">
				<view class="add-icon">+</view>
				<view class="add-text">添加用户</view>
			</view>
		</view>
	</view>
	<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { RouterUtils } from '@/utils/util';
	const calendar=ref();
	const check_index=ref(0)
	const toUserList = () => {
		RouterUtils.to_page('/pages/index/userList/index')
	}
	
	const open_calendar=()=>{
		calendar.value.open()
	}
	// 日历回调确认
	const confirm=(e)=>{
		console.log(e);
	}
	
	const check_item=(i)=>{
		check_index.value=i
	}
</script>

<style lang="less" scoped>
	.s-header-card {
		background: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.s-selectdate-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: linear-gradient(180deg, #FCFFF1 0%, #FFFFFF 100%);
		border-radius: 32rpx;

		.s-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.select-card-list {
			margin-top: 20rpx;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;

				.item-card {
					margin-right: 16rpx;
					display: inline-block;
					width: 104rpx;
					height: 120rpx;
					// background: #F6F6F6;
					border-radius: 16rpx;
					font-size: 24rpx;
					color: #222222;
					text-align: center;

					.day {
						padding-top: 20rpx;
					}

					.date {
						margin-top: 12rpx;
					}
				}
			}
		}
	}

	.s-selecttime-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: linear-gradient(180deg, #FCFFF1 0%, #FFFFFF 100%);
		border-radius: 32rpx;

		.s-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.select-card-list {
			margin-top: 20rpx;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;

				.item-card {
					margin-right: 16rpx;
					display: inline-block;
					width: 220rpx;
					height: 172rpx;
					background: #F6F6F6;
					border-radius: 16rpx;
					text-align: center;

					.time {
						margin-top: 30rpx;
						font-size: 24rpx;
						color: #222222;
					}

					.allowance {
						margin-top: 12rpx;
						font-size: 24rpx;
						color: #222222;
					}

					.price {
						margin-top: 12rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #FB5B5B;
					}
				}
			}
		}
	}

	.g-userinfo-card {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

		.r-user {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.user-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.invite {
				display: flex;
				align-items: center;
				gap: 8rpx;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.user-tags {
			margin-top: 20rpx;
			width: 112rpx;
			height: 40rpx;
			background: #FDD143;
			border-radius: 8rpx;
			line-height: 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			text-align: center;
			font-size: 28rpx;
			color: #222222;
		}

		.r-user-list {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			border-top: 1rpx solid #F0F0F0;
			height: 140rpx;

			.minus-user {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background: #FB5B5B;
				text-align: center;
				line-height: 20rpx;
				font-weight: 600;
				color: #fff;
				font-size: 40rpx;
			}

			.r-list {
				.name {
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				.id-num {
					font-size: 28rpx;
					color: #222222;
				}
			}
		}

		.g-adduser-btn {
			display: flex;
			height: 88rpx;
			align-items: center;
			justify-content: center;
			gap: 20rpx;
			border-top: 1rpx solid #F0F0F0;

			.add-icon {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background: #FDD143;
				font-size: 30rpx;
				font-weight: 600;
				color: #fff;
				text-align: center;
				line-height: 20rpx;
			}

			.add-text {
				font-size: 28rpx;
				color: #FDD143;
			}
		}
	}
</style>