<template>
	<view class="content" style="padding-bottom: 10rpx;" :style="[theme]">
		<view class="onecontent">
			<view class="onecontent_oen flex-start">
				<input class="onecontent_oen_input" v-model="like" type="text" placeholder="请输入服务名">
				<text class="onecontent_oen_text" @click="init_fn">搜索</text>
			</view>
			<view class="onecontent_tow">
				<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
					:key="item.id" @click="orderswitch(item.id)">
					<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="towcontent">
			<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
				@click="eeInfo(item)">

				<view class="towcontentitemtow flex-start">
					<image class="towcontentitemtow_imge" :src="item.img" mode="aspectFill"></image>
					<view class="towcontentitemtow_one flex-colum-start">
						<text class="towcontentitemtow_one_one">{{item.title}}</text>
						<text class="towcontentitemtow_one_tow"><text
								style="font-size:28rpx;">¥{{item.price}}</text></text>
					</view>
					<view class="towcontentitemtow_tow">
						预约
					</view>
				</view>
				<u-overlay :show="overlayshow" @click="overlayshow = false">
					<view class="warp">
						<view class="rect flex-colum" @tap.stop>
							<view class="rectone">
								确定删除订单吗?
							</view>
							<view class="recttow flex-between">
								<view class="recttow_one" @click="cancelOrder(item)">
									确定
								</view>
								<view class="recttow_tow" @click="overlayshow = false">
									取消
								</view>
							</view>
						</view>
					</view>
				</u-overlay>
			</view>
			<view v-if="list.length==0 && is_end == true" class="flex-colum">
				<image :src="bgnothave" mode="widthFix" style="margin-top: 100rpx;">
				</image>
			</view>
			<u-loadmore :status="form.status" />
		</view>
		<bottombbar :valuebbar='1'></bottombbar>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	import bottombbar from '@/components/bottombbar.vue'
	export default {
		components: {
			bottombbar
		},
		data() {
			return {
				bgnothave: uni.getStorageSync('bgnothave'),
				list: [],
				is_end: false,
				swiperCurrent: 0,
				overlayshow: false,
				swipercurrentdata: [],
				like: '',
				lists: {
					long: '', //多少天
					start: '',
					end: '',
					weekstart: '',
					weekend: '',
				},
				form: {
					page: 1,
					status: 'loadmore',
				},

			}
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		onReachBottom() {
			this.reservationlist()
		},
		onShow() {
			this.reservationclassyy()
			this.$store.dispatch("actionsclassification");
			this.reservationlist()
		},
		onLoad(e) {
			this.swiperCurrent = e.id
			this.lists.start = dayjs(new Date()).format("YYYY-MM-DD");
			this.lists.end = dayjs(new Date(this.lists.start).getTime() + 86400000).format('YYYY-MM-DD');
		},
		methods: {
			async reservationclassyy() {
				let res = await this.api.reservationclassyy()
				this.swipercurrentdata = [...[{
					id: 0,
					name: '全部'
				}], ...res]
			},
			async reservationlist() {
				let res = await this.api.reservationlist({
					store_id: uni.getStorageSync('store_id'),
					page: this.form.page,
					like: this.like,
					service_type_id: this.swiperCurrent,
					start_time: this.lists.start,
					end_time: this.lists.end,

				})
				if (res.length == 0) {
					this.is_end = true
					this.form.status = 'nomore'
					return false;
				} else {
					this.form.status = 'loading';
					this.form.page = ++this.form.page;
					setTimeout(() => {
						this.list = [...this.list, ...res];
						if (res.length == 10) {
							this.form.status = 'loading';
						} else {
							this.is_end = true;
							this.form.status = 'nomore';
						}
					}, 500)
				}
			},
			init_fn() {
				this.list = []
				this.is_end = false
				this.form.page = 1
				this.form.status = 'loadmore'
				this.reservationlist()
			},
			orderswitch(e) {
				this.swiperCurrent = e
				this.init_fn()
			},
			eeInfo(e) { //查看订单详情
				if (uni.getStorageSync('loginuser').model_type == 'Hotel') {
					uni.pro.navigateTo('order/orderInfohotel', {
						id: e.id,
					})
				} else {
					uni.pro.navigateTo('order/orderInfo', {
						id: e.id,
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.content {
		.onecontent {
			background: #FFFFFF;
			padding: 10rpx 28rpx;

			.onecontent_oen {
				margin: 0 auto;
				width: 100%;
				height: 70rpx;
				border-radius: 36rpx;
				border: 1rpx solid var(--bg-color-button);
				padding-right: 8rpx;

				.onecontent_oen_input {
					padding-left: 32rpx;
					flex: 1;
				}

				.onecontent_oen_text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
					width: 116rpx;
					height: 56rpx;
					background: var(--bg-color-button);
					border-radius: 36rpx;
				}
			}

			.onecontent_tow {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				overflow: auto;

				.onecontent_tow_item:nth-child(1) {
					margin: 0;
				}

				.onecontent_tow_item {
					position: relative;
					margin: 0 10rpx;

					.onecontent_tow_itemtexts {
						white-space: nowrap;
						padding: 8rpx 18rpx;
						background: #F7F7F7;
						border-radius: 8rpx;
						border: 1rpx solid var(--bg-color-button);
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: var(--bg-color-button);
					}

					.onecontent_tow_itemtext {
						white-space: nowrap;
						padding: 8rpx 18rpx;
						background: #F7F7F7;
						border-radius: 8rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #999999;
					}

					// .onecontent_tow_itemtexts::after {
					// 	content: '';
					// 	position: absolute;
					// 	bottom: -10rpx;
					// 	left: 50%;
					// 	transform: translateX(-50%);
					// 	width: 19.33rpx;
					// 	height: 6.66rpx;
					// 	background: url(https://ointmentweapp.oss-cn-beijing.aliyuncs.com/image/my/order/order1.png) no-repeat;
					// 	background-size: 100% 100%;
					// }
				}
			}
		}

		.towcontent {
			padding: 0 28rpx;

			.flex-colum_image {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;

				text {
					margin-top: 30rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #666666;
				}
			}

			.towcontentitem {
				margin-top: 32rpx;
				padding: 32rpx 24rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 12rpx;

				.towcontentitemone {
					padding-bottom: 16rpx;
					border-bottom: 1px solid #F6F6F6;

					.towcontentitemone_one {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.towcontentitemone_tow {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;

						.towcontentitemone_towimage {
							margin-right: 10rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.towcontentitemtow {
					position: relative;

					.towcontentitemtow_imge {
						width: 144rpx;
						height: 144rpx;
						background: #666666;
						border-radius: 12rpx;
					}

					.towcontentitemtow_one {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-left: 32rpx;
						justify-content: space-around;
						height: 144rpx;

						.towcontentitemtow_one_one {
							width: 80%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.towcontentitemtow_one_tow {
							margin-top: 24rpx;
							font-size: 40rpx;
							font-family: Roboto-Bold, Roboto;
							font-weight: bold;
							color: #FC5F69;
						}
					}

					.towcontentitemtow_tow {
						position: absolute;
						bottom: 0rpx;
						right: 0;
						font-size: 28rpx;
						font-family: Roboto-Regular, Roboto;
						font-weight: 400;
						padding: 8rpx 30rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: bold;
						color: #FFFFFF;
						background: var(--bg-color-button);
						border-radius: 8rpx;
					}
				}

				.towcontentitemthere {
					width: 100%;
					margin-top: 16rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					flex-wrap: wrap;

					.towcontentitemthereitem {
						margin-left: 24rpx;
						padding: 8rpx 32rpx;
						font-size: 28rpx;
						border-radius: 28rpx;
					}

					.towcontentitemthereitem_one {
						background: linear-gradient(101deg, #FA8E5D 0%, #F45E4D 100%);
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.towcontentitemthereitem_tow {
						background: #F6F6F6;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #999999;
					}

					.towcontentitemthereitem_there {
						background: linear-gradient(101deg, #8083A7 0%, #4D4E64 100%);
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				padding: 40rpx 68rpx;
				width: 480rpx;
				background: #FFFFFF;
				border-radius: 42rpx;

				.rectone {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}

				.recttow {
					width: 100%;
					margin-top: 32rpx;

					.recttow_one {
						padding: 8rpx 40rpx;
						background: #FFFFFF;
						border-radius: 26rpx;
						border: 2rpx solid #999999;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.recttow_tow {
						padding: 8rpx 40rpx;
						background: #333333;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						border-radius: 26rpx;
					}
				}
			}
		}



	}
</style>