<template>
    <view>
        <view class="AggOrdListBox">
            <view class="visaList row" 
            v-for="(item,index) in g" :key="index"
            @click="goDetails(item)"
            :class="[item.orderStatus==4?'active':'']">
                <view class="visaListL">
                    <image mode="aspectFill" :src="item.goodsPic"/>
                    <text class="visaListLText">
                        {{ item.goodTypeEnum.desc }}
                    </text>
                </view>
                <view class="visaListR col column">
                    <view class="visaListTitle">{{ item.goodsName }}</view>
                    <view class="visaListText row">
                    </view>
                    <view class="col"></view>
                    <view class="visaListNum row">
                        <view class="visaListNumR">
                            <text style="font-size: 20rpx;">CNY</text>
                            <text class="price-Num">
                                {{parseFloat(item.totalPrice-item.preferentialPrice).toFixed(2)}}
                            </text>
                            <text class="price-stuff" style="font-size: 20rpx;color: rgba(164, 164, 164, 1)">元</text>
                        </view>
                        <view class="visaListNumL row items-center">
                            <!-- #ifdef MP-DI -->
                            <template v-if="item.orderStatus!=5">
                                {{ item.orderStatusInfo.desc }}
                            </template>
                            <template v-else>{{ item.afterSalesOrderStatusStr }}</template>
                            <!-- #endif -->
                            <!-- #ifdef MP-AG -->
                                {{ item.orderStatusInfo.desc }}
                                <!-- {{ item.orderStatusStr=='取消'?'已取消':item.orderStatusStr }}-->
                            <!-- #endif -->
                        </view>
                    </view>
                    <view class="row">
                        <view class="col"></view>
                        <!-- #ifdef MP-DI -->
                        <view class="jz_Zailai" @click.stop=""
                            style="width: 110rpx;">
                                 客服
                            <button class="AggOrdListH-RBut" open-type="contact" show-message-card="true"></button>
                        </view>
                        <!-- #endif -->
                        <view class="row">
                            <!-- #ifdef MP-DI -->
                                <view v-if="item.orderStatus==1||item.orderStatus==2" class="jz_Zailai"
                                style="width: 110rpx;margin-left: 10rpx;" @click.stop="goCancelZK(item)">取消</view>
                                <view v-if="item.orderStatus==1" class="jz_Zailai jz_ZailaiZF"
                                style="width: 150rpx;margin-left: 10rpx;" @click.stop="submitGetCodeByOrderNo(item)">立即支付</view>
                                <view v-if="item.orderStatus!=1" style="margin-left: 10rpx;" class="jz_Zailai" @click.stop="AnotherOrder(item)">再来一单</view>
                            <!-- #endif -->
                            <!-- #ifdef MP-AG -->
                                <view v-if="item.income == 0&&item.orderStatus==1" class="jz_Zailai"
                                style="width: 110rpx;margin-left: 10rpx;" @click.stop="goCancel(item)">取消</view>
                                <view v-else class="jz_Zailai" style="margin-left: 10rpx;" @click.stop="AnotherOrder(item)">再来一单</view>
							 <!-- #endif -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <cancelPrompt v-if="showModal" 
        :showModal="showModal" 
        @cancel="cancelModal"
        @success="cancelSuccess"
        type="1"
        :orderNo="currentData.orderNo"></cancelPrompt>
    </view>
