<template>
    <view>
        <template v-for="(item,i) in DataLists">
        <view class="TicketOrderListCard bgFFF relative"
        @click="getDetail(item.orderId)" v-if="item.NewFlightList.length>0">
        
        <view v-if="item.different" class="TicketOrderListCard-wf absolute bg111 colorFFF fz24 z-index2">异地</view>
        <template v-for="(childs,index) in item.NewFlightList">
        <view class="row-sb-n">
            <view class="flexG"></view>
            <view class="fz24 color111 flexS">
                <text>{{childs.time}}</text>
                <text class="ML5 MR10">周 {{childs.week}}</text>
                <text>{{childs.departure_time}}</text>
            </view>
        </view>
        <view
        :class="[index?'':'MB10']">
            <view class="row-sb-n MT10">
                <view class="flexS MR20">
                    <view class="TicketOrderListCard-qc bgE1C278 fz24 color111 overflow textCenter relative relativeFT8">
                        {{index?'返':'去'}}
                        <!-- 往返 -->
                    </view>
                </view>
                <view class="column flexS">
                    <text class="fz30 fontBold">{{childs.departure_time}} </text>
                    <text class="fz22 MT5 width100 ellipsis1">{{childs.dName}}</text>
                </view>
                <view class="FlightDirection-box relative">
                    <view class="FlightDirection-Title column">
                        <!-- :style="{'height':'90rpx'}" -->
                        <view class="row-ajc-n" v-if="childs.frequency||childs.duration">
                            <view class="FlightDirection-zhuan z-index2 MB10">
                                <text v-if="childs.frequency" class="block bgECF1F4 fz21 nowrap">
                                    转<template v-if="childs.frequency>1">+{{childs.frequency}}</template>
                                </text>
                                <text v-else class="fz20 color9999A5">{{childs.duration}}</text>
                            </view>
                        </view>
                        <view :style="{'height':!childs.frequency&&!childs.duration?'79rpx':''}">
                           <!-- <text class="fz19 textCenter width100 ellipsis1 relative relativeFT8">
                                {{childs.departureName}} {{childs.arrivalCityName}}
                            </text> -->
							<text style="color: transparent;">&nbsp;1</text>
                        </view>
                    </view>
                    <view class="FlightDirection-line absolute row-aic-n">
                        <view class="FlightDirection-line-one bgECF1F4"></view>
                        <view  class="FlightDirection-line-two">
                            <view class="height-line2"></view>
                        </view>
                        <view class="FlightDirection-line-one bgECF1F4"></view>
                    </view>
                </view>
                <view class="column">
                    <text class="fz36 fontBold">{{childs.arrival_time}} </text>
                    <text class="fz22 MT5 width100 ellipsis1">{{childs.aName}}</text>
                </view>
                <view class="ML20 TicketOrderListCard-Pr textRight">
                    <view v-if="!index" class="fz34 fontBold">
                        <text class="fz32">¥ </text>
                        {{item.preferPrice}}
                    </view>
                    <view v-if="index==1&&(item.orderState==1||item.orderState==2||item.orderState==3)" 
                    class="fz32 relative TicketOrderListCard-PrQx"
                    :class="[item.loading?'color9999A5':'colorDEBF7B']"
                    @click.stop="cancelOrder(item,i)">取 消</view>
                </view>
            </view>
            <view class="row-w">
                <view class="aviationTitle row-aic-n hidden">
                    <img class="inlineblock flexS" mode="widthFix" style="width: 36rpx;height: 30rpx;"
                    :src="childs.alImage"/>
                    <view class="flexG">
                        <text class="fz22 ML5 color9999A5 width100One ellipsis1">{{childs.alName}}</text>
                    </view>
                </view>
            </view>
        </view>
        </template>
        <view class="row-sb-n MT30">
            <view class="fz324 color9999A5 MR30 flexG">
                <txet class="block TicketOrderListCard-title width100One ellipsis1" v-if="item.guestList&&item.guestList.length>0">
                    <template v-for="(n,is) in item.guestList"
                    v-if="2>is">
                        {{n.userName}}
                        <template v-if="is!=item.guestList.length-1">、</template>
                    </template>
                      等 {{item.guestList.length}} 人</txet>
            </view>
            <view class="flexS">
                <view v-if="(item.orderState==1||item.orderState==2)" 
                class="TicketOrderListCard-buttom overflow fz32 fontBold textCenter border1"
                :class="[item.loading?'bgF5 borderF5 colorDEBF7B':'bgDEBF7B borderDEBF7B']"
                @click.stop="queren(item.orderId,i)">
                    待付款
                </view>
                <!-- <view v-if="(item.orderState==1||item.orderState==2)&&item.loading" 
                class="TicketOrderListCard-buttom overflow fz32 fontBold textCenter border1 bgF5 borderF5 colorDEBF7B"
                @click.stop="queren(item.orderId,i)">
                    待付款
                </view> -->
                <view v-if="item.orderState==3||item.orderState==4" 
                class="TicketOrderListCard-buttom overflow fz32 fontBold textCenter border1"
                :class="[item.orderState==3?'bgFFF borderDEBF7B colorDEBF7B':'bgF5 borderF5 color9999A5']">
                    {{item.orderState==3?'已支付':'已取消'}}
                </view>
            </view>
        </view>
        
        </view>
        </template>
    </view>
