<template>
	<view class="container" :class="{'popupShow':filterShow}">
		<custom-navbar title="订工位" :showBack="true" backgroundColor="#FFFFFF"></custom-navbar>
		<view class="flexed" :style="{top:`${statusBarHeight*2 + 88}rpx`}">
			<!-- 搜索框 -->
			<view class="headerBox">
				<view class="search-box">
					<input type="text" class="search-inp" placeholder="工时名称" placeholder-class="placeholder"
						v-model="title" @confirm="refreshList" />
					<image src="/static/home/search.png" class="search-icon" mode="aspectFit" @click="refreshList">
					</image>
				</view>
			</view>

			<!-- 状态标签 -->
			<!-- 一级Tab -->
			<scroll-view scroll-x class="main-tab-scroll" :show-scrollbar="false">
				<view class="main-tabs">
					<view v-for="(tab, idx) in tabs" :key="tab.id" :class="[
              'main-tab',
              { active: queryData.first_class_id == tab.id },
            ]" @click="getFirstlist(tab,idx)">
						<text class="tab-text">{{ tab.title }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 二级icon分类 -->
			<view style="height: 204rpx;overflow: hidden;background: #fff;">
				<scroll-view scroll-x class="icon-tab-scroll" v-if="tabs.length > 0">
					<view class="icon-tabs">
						<view v-for="(item, idx) in tabs[tabsIndex].data" :key="item.id" class="icon-tab"
							:class="{active: queryData.second_class_id == item.id}" @click="getSecondlist(item)">
							<image :src="item.photo" class="icon-img" mode="aspectFill"></image>
							<text class="icon-text">{{ item.title }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="filter">
				<view class="filter__left">
					<view class="filter__text" @click="showTimeFilter = !showTimeFilter">服务时间</view>
					<image src="/static/images/icons/triangle_down.png" class="filter-icon" />
				</view>
				<view class="filter__right">
					<view class="filter__text" @click="openFilter">筛选</view>
					<image src="/static/images/icons/triangle_down.png" class="filter-icon" />
				</view>
			</view>
			<!-- 服务时间选择 -->
			<view class="filter__left__select__bj" @click="showTimeFilter = false" v-show="showTimeFilter"></view>
			<view class="filter__left__select" :class="{ show: showTimeFilter }">
				<view v-for="(item, index) in serviceHours" :key="item.id" @click="selctServiceHours(item, index)"
					:class="[
            `filter__left__select__item`,
            { active: serviceHoursIndex === item.id },
          ]">
					<view class="filter__left__select__item__title">{{ item.title }}
						<image v-if="serviceHoursIndex === item.id" src="/static/images/icons/active.png"
							class="filter__left__select__item__title__icon" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="server-list" v-if="serverlist.length">
			<buy-order-card v-for="(item, index) in serverlist" :key="index" :info="item"
				@placeOrder="placeOrder"></buy-order-card>
		</view>
		<!-- 暂无数据 -->
     	<noData v-else></noData>
		<filterPopup ref="filterPopup" @change="filterChange" :filterListSelectLists="filterListSelectLists"
			@reset="resetFilter" @sure="sureFilter">
			<filterCard :info="filterDetailsLists[0]" @selectDetail="selectDetailTime"
				:infoDetailList="infoDetailLists[0]">
				<view class="time-customize" @click="openTimePopup"> {{ customizeTime?customizeTime:'自定义' }} </view>
			</filterCard>
			<filterCard :info="filterDetailsLists[1]" @selectDetail="selectDetailPrice" :isSingle="true"
				:infoDetailList="infoDetailLists[1]">
				<view class="price-input">
					<input type="number" v-model="start_price" placeholder="最低价" class="price-input-field" />
					<text class="price-separator"></text>
					<input type="number" v-model="end_price" placeholder="最高价" class="price-input-field" />
				</view>
			</filterCard>
			<filterCard :info="filterDetailsLists[2]" @selectDetail="selectDetailSort" :isSingle="true" :infoDetailList="infoDetailLists[2]"> </filterCard
				>
		</filterPopup>
		<timePicker ref="timePopup" @confirmTime="confirmTime"></timePicker>
	</view>
</template>

<script>
	import timePicker from 'components/time-picker/time-picker.vue';
	import filterPopup from "../../../components/filter-popup/filter-popup.vue";
	import request from "@/utils/request";
	import buyOrderCard from "./components/buyOrderCard.vue";
	import filterCard from "components/filterCard/filterCard.vue";
	export default {
		name: "buyWorkstation",
		data() {
			return {
				statusBarHeight:0,
				isLoad: true, //加载完成
				count: 0,
				customizeTime: "", // 自定义时间
				showTimeFilter: false, // 服务时间选择显示状态
				title: "", // 搜索标题
				tabs: [],
				tabsIndex: 0, // 当前选中的分类索引
				queryData: {
					page: 1,
					limit: 10,
				},
				start_price: null,
				end_price: null,
				filterListId: null,
				infoDetailLists: [], // 筛选列表选择项
				filterListSelectLists: [], // 筛选列表选择状态
				filterDetailsLists: [{
						id: 1,
						title: "营业时间",
						details: [{
								id: 1,
								name: "营业中",
								value: ""
							},
							{
								id: 2,
								name: "24小时营业",
								value: "00:00-23:59"
							},
							{
								id: 3,
								name: "9-12时",
								value: "9:00-12:00"
							},
							{
								id: 4,
								name: "12-14时",
								value: "12:00-14:00"
							},
							{
								id: 5,
								name: "14-18时",
								value: "14:00-18:00"
							},
							{
								id: 6,
								name: "18-24时",
								value: "18:00-23:59"
							},
							{
								id: 7,
								name: "0-9时",
								value: "0:00-12:00"
							},
						],
					},
					{
						id: 2,
						title: "价格",
						details: [{
								id: 1,
								name: "0-10元",
								value: "0-10"
							},
							{
								id: 2,
								name: "10-30元",
								value: "10-30"
							},
							{
								id: 3,
								name: "30-50元",
								value: "30-50"
							},
							{
								id: 4,
								name: "50-100元",
								value: "50-100"
							},
							{
								id: 5,
								name: "100-300元",
								value: "100-300"
							},
							{
								id: 6,
								name: "300+",
								value: "300-"
							},
						],
					},
					{
						id: 3,
						title: "排序",
						details: [{
								id: 1,
								name: "价格最低",
								value: "1"
							},
							{
								id: 2,
								name: "价格最高",
								value: "2"
							},
							{
								id: 3,
								name: "销量最高",
								value: "3"
							},
						],
					},
				],
				serviceHours: [{
						id: 1,
						title: "今日可约",
					},
					{
						id: 2,
						title: "近两日可约",
					},
					{
						id: 3,
						title: "近三日可约",
					},
				], // 服务工时列表
				serviceHoursIndex: null, // 当前选中的服务工时索引
				serverlist: [],
				filterShow: false,
			};
		},
		components: {
			filterPopup,
			filterCard,
			timePicker,
			buyOrderCard
		},
		async onLoad() {
			// 获取状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			await this.getClass();
			await this.refreshList();
			//赋予当前营业中value
			this.filterDetailsLists[0].details[0].value = this.getCurrentToEndOfDay()
		},
		 onPullDownRefresh() {
    this.refreshList();
  },
		async onReachBottom() {
			console.log("onReachBottom");
			if (this.count <= this.queryData.page * this.queryData.limit || !this.isLoad) {
				return
			}
			this.queryData.page++;
			this.refreshList(false);
		},
		methods: {
			filterChange(e) {
				this.filterShow = e.show
			},
			placeOrder(id) {
				console.log("下单工时ID", id);
				uni.navigateTo({
					url: `/pages/syr/workstation/workstationDetail?id=${id}`
				})
			},
			getCurrentToEndOfDay() {
				const now = new Date();
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				return `${hours}:${minutes}-${hours}:${minutes}`;
			},
			openTimePopup() {
				this.$refs.timePopup.openTimePopup();
			},
			openFilter() {
				this.$refs.filterPopup.open();
			},
			refreshList(isRefresh = true) {
				if (isRefresh) {
					this.queryData.page = 1;
					this.queryData.limit = 10;
				}
				let userAdrees = uni.getStorageSync('userAdrees')
				if (userAdrees) {
					this.queryData.longitude = userAdrees.addressRes.longitude;
					this.queryData.latitude = userAdrees.addressRes.latitude;
				} else {
					this.queryData.longitude = getApp().globalData.addressRes.longitude;
					this.queryData.latitude = getApp().globalData.addressRes.latitude;
				}
				this.queryData.title = this.title;
				request.post("/syr/workSeat/list", this.queryData).then((res) => {

					if (isRefresh) {
						this.serverlist = res.data.list;
						this.count = res.data.count;
					} else {
						this.serverlist = [...this.serverlist, ...res.data.list];
						this.count = res.data.count;
					}
				}).finally(() => {
					this.isLoad = true
					 uni.stopPullDownRefresh();
				});
			},
			async getClass() {
				await request.post("/syr/workSeat/classList").then((res) => {
					console.log("获取工时分类列表", res);
					if (res.code == 200) {
						this.tabs = res.data;
						this.queryData.first_class_id = this.tabs[0].id;
						// 通过 Vuex 存储分类列表到全局状态管理;
						this.$store.commit("setworkHourSJClassList", res.data);
					}
				});
			},
			async selctServiceHours(item, index) {
				this.serviceHoursIndex = item.id;
				// this.queryData.service_hours = item.id;
				await this.getDate(index);
				this.queryData.page = 1; // 重置页码
				this.refreshList(); // 刷新列表
				this.showTimeFilter = false; // 隐藏服务时间选择
			},
			getDate(index) {
				this.queryData.date = [];

				//今天的时间
				var day1 = new Date();
				day1.setTime(day1.getTime());
				var m1 = day1.getMonth() + 1;
				if (m1 <= 9) {
					m1 = "0" + m1;
				}
				var d1 = day1.getDate();
				if (d1 <= 9) {
					d1 = "0" + d1;
				}
				var s1 = day1.getFullYear() + "-" + m1 + "-" + d1;

				//明天的时间
				var day2 = new Date();
				day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000);
				var m2 = day2.getMonth() + 1;
				if (m2 <= 9) {
					m2 = "0" + m2;
				}
				var d2 = day2.getDate();
				if (d2 <= 9) {
					d2 = "0" + d2;
				}
				var s2 = day2.getFullYear() + "-" + m2 + "-" + d2;

				//后天的时间
				var day3 = new Date();
				day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000 * 2);
				var m3 = day3.getMonth() + 1;
				if (m3 <= 9) {
					m3 = "0" + m3;
				}
				var d3 = day3.getDate();
				if (d3 <= 9) {
					d3 = "0" + d3;
				}
				var s3 = day3.getFullYear() + "-" + m3 + "-" + d3;

				if (index == 0) {
					return (this.queryData.date = [`${s1}`]);
				} else if (index == 1) {
					return (this.queryData.date = [`${s1}`, `${s2}`]);
				} else if (index == 2) {
					return (this.queryData.date = [`${s1}`, `${s2}`, `${s3}`]);
				}
			},
			getFirstlist(tab, index) {
				this.tabsIndex = index;
				let {
					id,
					ratio,
					title
				} = tab;
				this.queryData.first_class_id = id;
				// this.ratio = ratio;
				// this.title = title;
				delete this.queryData.second_class_id;
				this.queryData.page = 1;
				console.log("tab", this.queryData);
				this.refreshList();
				// this.getIconTabs();
			},
			getSecondlist(tab) {
				let {
					id,
					ratio,
					title
				} = tab;
				this.queryData.second_class_id = id;
				// this.ratio = ratio;
				// this.title = title;
				this.queryData.page = 1;
				this.refreshList();
			},
			//处理当前列表
			handleSelectLists(detail, id) {
				if (detail.length > 0) {
					this.$set(this.filterListSelectLists, id, true);
				} else {
					this.$set(this.filterListSelectLists, id, false);
				}
				console.log("当前选择的筛选列表", this.filterListSelectLists);
				// this.filterListId = id;
			},
			resetFilter() {
				this.infoDetailLists = [];
				this.filterListSelectLists = [];
				delete this.queryData.price;
				delete this.queryData.times;
				delete this.queryData.sort;
				this.customizeTime = "";
				this.start_price = null;
				this.end_price = null;
				this.refreshList();
				console.log("重置筛选条件");
			},
			sureFilter() {
				if (this.customizeTime) {
					if (this.queryData.times) {
						this.queryData.times = `${this.queryData.times},${this.customizeTime}`;
					} else {
						this.queryData.times = this.customizeTime;
					}
				}
				if (this.start_price || this.end_price) {
					this.queryData.price = `${this.start_price || 0}-${this.end_price || ""}`;
					this.$set(this.filterListSelectLists, 2, true);
				} else {
					this.$set(this.filterListSelectLists, 2, false);
				}
				this.queryData.page = 1; // 重置页码
				this.refreshList(); // 刷新列表
			},
			selectDetailTime(detail) {
				this.handleSelectLists(detail, 1);
				this.$set(this.infoDetailLists, 0, detail);
				// this.infoDetailLists[0] = detail;
				this.queryData.times = detail.join(",");
				console.log("选择的时间段", detail);

			},
			selectDetailPrice(detail) {
				if (detail[0]) {
					let priceList = detail[0].split("-");
					this.start_price = priceList[0];
					this.end_price = priceList[1] || null;
				} else {
					this.start_price = null;
					this.end_price = null;
				}
				this.handleSelectLists(detail, 2);
				this.$set(this.infoDetailLists, 1, detail);
				console.log("选择的价格区间", detail);
			},
			selectDetailSort(detail) {
				this.handleSelectLists(detail, 3);
				//
				this.$set(this.infoDetailLists, 2, detail);
				//赋予排序方式
				this.queryData.sort = detail[0];
				console.log("选择的排序方式", detail);
			},
			// 选择服务时间
			confirmTime(time) {
				console.log("选择的时间", time);
				this.customizeTime = time;
				this.$set(this.filterListSelectLists, 1, true);
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		width: 750rpx;
	}

	.popupShow {
		overflow: hidden;
		position: fixed;
	}

	.flexed {
		position: sticky;
		top: 88rpx;
		left: 0;
		z-index: 999;

		.headerBox {
			display: flex;
			align-items: center;
			gap: 30rpx;
			background-color: #fff;
			padding: 24rpx 30rpx;

			.search-box {
				// width: 750rpx;
				width: 100%;
				background-color: #ffffff;
				border-radius: 8rpx;

				box-sizing: border-box;
				position: relative;


				.search-inp {
					// width: 700rpx;
					width: 100%;
					height: 68rpx;
					background-color: #f4f5f7;
					border-radius: 34rpx;
					padding: 0 70rpx 0 82rpx;
					font-size: 28rpx;
					box-sizing: border-box;
				}

				.placeholder {
					font-weight: 400;
					font-size: 28rpx;
					color: #CCCCCC;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
				}


				.search-icon {
					width: 34rpx;
					height: 34rpx;
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.filter {
			z-index: 999;
			background-color: #fff;
			padding: 32rpx 50rpx 0rpx 50rpx;
			margin-bottom: 32rpx;
			padding-bottom: 35rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			position: relative;

			&__left {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
			}

			&__right {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
			}

			.filter-icon {
				width: 16rpx;
				height: 10rpx;
				margin-left: 8rpx;
			}

			.filter__text {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.filter__left__select__bj {
			z-index: 987;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: transparent;
		}

		.filter__left__select {
			z-index: 988;
			position: absolute;
			background-color: #fff;
			left: 0;
			right: 0;
			bottom: 0;
			transform: translateY(0%);
			opacity: 0;
			transition: all 0.3s ease;
			visibility: hidden;

			&__item {
				margin: 30rpx 30rpx 0rpx 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #f5f5f5;

				&__title {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
					text-align: left;
					font-style: normal;
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					&__icon {
						width: 25rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.filter__left__select__item.active {
				.filter__left__select__item__title {
					color: #E8101E;
				}
			}
		}

		.filter__left__select.show {
			opacity: 1;
			visibility: visible;
			transform: translateY(100%);
		}
	}

	//价格区间样式
	.price-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 370rpx;
		height: 80rpx;
		background: #f3f6f8;
		border-radius: 10rpx;

		.price-input-field {
			width: 166rpx;
			height: 80rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 26rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #3d3d3d;
		}

		.price-separator {
			height: 3rpx;
			width: 38rpx;
			background-color: #dddddd;
		}
	}

	.time-customize {
		width: 180rpx;
		height: 80rpx;
		background: #f3f6f8;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-tab-scroll {
		position: sticky;
		top: calc(var(--status-bar-height) + 88rpx);
		z-index: 9999;
		white-space: nowrap;
	}

	.icon-tab-scroll {
		position: relative;
		z-index: 1999;
	}

	.main-tabs {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		background: #fff;
		border-bottom: 1rpx solid #f5f5f5;
		padding-bottom: 20rpx;
		//   padding: 0 24rpx;
		padding-left: 30rpx;
		padding-top: 24rpx;
		height: 56rpx;
		gap: 40rpx;
	}

	.main-tab {
		line-height: 56rpx;
		position: relative;
	}

	.tab-text {
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
	}

	.main-tab.active .tab-text {
		font-weight: 500;
	}

	.main-tab.active::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 32rpx;
		height: 6rpx;
		background: #E8101E;
		border-radius: 3rpx;
	}

	.icon-tabs {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		background: #fff;
		padding: 30rpx 0 0 30rpx;
	}

	.icon-tab {
		width: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 56rpx;
		margin-bottom: 30rpx;
	}

	.icon-img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		margin-bottom: 12rpx;
	}

	.icon-text {
		font-size: 24rpx;
		color: #3d3d3d;
	}

	.icon-tab.active .icon-text {
		color: #E8101E;
	}

	.icon-tab.active .icon-img {
		border: 2rpx solid #E8101E;
	}

	.service-list {
		margin: 32rpx 24rpx;
	}
</style>