<template>
	<view class="airTicketDetailsList column">
		<view v-for="(items,i) in dataList">
			<view class="airTicketDetailsCard bgFFF MB40">
				<view class="row-sb-n MR50">
					<view class="row-aic-n">
						<view>
							<view class="airTicketDetailsCard-qfc bgE1C278 fz30 color111 fontBold">
								<template v-if="items.FlightSubType==1">去程</template>
								<template v-if="items.FlightSubType==3">返程</template>
							</view>
						</view>
						<view class="fz28 color111 ML20">
							<text>{{items.time}}</text> <text class="ML10">周{{items.week}}</text>
						</view>
						<view class="fz28 color111 ML31">
							<!-- 总时长 {{items.duration}} -->
						</view>
					</view>
					<view v-if="items.FlightList.length>1" class="fz28 colorE1C278 row-aic-n" @click="TicketDetails(items)">
						<uni-icons class="ML10" color="#DEBF7B" :type="items.show?'arrowdown':'arrowright'" size="14"></uni-icons>
					</view>
				</view>
				<view class="MT60 PX50" v-if="!items.show">
					<view class="row relative" v-for="(item,index) in items.NewFlightList" :class="[index==0?'MB50':'']">
						<text v-if="index==1" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
							{{item.time}} 周{{item.week}}
						</text>
						<view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
							<view v-if="index==0" class="fz28 fontBold relative relativeFT10">{{item.Departure_time}} </view>
							<view v-if="items.NewFlightList.length-1==index" class="MT25 fz28 fontBold">
								{{item.Arrival_time}}
							</view>
						</view>
						<view class="flexS MR30">
							<view class="width-lineH49 bgE1C278 relative">
								<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
								<template v-if="index">
									<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
									<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
									<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT4"></view>
								</template>
								<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
								<template v-if="index!=1">
									<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
								</template>
							</view>
						</view>
						<view class="column flexG relative">
							<view v-if="items.frequency&&index!=0" class="airTicketDetailsCard-ZhuanNum bgE1C278 fz18 colorFFF absolute">
								转
								<template v-if="items.frequency>1">+{{items.frequency}}</template>
							</view>
							<view class="airTicketDetailsCard-title row-aic-n absolute" v-if="index==0">
								<img class="inlineblock flexS" mode="widthFix" style="width: 20rpx;height: 17rpx;" :src="item.AlImage" />
								<view class="flexG">
									<text class="block width100One overflow fz20 ML5 color9999A5 fontWeight400">{{item.AlName}}
										{{item.Flight_number}} </text>
								</view>
							</view>
							<view class="width436">
								<view class="fz28 fontBold relative relativeFT8" v-if="index==0">
									<text class="block width100One hidden ellipsis1">{{item.DepartureName?item.DepartureName:''}} {{item.dName}}</text>
								</view>
								<view class="fz28 fontBold MT25" v-if="index==1">
									<text class="block width100One hidden ellipsis1">{{item.ArrivalCityName?item.ArrivalCityName:''}} {{item.aName}}</text>
								</view>
							</view>

						</view>
					</view>
				</view>
				<template v-if="items.show">
					<view class="MT60 PX50" v-for="(item,index) in items.FlightList" :class="[items.FlightList.length-1!=index?'MB50':'']">
						<view class="row-aic-n relative" :class="[items.FlightList.length-1!=index?'MB70':'']">
							<text v-if="items.FlightList.length-1==index" class="fz18 fontWeight400 colorFF5858 absolute airTicketDetailsCard-timeT">
								{{item.time}} 周{{item.week}}
							</text>
							<view class="airTicketDetailsCard-timeL column flexS MR20 textRight">
								<view :class="[index?'fz24':'fz28 fontBold']">{{item.Departure_time}} </view>
								<view class="MT35" :class="[items.FlightList.length-1!=index?'fz24':'fz28 fontBold']">
									{{item.Arrival_time}}
								</view>
							</view>
							<view class="flexS MR30">
								<view class="width-lineH83 bgE1C278 relative">
									<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinT"></view>
									<template v-if="index">
										<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT2"></view>
										<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinT3"></view>
									</template>
									<view class="bgE1C278 absolute WH12R50 airTicketDetailsCard-LinB"></view>
									<template v-if="items.FlightList.length-1>index">
										<view class="bgE1C278 absolute WH6R50 airTicketDetailsCard-LinB2"></view>
										<view class="bgE1C278 fz18 colorFFF absolute airTicketDetailsCard-LinText">
											中转
										</view>
									</template>
								</view>
							</view>
							<view class="column flexG relative">
								<view class="airTicketDetailsCard-title row-aic-n absolute">
									
								</view>
								<view class="width436">
									<view class="fz28 fontBold relative relativeFT8">
										<text class="block width100One hidden ellipsis1">{{item.DepartureName?item.DepartureName:''}} {{item.dName}}
										</text>
									</view>
									<view class="fz28 fontBold MT25">
										<text class="block width100One hidden ellipsis1">{{item.ArrivalCityName?item.ArrivalCityName:''}}
											{{item.aName}} </text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['DetailsList'],
		components: {

		},
		data() {
			return {
				dataList: [{
						show: true
					},
					{
						show: false
					},
				],
			}
		},
		onLoad(options) {

		},
		watch: {
			DetailsList: {
				handler(newVal, oldval) {
					this.dataList = JSON.parse(JSON.stringify(this.DetailsList))
				},
				deep: true,
				immediate: true
			}
		},
		created() {},
		methods: {
			TicketDetails(items) {
				items.show = !items.show
				this.$forceUpdate();
			},
		}
	}
</script>
<style scoped>
	@import url("@/asset/css/flex.css");
	@import url("../style.css");

	.airTicketDetailsList {
		margin: 0 54rpx;
	}

	.airTicketDetailsCard {
		border-radius: 50rpx;
		padding: 45rpx 0;
	}
</style>