</template>
<script>
    export default {
        props:['dataList','msg'],
        components: {
            
        },
        data() {
            return {
                DataLists:[],
                orderData: null,
                orderInfo:{},
                submit: false,
                submitCancel: false,
                loading: false,
                i: null
            }
        },
        onLoad(options){
            
        },
        created() {},
        mounted() {
            
        },
        watch: {
            dataList: {
                handler(newVal, oldval) {
                    this.DataLists = JSON.parse(JSON.stringify(newVal))
                    
                },
                deep: true,
                immediate: true
            },
            msg: {
                handler(newVal, oldval) {
                    this.dataMsg = JSON.parse(JSON.stringify(newVal))
                    
                },
                deep: true,
                immediate: true
            },
            
        },
        methods: {
            cancelOrder(item,i){
                let that = this
                this.i = i
                if(this.DataLists[this.i].loading){
                    return
                }
                //未付款-调用后台取消
                uni.showLoading({
                    title: "请稍等片刻...",
                })
                this.DataLists[this.i].loading = true
                if (
                    (item.paymentTime == null || item.paymentTime == "") &&
                    (item.orderState == 1||item.orderState == 2)
                ) {
                    this.apipost(
                    "sellorder_post_B2BRemoveOrder",
                    {
                        ID: item.orderId,
                    },
                    (res) => {
                        if (res.resultCode == 1) {
                            uni.showToast({
                                title: "操作成功",
                                icon: "success",
                            });
                            that.$emit('research',that.dataMsg.orderState)
                        }
                        uni.hideLoading()
                        this.DataLists[this.i].loading = false
                    },
                    (err) => {
                        uni.hideLoading()
                        this.DataLists[this.i].loading = false
                    }
                    );
                } else {
                    let msg = {
                        OrderId: item.orderId,
                        UserId: uni.getStorageSync("mall_UserInfo").UserId,
                    };
                    //已付款取消申请
                    this.apipost(
                    "sellorder_post_AppletUserCancelOrder",
                    msg,
                    (res) => {
                        if (res.resultCode == 1) {
                            uni.showToast({
                                title: "操作成功",
                                icon: "success",
                            });
                            that.$emit('research',that.dataMsg.orderState)
                        } else {
                        }
                        uni.hideLoading()
                        this.DataLists[this.i].loading = false
                    },
                    (err)=>{
                        uni.hideLoading()
                        this.DataLists[this.i].loading = false
                    }
                    );
                }
            },
            getDetail(orderId){
                uni.navigateTo({
					url: `/pages/airTicket/TicketOrderDetails?orderId=${orderId}`
				});
            },
            //微信支付
            queren(OrderId,i) {
                this.i = i
                if(this.DataLists[this.i].loading){
                    return
                }
                this.DataLists[this.i].loading = true
                let url = "/api/WeChatPay/GetTravlePayInfo";
                let DepartureName = this.DataLists[0].departureName
                let ArrivalCityName = this.DataLists[0].flightList[this.DataLists[0].flightList.length-1].arrivalCityName
                let FlightDate = this.DataLists[0].flightDate+'/'+this.DataLists[0].departure_time
                let GoodsName = `${DepartureName}-${ArrivalCityName}-${FlightDate}`;
                // GoodsName = GoodsName.slice(0, 10);
                uni.showLoading({
                    title: "请稍等片刻...",
                })
                this.DataLists[this.i].loading = true
                this.request2(
                    {
                        url: url,
                        data: {
                            OrderId: OrderId,
                            GoodsName: GoodsName,
                            OrderPayType: 1,
                            OpenId: uni.getStorageSync("mall_UserInfo").OpenId,
                        },
                    },
                (res) => {
                    try{
                        this.orderInfo = JSON.parse(res.data);
                        this.subscribeMsg(OrderId);
                    }catch(e){
                        uni.showToast({
                            title:'无法正常拉取微信支付，你可以稍后重试或联系销售人员线下转款',
                            icon:'none'
                        })
                    }
                },
                (err) => {
                    console.log(err)
                });
            },
            subscribeMsg(OrderId) {
                const that = this;
                let tempObj = uni.getStorageSync("basedata")?.mall?.wechatmessage ?? [];
                let tmplIds = [];
                if (tempObj && tempObj.length > 0) {
                    tempObj.forEach((x) => {
                    if (x.Name == "下单成功提醒" || x.Name == "订单取消提醒") {
                        tmplIds.push(x.MessageId);
                    }
                    });
                }
                uni.requestSubscribeMessage({
                    tmplIds: tmplIds,
                    complete(res) {
                        that.Pay(OrderId);
                    },
                });
            },
            Pay(OrderId) {
                let that = this;
                uni.requestPayment({
                    provider: "wxpay",
                    timeStamp: this.orderInfo.timeStamp,
                    nonceStr: this.orderInfo.nonceStr,
                    package: this.orderInfo.package,
                    signType: this.orderInfo.signType,
                    paySign: this.orderInfo.sign,
                success: function (res) {
                    uni.hideLoading()
                    that.DataLists[that.i].loading = false
                    console.log("success", res);
                    uni.showToast({
                        title: "支付成功",
                    });
                    that.$emit('research',that.dataMsg.orderState)
                },
                fail: function (err) {
                    uni.hideLoading()
                    that.DataLists[that.i].loading = false
                    console.log("fail:", err);
                    uni.showToast({
                        title: "支付失败",
                        icon: "none",
                    });
                },
                });
            },
            
        }
    }
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("../style.css");
.TicketOrderListCard{
	border-radius: 18rpx;
	padding: 26rpx 36rpx;
	margin-bottom: 40rpx;
}
.TicketOrderListCard-wf{
    left: 0;
    top: 0;
    border-top-left-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    padding: 7rpx 27rpx;
}
.TicketOrderListCard-dashed{
    margin-top: 25rpx;
    margin-bottom: 25rpx;
}
.TicketOrderListCard-R{
    margin-left: 80rpx;
}
.TicketOrderListCard-R>view:last-child{
    padding-top: 37rpx;
}
.TicketOrderListCard-buttom{
    width: 170rpx;
    padding: 18rpx 0;
    border-radius: 35rpx;
}
.TicketOrderListCard-qc{
    padding: 2rpx 3rpx;
    border-radius: 8rpx;
}
.TicketOrderListCard-Pr{
    width: 150rpx;
}
.TicketOrderListCard-PrQx{
    padding: 10rpx;
    top: 34rpx;
}
</style>