<template>
    <view class="bgF5"
    :class="[NewDataList.length==0||2>NewDataList.length?'height100vh':'height100']">
        <view class="bgFFF">
            <AirTicketHeader></AirTicketHeader>
            <view class="StartStopAddress">
                <view class="row-sb-n">
                    <view class="StartStopAddressText-box">
                        <view class="column">
                            <text class="fz24 color9999A6">出发地</text>
                            <view class="MT31 row-aic-n" @click="AddressSelection(1)">
                                <img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
                                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
                                <text class="StartStopAddressText fz30 fontBold"
                                :class="[!OriginAddress.DepartCityName?'color9999A5':'']">
                                    {{OriginAddress.DepartCityName?OriginAddress.DepartCityName:'选择出发地'}}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="flexS" style="width: 29rpx;height: 27rpx;margin: 0 37rpx;" 
                    @click="AddressSelection(0)">
                        <img class="inlineblock MR10" mode="widthFix" style="width: 29rpx;height: 27rpx"
                            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696737205000_556.png"/>
                    </view>
                    <view class="StartStopAddressText-box">
                        <view class="column">
                            <text class="fz24 color9999A6">目的地</text>
                            <view class="MT31 row-aic-n" @click="AddressSelection(2)">
                                <img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
                                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
                                <text class="StartStopAddressText fz30 fontBold"
                                :class="[!OriginAddress.ArriveCityName?'color9999A5':'']">
                                {{OriginAddress.ArriveCityName?OriginAddress.ArriveCityName:'选择目的地'}}
                            </text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="height-line1 MT20" ></view>
            </view>
            <view class="DepartureTime column">
                <text class="fz24 color9999A6">出发时间</text>
                <text class="fz30 fontBold MT31 MB20"
                :class="[StartDateObj.math?'':'color9999A5']">
                    <template v-if="StartDateObj.math">
                        {{StartDateObj.math}}月{{StartDateObj.date}}日(周{{StartDateObj.week}})
                    </template>
                    <template v-else>
                        {{!StartDateObj.math&&NewDateList.length>0?'可选以下出发日期进行筛查':'--'}}
                    </template>
                </text>
                <view class="height-line1"></view>
                <view class="DepartureTimeList row-sb-n">
                    <view style="width: 590rpx;overflow: hidden;">
                        <scroll-view scroll-x style="width:100%;white-space: nowrap;">
                            <view class="row-aic-n" v-if="NewDateList&&NewDateList.length>0">
                                <template v-for="(item,index) in NewDateList">
                                    <view class="DepartureTimeListC flexS column-ajc fz20"
                                    :class="[StartDateObj.times==item.times?'bgE1C278':'active']"
                                    @click="clickSearch(item,1)">
                                        <text>{{item.time}}</text>
                                        <text class="MT10 MB10">周{{item.week}}</text>
                                        <text>
                                            <template v-if="item.Price>0&&item.B2BSellNum==0">售罄</template>
                                            <template v-else>{{item.Price>0?'¥'+item.Price:'无报价'}}</template>
                                        </text>
                                    </view>
                                </template>
                            </view>
                            <view class="row-w" v-else>
                                <view class="DepartureTimeListC flexS column-ajc fz20" style="width: 100%;">
                                    <text></text>
                                    <text class="MT10 MB10"></text>
                                    <text class="fz26 color9999A5">
                                        暂无可出发日期
                                    </text>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view style="height: 152rpx;width: 1px;background: #ECF1F4;box-shadow: -3px 0 3px -3px #aaa;"></view>
                    <view class="flexS row-ajc-w" style="width: 106rpx;height: 123rpx;"
                    @click="showTimePreviwe=true">
                        <img class="inlineblock" mode="widthFix" style="width: 30rpx;height: 66rpx"
                        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696744058000_738.png">
                    </view>
                </view>
            </view>
        </view>

        <!-- <view class="ScreeningCondition row-sb-n bgFFF">
            <view class="ScreeningConditionC bgF5"
            :class="[item.Id==activeId?'active':'']" v-for="(item,index) in ConditionList"
            @click="clickSearch(item.Id,2)">
                <text class="fz24">{{item.Name}}</text>
            </view>
        </view> -->
        <view class="MT40"></view>
        <u-empty v-if="NewDataList.length==0" text="暂无数据" mode="data" padding-top="20"></u-empty>
        <scroll-view v-else :scroll-y="true" style="background-color: #f0f4f7;" 
            :enable-back-to-top="true" :enable-flex="true"
            @scrolltolower="lower" :style="{ 'height': `calc(100% - ${scrollHeight})`}">
            <AirTicketList :dataList="NewDataList"></AirTicketList>
            <view class="MT10 MB10">
                <u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="0" :margin-bottom="0" bg-color="#f0f4f7" />
            </view>
        </scroll-view>
        
        <u-popup
        v-model="showTimePreviwe"
        mode="bottom"
        border-radius="50"
        length="90%"
        :safe-area-inset-bottom="true"
        @close="OffPopup(1)">
            <!-- <canlendar
              @finish="chosenDateResult"
              :immediately="true"
              :defaultDate="currentPrice.startDate"
              :priceList="dataList.priceList"
              title="选择日期"
            ></canlendar> -->
            <canlendar
                :StartDate="msg.StartDate"
                :EndDate="msg.EndDate"
                @finish="chosenDateResult"
                title="起止出发日期">
            </canlendar>
        </u-popup>
        <u-popup
        v-model="showAddressPreviwe"
        mode="bottom"
        border-radius="50"
        :safe-area-inset-bottom="true"
        @close="OffPopup(2)">
            <Address :AddressType="AddressType" 
            :OriginAddressObj="OriginAddress" 
            :dataList="AddressType==1?DepartureCityList:ArrivalCity"
            @RenewalAddres="RenewalAddres"></Address>
        </u-popup>

    </view>
