<template>
	<view class="f-detail">
		<view class="column items-center justify-center q-mt-md" v-if="loading">
			<u-loading mode="circle" size="40"></u-loading>
			<view class="normal-label text-center q-mt-sm">正在加载信息</view>
		</view>
		<template v-if="flight && !loading">
			<view class="flight-card">
				<view class="row items-center">
					<view class="flight-status">去程</view>
					<view class="city bold">{{goList[0].DepartureName}}</view>
					<u-icon name='qianwangx' custom-prefix="tffont" color="#00000033" size="28"></u-icon>
					<view class="city bold">{{goList[goList.length-1].ArrivalCityName}}</view>
					<view class="col row" style="font-size: 14px;justify-content: flex-end;">
						<text>{{goList[0].FlightDate.split('-').splice(1,2).join('-')}} {{getWeeks(goList[0].FlightDate)}} {{goList[0].Departure_time}}</text>
						<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
					</view>
				</view>
			</view>
			<view class="flight-card">
				<view class="row items-center">
					<view class="flight-status">回程</view>
					<view class="city bold">{{backList[0].DepartureName}}</view>
					<u-icon name='qianwangx' custom-prefix="tffont" color="#00000033" size="28"></u-icon>
					<view class="city bold">{{backList[goList.length-1].ArrivalCityName}}</view>
					<view class="col row" style="font-size: 14px;justify-content: flex-end;">
						<text>{{backList[0].FlightDate.split('-').splice(1,2).join('-')}} {{getWeeks(backList[0].FlightDate)}} {{backList[0].Departure_time}}</text>
						<u-icon class="q-ml-sm" name='arrow_down' custom-prefix="tffont" color="#00000066" size="32"></u-icon>
					</view>
				</view>
			</view>
			<view class="flight-card q-mt-md">
				<view class="title">选择乘机人</view>
				<guest></guest>
			</view>
		</template>
	</view>
</template>

<script>
	import guest from './components/guest/index.vue'
	export default {
		data() {
			return {
				id:0,
				loading:false,
				flight:null,
				goList:[],
				backList:[],
				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: '全部城市'
					}
				],
				parementers: {
					StartDate: '',
					EndDate: '',
					DepartCityId: 0,
					ArriveCityId: 0,
					AirLineID: 0,
					groupId: 2,
					TicketType: 2,
					StartPlayDay: 0,
					EndPlayDay: 0,
					WeekDay: ''
				},
			}
		},
		components:{guest},
		onLoad(options) {
			if(options.id && uni.getStorageSync('scf')){
				this.id = options.id
				
				uni.setNavigationBarColor({
					backgroundColor:'#DEBF7B',
					frontColor:'#000000'
				})
				const s = uni.getStorageSync('scf')
				this.dateRangeValue = s.dateRange
				this.chosenResult = s.cities
				
				this.getTopLowTicketHandle()
				return
			}
			this.navigatorToHomeHandle()
		},
		created() {
			
		},
		methods: {
			navigatorToHomeHandle(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			getTopLowTicketHandle() {
				this.resolveParameterHanle()
				this.lowData = []
				this.loading = true
				this.apipost('AirTicket_get_GetTopTicketProduct', this.parementers, (r) => {
					if (r.resultCode == 1) {
						this.resolveTicketHandle(r.data)
					}else{
						this.navigatorToHomeHandle()
					}
					
					this.loading = false
				}, (e) => {
					this.loading = false
					this.navigatorToHomeHandle()
				})
			},
			resolveTicketHandle(data){
				const t = data[0].TicketProductList.find(x=>x.TCID==this.id)
				if(!t) {
					this.navigatorToHomeHandle()
					return
				}
				this.goList = t.FlightList.filter(x=>x.FlightType==1)
				this.backList = t.FlightList.filter(x=>x.FlightType==3)
				
				this.flight = t
				
			},
			getWeeks(d){
				const date = new Date(d)
				const weeks = ['日', '一', '二', '三', '四', '五', '六']
				return `周${weeks[date.getDay()]}`
			},
			resolveParameterHanle() {
				this.resetParameterHandle()
				this.parementers.DepartCityId = this.chosenResult[0].ID
				this.parementers.ArriveCityId = this.chosenResult[1].ID
			
				if (this.dateRangeValue.type == 1) {
					this.currentDate = this.formatDateHandle(start)
					this.filterDate.start = this.dateRangeValue.startDate
					this.filterDate.end = this.dateRangeValue.startDate
				} else {
					const d = this.resolveDateByFuzzyHandle(this.dateRangeValue.fuzzy.fuzzyType)
					this.parementers.StartDate = d[0]
					this.parementers.EndDate = d[1]
				}
			},
			resetParameterHandle() {
				this.currentDate = ''
				this.parementers = {
					StartDate: '',
					EndDate: '',
					DepartCityId: 0,
					ArriveCityId: 0,
					AirLineID: 0,
					groupId: 2,
					TicketType: 2,
					StartPlayDay: 0,
					EndPlayDay: 0,
					WeekDay: ''
				}
			},
			formatDateHandle(date) {
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`
			},
			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);
				}
				return [this.formatDateHandle(start), this.formatDateHandle(end)]
			},
		}
	}
</script>

<style>
@import url('../../asset/css/flex.css');
.f-detail{
	background-color: #F5F5F5;
	background-image: linear-gradient(180deg, #DEBF7B, #F5F5F5);
	background-size: 100% 900rpx;
	background-repeat: no-repeat;
	height: 100vh;
	width: 100vw;
	padding-top: 30rpx;
}
.f-detail .flight-card{
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin: 30rpx;
	
}
.f-detail .flight-card .title{
	font-size: 32rpx;
	font-weight: bold;
	color: #080A09;
}
.f-detail .flight-card .flight-status{
	background: #E1C278;
	border-radius: 8rpx;
	font-size: 24rpx;
	color: #111111;
	font-weight: 400;
	padding: 7rpx 14rpx;
}
.f-detail .flight-card .city{
	width: 98rpx;
	margin: 0 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #080A09;
}
.f-detail .flight-card .bold{
	font-size: 28rpx;
	font-weight: bold;
	line-height: 1;
}
</style>