</template>
<script>
import cancelPrompt from "@/components/cancelPrompt/cancelPrompt.vue";
export default {
    props:['orders'], 
    components: {
        cancelPrompt
    },  
    data() {
        return {
            g: [],
            submitCancel:false,
            submit: false,
            orderInfo:null,
            showModal: false,
            currentData: null,
        }
    },
    watch:{
        orders:{
            handler(newVal,oldVal){
                this.g = newVal
            },
            deep:true,
        }	
    },
    mounted() {
		
    },
    methods:{
        cancelSuccess(){
            this.$emit('research',5)
        },
        submitGetCodeByOrderNo(item) {
                uni.showLoading({
                    title: "请稍等片刻...",
                })
				if (this.submit || this.submitCancel) return;
				this.submit = true
				this.apipost("GetCodeByOrderNo_post", {
					OrderNo: item.orderNo,
					MallBaseId: uni.getStorageSync("mall_UserInfo").MallBaseId
				}, (res) => {
					if (res.resultCode == 1) {
						this.orderInfo =JSON.parse(res.data.sPayInfo)
						this.goPayHandler(item);
					}
				},e=>{
                    uni.hideLoading()
					uni.showToast({
						title:'无法发起支付，请稍后',
						icon:'none',
						duration:3000
					})
					this.submit=false
				});
        },
        goPayHandler(item) {
            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) {
                    console.log("success", res);
                    that.submit = false;
                    uni.hideLoading()
                    uni.showToast({
                        title: "支付成功",
                    });
                    that.goPayPage(item)
                },
                fail: function(err) {
                    that.submit = false;
                    uni.hideLoading()
                    uni.showToast({
                        title: "支付失败",
                        icon: "none",
                    });
                },
            });
        }, 
        goPaySuccess(item){
            let isFrom = null
            if(item.goodsType>0&&item.goodsType<4){//线路
                isFrom = 1
            }else if(item.goodsType>3&&item.goodsType<8){//景点门票
            			
            }else if(item.goodsType>7&&item.goodsType<12){//酒店住宿
            			
            }else if(item.goodsType>11&&item.goodsType<15){//目的地用车
                
            }else if(item.goodsType==15){//签证
                isFrom = 3
            }else if(item.goodsType==16){//机票
                isFrom = 4
            }
            if(isFrom){
                setTimeout(() => {
                    uni.redirectTo({
                        url: "/pages/jiuzhai/paysuccess?PreferPrice=" +
                        (item.totalPrice-item.preferentialPrice).toFixed(2) +
                            "&isFrom="+isFrom,
                    });
                }, 100);
            }
            
        },
        // 再来一单
        AnotherOrder(item){
            let url = ''
            if(item.goodsType>0&&item.goodsType<4){//线路
                const pts = ['',2,0,1]
                const productType = pts[item.goodsType]
                url = `jiuzhai/jz_Line?teamType=${productType}`
            }else if(item.goodsType>3&&item.goodsType<8){//景点门票
            			
            }else if(item.goodsType>7&&item.goodsType<12){//酒店住宿
            			
            }else if(item.goodsType>11&&item.goodsType<15){//目的地用车
            			
            }else if(item.goodsType==15){//签证
                url = "visa/visaList"
            }else if(item.goodsType==16){//机票
                url = "airTicket/airIndex"
            }
            if(url){
                uni.navigateTo({
                    url: `/pages/${url}`,
                });
            }
        },
        // 详情
        goDetails(item){
            let url = null
            let msg = null
            // #ifdef MP-DI
                msg = `OrderNo=${item.orderNo}`
                if(item.goodsType>0&&item.goodsType<4) url = `jiuzhai/jz_SureOrder?` //线路
                else if(item.goodsType>3&&item.goodsType<8){//景点门票
                }else if(item.goodsType>7&&item.goodsType<12){//酒店住宿
                }else if(item.goodsType>11&&item.goodsType<15){//目的地用车
                }else if(item.goodsType==15) url = `visa/visa_SureOrder?`//签证  
                else if(item.goodsType==16)url = `airTicket/airTicketOrderDetail?`//机票
            // #endif
            // #ifdef MP-AG
                msg = `orderId=${item.erpOrderId}`
                if(item.goodsType==2) url = `jiuzhai/jz_SureOrder?`//线路
                else if(item.goodsType==4){//景点门票
                }else if(item.goodsType==3){//酒店住宿
                }else if(item.goodsType==5){//目的地用车
                }else if(item.goodsType==6) url = `visa/visa_SureOrder?`//签证  
                else if(item.goodsType==1){//机票
                    url = `airTicket/airTicketOrderDetail?`
                    msg = `id=${item.erpOrderId}`
                }
            // #endif
            if(url) {
                let path = `/pages/${url}${msg}`
                uni.navigateTo({
                    url: path,
                });
            }
        },
        
        //取消订单
        goCancel(item) {
            let that = this
            if(this.submit||this.submitCancel) return
            wx.showModal({
                title: '提示',
                content: '确定取消订单？',
                success: (tip) => {
                    if (tip.confirm) {
                        that.submitCancel = true
                        that.apipost(
                            "b2b_get_GetB2BAllCancelOrder", {
                                ID: item.erpOrderId,
                                OrderTypeStr: item.goodsType,
                            },
                            (res) => {
                                that.submitCancel = false
                                if (res.resultCode == 1) {
                                    uni.showToast({
                                        title: "操作成功",
                                        icon: "success",
                                    });
                                    that.$emit('research');
                                }
                            },
                            (err) => {
                                that.submitCancel = false
                                uni.showToast({
                                    title: err.message,
                                    icon: "none",	
                                })
                            }
                        );
                    }
                }
            })
        },
        cancelModal(){
            this.showModal = false
        },
        goCancelZK(item) {
            if(item.orderStatus==2){
                this.currentData = item
                return this.showModal = true
            }
            let that = this
            if(this.submit||this.submitCancel) return
            wx.showModal({
                title: '提示',
                content: '确定取消订单？',
                success: (tip) => {
                    if (tip.confirm) {
                        that.submitCancel = true
                        that.apipost(
                            "GetCancelOrder_post", {
                                OrderNo: item.orderNo,
                            },
                            (res) => {
                                that.submitCancel = false
                                if (res.resultCode == 1) {
                                    uni.showToast({
                                        title: "操作成功",
                                        icon: "success",
                                    });
                                    that.$emit('research');
                                }
                            },
                            (err) => {
                                uni.showToast({
                                    title: err.message,
                                    icon: "none",
                                });
                                that.submitCancel = false
                            }
                        );
                    }
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.AggOrdListBox{
    padding: 0 36rpx;
}
.AggOrdList{
    border-radius: 18rpx;	
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
}
.AggOrdListH{
    font-size: 22rpx;
    color: #080A09;
}
.AggOrdListH-left text{
    color: #e91e63;
    background:  rgba(234,32,100,.2);
    border-radius: 10rpx;
    display: block;
    padding: 2rpx 10rpx;
}
.AggOrdListH-RBBox{
    display: block;
    color: #1d1d1d;
    position: relative;
}
.AggOrdListH-RS{
    color: #9e9e9e;
    margin-left: 40rpx;
}
.AggOrdListH-RBut{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
}
.AggOrdListH-RBut{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
}
.jz_Zailai {
    border-radius: 16px;
    width: 150rpx;
    height: 60rpx;
    text-align: center;
    color: #111111;
    line-height: 60rpx;
    font-size: 24rpx;
    position: relative;
    border: 1rpx solid rgba(164, 164, 164, .3);
    
}
.jz_Zailai.jz_ZailaiZF{
    color: #B99846;
    border: 1rpx solid #B99846;
}
.jz_ZailaiZX img{
    position: relative;
    top: 10rpx;
}

.visaList{
    padding: 30rpx;
    margin-bottom: 20rpx;
    background: #fff;
    overflow: hidden;
    border-radius: 14rpx;
}
.visaListL{
    width: 161rpx;
    height: 190rpx;
    overflow: hidden;
    margin-right: 19rpx;
    position: relative;
    border-radius: 14rpx;
}
.visaListL image{
    width: 100%;
    height: 100%;
    border-radius: 14rpx;
}
.visaListTitle{
    font-weight: bold;
    font-size: 28rpx;
    color: #111111;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden;  
    margin-bottom: 10rpx;
}
.visaListText text{
    background-color: rgba(226, 194, 122, .3);
    color: #B99846;
    margin-right: 16rpx;
    white-space: nowrap;
    border-radius: 6rpx;
    padding: 5rpx 9rpx;
    font-size: 20rpx;
}
.visaListNum{
    justify-content: space-between;
    align-items: center;
}
.visaListNumL text{
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 20rpx;
    color: #080A09;
    margin-left: 10rpx;
}
.visaListNum{
    margin-bottom: 15rpx;
}
.visaListNumR{
    color: rgba(255, 49, 102, 1);
}
.price-Num{
    font-size: 34rpx;
    margin-left: 5rpx;
    font-weight: bold;
}
.uDropdownText text{
    color: #444;
}
.uDropdownText.active text{
    color: #B99846;
    font-weight: bold;
}
.visaListLText{
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 14rpx 0rpx 14rpx 0rpx;
    background: #B99846;
    padding: 4rpx 9rpx;
    font-size: 20rpx;color: #fff;
}
.visaList.active .visaListTitle,
.visaList.active .visaListNumR,
.visaList.active .visaListNumL{
    color: #CBCBCB;
}
.visaList.active .visaListLText{
    background: #CBCBCB;
}
.visaList.active .visaListL image{
    // filter: grayscale(100%); 
}
</style>