</template>
<script>
    import AirTicketHeader from "./components/airTicketHeader.vue";
    import canlendar from "./components/time/index.vue";
    import Address from "./components/address/index.vue";
    import AirTicketList from "./components/airTicketList.vue";
    import { gegerateDates,getBeforeDate,getDateWeek } from "./dates.js";
    export default {
        components: {
            AirTicketHeader,
            canlendar,
            Address,
            AirTicketList
        },
        data() {
            return {
                DepartureCityList:[],
                ArrivalCity:[],
                AddressType: null,//1出发 2目的地
                OriginAddress:{
                    DepartCityName: '',
                    DepartCityId: 0,//343
                    ArriveCityName: '',
                    ArriveCityId: 0,//653
                },
                msgAddress:{
                    AirLineID:'',
                    TicketType:'',
                },
                StartDateObj:{},
                NewDateList:[],
                dateList:[],
                activeId: 1,
                showAddressPreviwe: false,
                loading: false,
                msg:{
                    // pageIndex: 1,
                    // pageSize: 10,
                    StartDate: '',
                    EndDate: '',
                    DepartCityId: 0,//343
                    ArriveCityId: 0,//653
                    AirLineID: 0,
                    TicketType: '',//1单程 2往返
                },
                pageCount: 0,
                showTimePreviwe: false,
                ConditionList:[
                    {Name:'综合排序',Id:1},
                    {Name:'耗时长短',Id:2},
                    {Name:'价格高低',Id:3},
                    {Name:'不要中转',Id:4},
                ],
                currentPrice:{},
                filterDateList: [],
                NewDataList:[],
                dataList:[],
                status: 'nomore',
                loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
                scrollHeight: 0,
                U: {},
                isToken: false,
            }
        },
        onLoad(options){
            this.msg.DepartCityId = this.OriginAddress.DepartCityId = options.DepartCityId?options.DepartCityId:0,
            this.msg.ArriveCityId = this.OriginAddress.DepartCityId = options.ArriveCityId?options.ArriveCityId:0
            this.U = uni.getStorageSync("mall_UserInfo")
            if(this.U&&this.U.Token){
                this.isToken = true
            }
        },
        created() {},
        mounted() {
            this.getDataAddressList()
            this.msg.StartDate = getBeforeDate(1, new Date()),
            this.msg.EndDate = getBeforeDate(-60, new Date()),
            this.getDateList(60)
        },
        methods: {
            AddressSelection(AddressType){
                // 1去程地址 2返程地址 0调换地址
                if(AddressType){
                    this.showAddressPreviwe = true,
                    this.AddressType = AddressType
                }else{
                    let obj = {
                        DepartCityName: this.OriginAddress.ArriveCityName,
                        DepartCityId: this.OriginAddress.ArriveCityId,
                        ArriveCityName: this.OriginAddress.DepartCityName,
                        ArriveCityId: this.OriginAddress.DepartCityId,
                    }
                    this.OriginAddress = JSON.parse(JSON.stringify(obj))
                    this.msg.DepartCityId = this.OriginAddress.DepartCityId
                    this.msg.ArriveCityId = this.OriginAddress.ArriveCityId
                    if(this.msg.DepartCityId||this.msg.ArriveCityId){
                        this.getDataList()
                    }
                }
            },
            RenewalAddres(SelectObj,AddressType){
                if(AddressType==1){
                    this.OriginAddress.DepartCityName = SelectObj.Name,
                    this.msg.DepartCityId = this.OriginAddress.DepartCityId = SelectObj.ID
                }else{
                    this.OriginAddress.ArriveCityName = SelectObj.Name,
                    this.msg.ArriveCityId = this.OriginAddress.ArriveCityId = SelectObj.ID
                }
                this.showAddressPreviwe = false
                this.getDataList()
            },
             //滚动加载
			lower(e) {
				if (this.msg.pageIndex < this.pageCount) {
					this.msg.pageIndex++;
					this.status = "loading";
                    this.getDataList()
				} else {
					this.status = "nomore";
				}
			},
            getDataList(){
                uni.showLoading()
                this.apipost("AirTicket_get_GetTicketProduct",this.msg,
                (res) => {
                    if(res.resultCode==1){
                        // this.pageCount = res.data.pageCount
                        this.NewDateList = []
                        this.dataList = res.data
                        let arr = function(list){
                            list.forEach(x=>{
                                x.Price = 0
                            })
                        }
                        arr(this.dataList)
                        this.dateList.forEach(x => {
                        this.dataList.forEach(y=>{
                            y.Price = this.isToken?y.B2BPrice:y.B2CPrice
                            y.NewFlightList = []
                           if(y.FlightList.length>0&&y.FlightList.length<3){
                                y.FlightList.forEach(z=>{
                                    let obj = {
                                        duration:`${y.DepartureTime.Days>0?y.DepartureTime.Days+'d ':''}${y.DepartureTime.Hours>0?y.DepartureTime.Hours+'h ':''}${y.DepartureTime.Minutes>0?y.DepartureTime.Minutes+'m ':''}`,
                                        ...z
                                    }
                                    y.NewFlightList.push(obj)
                                })
                           }else if(y.FlightList.length>2){
                                let obj = {
                                    duration:`${y.DepartureTime.Days>0?y.DepartureTime.Days+'d ':''}${y.DepartureTime.Hours>0?y.DepartureTime.Hours+'h ':''}${y.DepartureTime.Minutes>0?y.DepartureTime.Minutes+'m ':''}`,
                                    frequency: y.FlightList.length-2>1?y.FlightList.length-2:0,
                                    FlightType: y.FlightList[1].FlightType,
                                    ...y.FlightList[0]
                                }
                                let obj2 = {
                                    duration:`${y.ArrivalTime.Days>0?y.ArrivalTime.Days+'d ':''}${y.ArrivalTime.Hours>0?y.ArrivalTime.Hours+'h ':''}${y.ArrivalTime.Minutes>0?y.ArrivalTime.Minutes+'m ':''}`,
                                    ...y.FlightList[y.FlightList.length-1]
                                }
                                y.NewFlightList.push(obj)
                                y.NewFlightList.push(obj2)
                            }
                                if(x.times==y.FlightDate){
                                    x.Price = this.isToken?y.B2BPrice:y.B2CPrice
                                    x.B2BSellNum = y.B2BSellNum
                                    x.show = true
                                    this.NewDateList.push(x)
                                }
                            })
                        });
                        this.NewDataList = JSON.parse(JSON.stringify(this.dataList))
                        this.StartDateObj = this.NewDateList.length>0&&this.NewDateList.length==1?this.NewDateList[0]:{}
                        // this.NewDataList = this.dataList.filter(x=> {
                        //     return x.FlightDate==this.NewDateList[0].times
                        // })
                    }
                    uni.hideLoading()
                });
            },
            // 当前起止时间
            getDateList(day){
                for(let i=0;i<day;i++){
                    let dates = getBeforeDate(-i, new Date())
                    let date = dates.split('-')
                    let obj = {
                        times: dates,
                        time: date[1]+'-'+date[2],
                        math: date[1]>=10?date[1]:date[1][1],
                        date: date[2]>=10?date[2]:date[2][1],
                        week: getDateWeek(dates),
                        Price: 0,
                        B2BSellNum: 0,
                        show: false,
                    }
                    this.dateList.push(obj)
                }
                this.getDataList()
            },
            clickSearch(item,type){
                if(type==1){
                    uni.showLoading()
                    if(this.StartDateObj.times==item.times){
                        this.StartDateObj = {}
                        this.NewDataList = JSON.parse(JSON.stringify(this.dataList))
                        setTimeout(()=>{
                            uni.hideLoading()
                        },300)
                    }else{
                        this.StartDateObj = item
                        this.msg.StartDate = item.times
                        this.NewDataList = this.dataList.filter(x=> {
                            return x.FlightDate==item.times
                        })
                        setTimeout(()=>{
                            uni.hideLoading()
                        },300)
                    }
                    
                }else{
                    this.activeId = item
                }
            },
            chosenDateResult(obj) {
                this.msg.StartDate = obj.start;
				this.msg.EndDate = obj.end;
				this.showTimePreviwe = false
                this.getDateList(obj.day)
            },
            OffPopup(){
                
            },
            getDataAddressList(){
                this.apipost("AirTicket_get_GetTicketCity",this.msgAddress,
                (res) => {
                    if(res.resultCode==1){
                        this.DepartureCityList = res.data.DepartureCityList
                        this.ArrivalCity = res.data.ArrivalCity
                        if(this.msg.DepartCityId){
                            let DepartCityName = this.DepartureCityList.filter(x=>{
                                return x.ID==this.msg.DepartCityId
                            })
                            this.OriginAddress.DepartCityName = DepartCityName[0].Name
                        }
                        if(this.msg.ArriveCityId){
                            let ArriveCityName = this.ArrivalCity.filter(x=>{
                                return x.ID==this.msg.ArriveCityId
                            })
                            this.OriginAddress.ArriveCityName = ArriveCityName[0].Name
                        }
                    }
                });
            },
        }
    }
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.StartStopAddress{
    padding: 61rpx 54rpx 0 54rpx;
}
.StartStopAddressText-box{
    width: 539rpx;
}
.StartStopAddressText{
    width: 209rpx;
}
.DepartureTime{
    padding: 34rpx 54rpx 27rpx 54rpx;
}
.DepartureTimeList{
    padding: 30rpx 0 0 0;
}
.DepartureTimeListC{
    width: 106rpx;
    height: 123rpx;
    border-radius: 20rpx;
    margin-right: 48rpx;
}
.DepartureTimeListC.active{
    background: linear-gradient(180deg, #DEBF7B, #FFFFFF);
}
.ScreeningCondition{
    margin-top: 7rpx;
    margin-bottom: 39rpx;
    padding: 18rpx 54rpx;
}
.ScreeningConditionC{
    width: 134rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    border-radius: 20rpx;
    border: 1px solid #F5F5F5;
}
.ScreeningConditionC.active{
    border-color: #DEBF7B;
}

</style>