<template>
	<view style="height: 100vh;" class="column">
		<view class="nav-box row items-center" :style="{paddingTop:barHeight+'px',height:(barHeight+44)+'px'}">
			<view class="home-btn row items-center" @click="goBackHandle">
				<u-icon name="arrowleft" custom-prefix="tffont" color="#111" size="34"
					style="font-weight: bolder;"></u-icon>
			</view>
			<view class="home-btn row items-center" @click="goHomeHandle">
				<u-icon name="home_1" custom-prefix="tffont" color="#111" size="38"
					style="font-weight: bolder;"></u-icon>
			</view>
			<view class="title row items-center justify-center">
				<text>{{chosenResult[0].Name}}</text>
				<view style="margin:0 20rpx">
					<u-icon name="wangfan1" custom-prefix="tffont" color="#00000066" size="36"></u-icon>
				</view>
				<text>{{chosenResult[1].Name}}</text>
				<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
			</view>
		</view>
		<view class="column items-center justify-center q-mb-md" v-if="loadingLow">
			<u-loading mode="circle" size="40"></u-loading>
			<view class="normal-label text-center q-mt-sm">正在加载信息</view>
		</view>
		<view style="margin:10vh 0" class="text-center" v-else-if="lowData.length==0">
			<u-empty mode="data"></u-empty>
		</view>
		<template v-else>
			<view class="time-list row" style="padding:0 12rpx;">
				<scroll-view scroll-x class="col" style="padding:12rpx 0;">
					<view class="row items-center">
						<view class="time-item" @click="setCurrentDateHandle"
							:class="{'active':currentDate==x.FlightDate}" v-for="(x,i) in lowHeadData" :key="i">
							<view class="">{{x.FlightDate.split('-').splice(1,2).join('-')}}</view>
							<view style="margin: 10rpx 0;">{{x.WeekDayStr}}</view>
							<view class="">¥{{x.B2BPrice}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="time-item" style="box-shadow: -1 0 10px #00000066;">
					<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight: 0,
				currentDate: '',
				lowData: [],
				lowHeadData: [],
				dateRangeValue: {
					type: 0,
					startDate: '',
					fuzzy: {
						fuzzyType: 0,
						fuzzyTypeName: '',
						weeks: [],
						dayRangStatus: false,
						dayRange: [4, 10]
					},
					formatStartDate: '任意时间出发'
				},
				chosenResult: [{
						type: 0,
						ID: 0,
						Name: '全部城市'
					},
					{
						type: 1,
						ID: 0,
						Name: '全部城市'
					}
				],
				loadingLow: false,
				parementers: {
					StartDate: '',
					EndDate: '',
					DepartCityId: 0,
					ArriveCityId: 0,
					AirLineID: 0,
					groupId: 2,
					TicketType: 2,
					StartPlayDay: 0,
					EndPlayDay: 0,
					WeekDay: ''
				}
			}
		},
		created() {
			if (uni.getStorageSync('scf')) {
				const s = uni.getStorageSync('scf')
				this.dateRangeValue = s.dateRange
				this.chosenResult = s.cities
			}
			this.chosenResult.sort((a, b) => {
				return a.type - b.type;
			});
			this.getTopLowTicketHandle()
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success(r) {
					that.barHeight = r.statusBarHeight
				},
			});
		},
		methods: {
			resolveParameterHanle() {
				this.resetParameterHandle()
				this.parementers.DepartCityId = this.chosenResult[0].ID
				this.parementers.ArriveCityId = this.chosenResult[1].ID

				if (this.dateRangeValue.type == 1) {
					//this.parementers.StartDate = this.dateRangeValue.startDate
					this.currentDate = this.formatDateHandle(start)
					//this.parementers.EndDate = this.dateRangeValue.startDate
				} else {
					const d = this.resolveDateByFuzzyHandle(this.dateRangeValue.fuzzy.fuzzyType)
					this.parementers.StartDate = d[0]
					this.parementers.EndDate = d[1]
					// if (this.dateRangeValue.fuzzy.weeks.length > 0) {
					// 	const weeks = [2, 3, 4, 5, 6, 7, 1]
					// 	this.parementers.WeekDay = weeks.filter((x, i) => this.dateRangeValue.fuzzy.weeks.indexOf(i) != -1)
					// 		.join(',')
					// }
					// if (this.dateRangeValue.fuzzy.dayRangStatus) {
					// 	this.parementers.StartPlayDay = this.dateRangeValue.fuzzy.dayRange[0]
					// 	this.parementers.EndPlayDay = this.dateRangeValue.fuzzy.dayRange[1]
					// }
				}
			},
			resetParameterHandle() {
				this.currentDate = ''
				this.parementers = {
					StartDate: '',
					EndDate: '',
					DepartCityId: 0,
					ArriveCityId: 0,
					AirLineID: 0,
					groupId: 2,
					TicketType: 2,
					StartPlayDay: 0,
					EndPlayDay: 0,
					WeekDay: ''
				}
			},
			resolveDateByFuzzyHandle(t) {
				if (t == 0) return ['', '']
				let start = new Date();
				let end = new Date()
				if (t == -1) {
					start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
					end.setMonth(end.getMonth() + 1);
				} else if (t == -2) {
					start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
					end.setMonth(end.getMonth() + 3)
				} else {
					const currentDate = new Date()
					currentDate.setMonth(currentDate.getMonth() + t);
					const year = currentDate.getFullYear();
					const month = currentDate.getMonth();
					start = new Date(year, month, 1);
					end = new Date(year, month + 1, 0);
				}
				this.currentDate = this.formatDateHandle(start)
				return ['', ''] //[this.formatDateHandle(start), this.formatDateHandle(end)]
			},
			formatDateHandle(date) {
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`
			},
			getTopLowTicketHandle() {
				this.resolveParameterHanle()
				this.lowData = []
				this.loadingLow = true
				this.apipost('AirTicket_get_GetTopTicketProduct', this.parementers, (r) => {
					if (r.resultCode == 1) {
						this.lowData = this.formatLowData(r.data)
					}
					this.loadingLow = false
				}, (e) => {
					this.loadingLow = false
				})
			},
			formatLowData(d) {
				if (!d || d.length == 0) return []
				const list = d[0].TicketProductList
				list.sort((a, b) => {
					return new Date(a.FlightDate) - new Date(b.FlightDate);
				})
				this.lowHeadData =this.foramtHeaderListHandle(list)
				return list
			},
			setCurrentDateHandle(date) {
				this.currentDate = date
			},
			foramtHeaderListHandle(d){
				const result = d.reduce((acc, item) => {
				    const groupValue = item.FlightDate;
				    const currentPrice = item.B2BPrice;
				
				    if (!acc[groupValue]) {
				        acc[groupValue] = {
				            FlightDate: groupValue,
				            B2BPrice: currentPrice,
				            WeekDayStr: item.WeekDayStr
				        };
				    } else {
				        acc[groupValue].B2BPrice = Math.min(acc[groupValue].B2BPrice, currentPrice);
				    }
				
				    return acc;
				}, {});
				
				
				const finalResult = Object.values(result);
				return finalResult
			},
			formatDateString(d) {
				const date = new Date(d)
				const weeks = ['日', '一', '二', '三', '四', '五', '六']

				return `${String(date.getMonth()+1).padStart(2,'0')}.${String(date.getDate()).padStart(2,'0')} 周${weeks[date.getDay()]}` //周${weeks[date.getDay()]}
			},
			goBackHandle() {
				uni.navigateBack(-1)
			},
			goHomeHandle() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	@import url('../../../asset/css/flex.css');

	.nav-box {
		height: 44px;
		/* 这里的44px是示例高度，可根据实际设计调整 */
		line-height: 44px;
		background-color: #FFF;
		color: #fff;

		width: 100vw;
		padding-left: 30rpx;
		background-color: #d4b465;
	}

	.nav-box .home-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		/* border:2rpx solid #ccc; */
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.nav-box .title {
		font-weight: bold;
		font-size: 32rpx;
		color: #080A09;
		text-align: center;
		width: calc(100vw - 140px);
	}

	.time-list {
		background: linear-gradient(0, #eacf8d, #d4b465);
		width: 100%;
	}

	.time-list .time-item {
		padding: 22rpx 33rpx;
		font-size: 24rpx;
		color: #111;
		line-height: 1;
		text-align: center;
		border-radius: 16rpx;
		position: relative;
		min-width: 148rpx;
	}

	.time-list .time-item::after {
		position: absolute;
		display: block;
		right: 0;
		width: 1px;
		height: 60%;
		top: 20%;
		content: ' ';
		background-color: #FFFFFF33;
	}

	.time-list .time-item.active {
		background-color: #e7d9b2;
		font-weight: bold;
		margin-left: -1px;
	}

	.time-list .time-item.active::after,
	.time-list .time-item:last-child::after {
		display: none;
	}

	/* .nav-box .home-btn:active{
		background-color: #ccc;
	} */
</style>