<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)">
                    <!-- <text>详情</text> -->
                    <uni-icons class="ML10" color="#DEBF7B" :type="items.show?'arrowdown':'arrowright'" size="14"></uni-icons>
                    <!-- <uni-icons class="ML10" color="#DEBF7B" type="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="index!=0" class="airTicketDetailsCard-ZhuanNum bgE1C278 fz18 colorFFF absolute">
                            转
                            <template v-if="items.FlightList.length-1>1">+{{items.FlightList.length-1}}</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="fz28 fontBold relative relativeFT8" v-if="index==0">
                            <text class="block width100One hidden">{{item.DepartureName?item.DepartureName:''}} {{item.dName}}</text>
                        </view>
                        <view class="fz28 fontBold MT25" v-if="index==1">
                            <text class="block width100One hidden">{{item.ArrivalCityName?item.ArrivalCityName:''}} {{item.aName}}</text>
                        </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">
                                <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="fz28 fontBold relative relativeFT8">
                                <text class="block width100One hidden">{{item.DepartureName?item.DepartureName:''}} {{item.dName}} </text>
                            </view>
                            <view class="fz28 fontBold MT25">
                                <text class="block width100One hidden">{{item.ArrivalCityName?item.ArrivalCityName:''}} {{item.aName}} </text>
                            </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>