<!--确认订单-->
<template>
    <div id="confirmOrder">
        <Nav :title="$t('confirmOrder.title')"></Nav>
        <template v-if="confirmList.length">
            <div class="content">
                <div class="userBox">
                    <span>{{userData.name}}</span>
                    <!--<span>{{userData.phone}}</span>-->
                </div>
                <div class="cell" v-for="item,index in confirmList" :key="index">
                    <div class="top">
                        <!-- <div class="left">
                        <van-checkbox v-model="confirm.checked"></van-checkbox>
                    </div> -->
                        <div class="center">
                            <van-image :src="item.image" />
                        </div>
                        <div class="right">
                            <div class="text">
                                <van-skeleton :row="2" :loading="loading">
                                    <span>{{item.text}}</span>
                                </van-skeleton>
                            </div>
                            <div class="discount">
                                <van-skeleton :row="1" :loading="loading">
                                    <template v-if="item.couponDeduction.type=='1'">
                                        <span>￥{{item.present-item.couponDeduction.place}}</span>
                                    </template>
                                    <template v-else>
                                        <span>￥{{item.present}}</span>
                                    </template>
                                </van-skeleton>
                                <!-- <div class="discountBox"><span>已领取50元优惠券</span></div>
                            <div class="delBox">
                                <van-icon name="delete-o" color="#999999" size="14" />
                            </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('confirmOrder.adult')}}</span>
                            </div>
                            <div class="def1">
                                <span style="color: #E94225">¥{{item.adult}}/{{$t('confirmOrder.people')}}</span>
                                <span>×{{item.adultNum}}</span>
                            </div>
                        </div>
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('confirmOrder.children')}}</span>
                            </div>
                            <div>
                                <span style="color: #E94225">¥{{item.children}}/{{$t('confirmOrder.people')}}</span>
                                <span>×{{item.childrenNum}}</span>
                            </div>
                            <div><span>{{$t('confirmOrder.childrenTips')}}</span></div>
                        </div>
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('confirmOrder.location')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{item.place}}</span>
                            </div>
                        </div>
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('confirmOrder.date')}}</span>
                            </div>
                            <div class="def1">
                                <span>{{item.time}}</span>
                            </div>
                        </div>
                        <div class="bottomCell" v-if="item.couponDeduction.type=='1'">
                            <div>
                                <span>{{$t('confirmOrder.received')}}{{item.couponDeduction.name}}</span>
                            </div>
                            <div class="def1">
                                <span>-¥{{item.couponDeduction.place}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell" v-if="oderData.integral&&confirmList.length==1">
                    <div class="bottom">
                        <div class="bottomCell">
                            <div>
                                <span>{{$t('confirmOrder.integral')}}：{{oderData.integral}}</span>
                            </div>
                            <div class="def1">
                                <span>{{$t('confirmOrder.integralMssage1')}}{{deduction}}{{$t('confirmOrder.integralMssage2')}}</span>
                                <span>
                                    <van-checkbox :disabled="submitType" v-model="oderData.integralChecked" icon-size="15px"></van-checkbox>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cell">
                    <div class="bottom">
                        <div class="bottomCell">
                            <div>
                                <img src="@/../public/static/images/line-app-icon.png" alt="" srcset="">
                                <span>{{$t('confirmOrder.zfb')}}</span>
                            </div>
                            <div class="def1">
                                <span style="marginRight:0">
                                    <van-checkbox :disabled="submitType" v-model="oderData.zfb" icon-size="15px"></van-checkbox>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="confirmOrderBox">
                <div class="cell">
                    <div>
                        <span>{{$t('confirmOrder.total')}}：</span>
                        <span>¥{{newTotalPrice}}</span>
                        <span>¥{{totalPrice}}</span>
                    </div>
                    <div>
                        <div>
                            <van-button  :disabled="submitType" @click="placeOrder" size="small" block>{{$t('confirmOrder.submit')}}</van-button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <van-empty :description="$t('confirmOrder.none')"></van-empty>
        </template>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import { getCommodity4H5, submitOrder, aiPay,getOrderDetail } from "@/api/comp/home.js";
import {
  getInfo
} from '@/api/login'
export default {
    data() {
        return {
            loading: true,
            shoppingLsit: [],
            confirmList: [],
            userData: {
                name: "",
                phone: "",
            },
            oderData: {
                integral: "",
                integralChecked: false,
                zfb: false,
            },
            requestUrl: process.env.VUE_APP_BASE_API,
            submitType:false,
        };
    },
    mounted() {
        this.getData();
        setTimeout(() => {
            // let orderData={
            //         commodityId: request.commodityId, //商品id
            //         departurePlace: request.departurePlace, //出发地
            //         departureDate: request.departureDate, //出发日期
            //         adultNum: request.adultNum, //成人人数
            //         childNum: request.childNum,//儿童人数
            //         //订单价格 票价*价格
            //         orderMoney:(this.travelList[0].num*this.travelList[0].price)+(this.travelList[1].num*this.travelList[1].price),
            //         //积分 用户信息查
            //         integralDeduction:userInfo.integral,
            //         //优惠券
            //         couponDeduction:this.commodityDetails.commodity.couponUser=='1'?this.commodityDetails.commodity.commodityCouponList[0].discountPrice:0
            //     }
            this.loading = false;
        }, 1000);
    },
    computed: {
        totalPrice() {
            let num = 0;
            for (let i = 0; i < this.confirmList.length; i++) {
                num += this.confirmList[i].present;
            }
            // if(this.oderData.integralChecked){
            //     num=num-this.oderData.integral;
            // }
            return num;
        },
        newTotalPrice() {
            let num = 0;
            for (let i = 0; i < this.confirmList.length; i++) {
                if (this.confirmList[i].couponDeduction.type == "1") {
                    num +=
                        this.confirmList[i].present -
                        (this.confirmList[i].couponDeduction.place || 0);
                } else {
                    num += this.confirmList[i].present;
                }
            }
            if (this.oderData.integralChecked) {
                num = num - this.deduction;
            }
            return num;
        },
        deduction(){
            let num=0;
            let Dnum=0;
            for (let i = 0; i < this.confirmList.length; i++) {
                if (this.confirmList[i].couponDeduction.type == "1") {
                    num +=
                        this.confirmList[i].present -
                        (this.confirmList[i].couponDeduction.place || 0);
                } else {
                    num += this.confirmList[i].present;
                }
            }
            if(this.oderData.integral>num){
                Dnum=num;
            }else{
                Dnum=this.oderData.integral;
            }
            return Dnum;
        }
    },
    methods: {
        getData() {
            let orderInformation = this.$store.state.home.orderInformation;
            for (let i = 0; i < orderInformation.list.length; i++) {
                this.loading = true;
                getCommodity4H5(orderInformation.list[i].commodityId).then(
                    (res) => {
                        if (res.code == 200) {
                            getOrderDetail(orderInformation.list[i].id).then(res1=>{
                                // console.log((orderInformation[i].adultNum*res.data.commodity.adultPrice)+(orderInformation[i].childNum*res.data.commodity.childPrice),'***********')
                                if(res1.code==200){
                                    console.log(res1.data.order,'******-----*******')
                                    this.confirmList.push({
                                        id: orderInformation.list[i].commodityId, //商品ID
                                        orderId: orderInformation.list[i].id,
                                        image:
                                            this.requestUrl +
                                            res.data.commodity.faceImg, //封面图片
                                        text: res.data.commodity.commodityName, //商品名称
                                        adult: res.data.commodity.adultPrice, //成人价格
                                        adultNum: orderInformation.list[i].adultNum, //成人数量
                                        children: res.data.commodity.childPrice, //儿童价格
                                        childrenNum: orderInformation.list[i].childNum, //儿童数量
                                        place: orderInformation.list[i].departurePlace, //出发地
                                        time: orderInformation.list[i].departureDate, //出发日期
                                        //订单金额
                                        present:
                                            orderInformation.list[i].adultNum *
                                                res.data.commodity.adultPrice +
                                            orderInformation.list[i].childNum *
                                                res.data.commodity.childPrice,
                                        //优惠券
                                        couponDeduction: {
                                            name: res.data.commodity.commodityCouponList[0]?res.data.commodity.commodityCouponList[0].couponName:'',
                                            place: res.data.commodity.commodityCouponList[0]?res.data.commodity.commodityCouponList[0].discountPrice:'',
                                            type: res1.data.order.isCoupon,
                                        },
                                    });
                                    //状态为一时代表已经支付过了 不可再次支付
                                    if(res1.data.order.status=='1'){
                                        this.submitType=true;
                                    }
                                    this.loading = false;
                                }
                            })
                        }
                    }
                );
            }
            //获取用户信息
            let userInfo = this.$store.state.user.userInfo;
            //写入用户信息
            this.userData.name = userInfo.nickName || this.$t('confirmOrder.noneName');
            this.userData.phone = userInfo.username;
            //写入底部积分支付模块
            this.oderData = {
                integral: userInfo.integral,
                integralChecked: false,
                zfb: false,
            };
        },
        //提交订单
        placeOrder() {
            if (!this.oderData.zfb) {
                this.$toast({
                    type: "fail",
                    message: this.$t('confirmOrder.paymentMethod'),
                });
                return;
            }
            let orderList = [];
            for (let i = 0; i < this.confirmList.length; i++) {
                orderList.push({
                    id: this.confirmList[i].orderId, //订单ID
                       commodityName: this.confirmList[i].text, //商品名称
                       commodityId: this.confirmList[i].id, //商品id
                       departurePlace: this.confirmList[i].place, //出发地
                       departureDate: this.confirmList[i].time, //出发日期
                       adultNum: this.confirmList[i].adultNum, //成人人数
                       childNum: this.confirmList[i].childNum, //儿童人数
                       orderMoney: this.confirmList[i].present, //订单金额
                       couponDeduction:
                           this.confirmList[i].couponDeduction.type == "1"
                               ? this.confirmList[i].couponDeduction.place
                               : 0, //优惠券抵扣金额
                });
            }
            //替后端算出折扣后的价格
            // for(let i=0;i<orderList.length;i++){
            //     orderList[i].money=orderList[i].orderMoney-orderList[i].couponDeduction;
            // }
            let orderInformation = this.$store.state.home.orderInformation;
            let distributionId = this.$store.state.user.distributionId;
            let require = {
                integralDeduction: this.oderData.integralChecked
                    ? this.deduction
                    : 0, //积分抵扣金额
                orderMoney: Number(this.newTotalPrice), //订单金额
                id: orderInformation.id,
                orderList: orderList,
                distributionId:distributionId?Number(distributionId):undefined,
            };
            aiPay(require).then((res) => {
                if (res.code == 200) {
                    if (res.data) {
                        window.location = res.data.paymentUrl.web;
                    } else {
                        this.$router.push({path: "/toBePaid",
                           query: { type: 2 },
                           });
                    }
                }
            });
        },
    },
    components: {
        Nav,
    },
};
</script>

<style lang="scss" scoped>
#confirmOrder {
    .content {
        background: #f6f6f6;
        min-height: calc(100vh - 1.28rem /* 128/100 */);
        padding-top: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        .userBox {
            background: #fff;
            margin-bottom: 0.12rem /* 12/100 */;
            font-size: 0.14rem /* 14/100 */;
            padding: 0.12rem /* 12/100 */;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            > span {
                line-height: 0.26rem /* 26/100 */;
            }
        }
        .cell {
            background: #fff;
            margin-bottom: 0.12rem /* 12/100 */;
            .top {
                display: flex;
                padding: 0.12rem /* 12/100 */;
                box-sizing: border-box;
                height: 1.2rem /* 120/100 */;
                // .left {
                //     width: 10%;
                //     display: flex;
                //     align-items: center;
                // }
                .center {
                    width: 1.05rem /* 105/100 */;
                    height: 1.05rem /* 105/100 */;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                }
                .right {
                    width: 70%;
                    padding: 0 0 0 0.1rem /* 10/100 */;
                    box-sizing: border-box;
                    text-align: left;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .text {
                        font-size: 0.16rem /* 16/100 */;
                    }
                    .discount {
                        font-size: 0.15rem /* 15/100 */;
                        text-align: left;
                        > span {
                            color: #e94225;
                        }
                        // font-size: 0.13rem /* 13/100 */;
                        // display: flex;
                        // justify-content: space-between;
                        // align-items: center;
                        // .discountBox {
                        //     span {
                        //         background: #e5f9f8;
                        //         display: block;
                        //         padding: 0.05rem /* 5/100 */ 0.1rem /* 10/100 */;
                        //         border-radius: 0.05rem /* 5/100 */;
                        //         color: #38d0c9;
                        //     }
                        // }
                    }
                }
            }
            .bottom {
                padding: 0.12rem /* 12/100 */;
                .bottomCell {
                    font-size: 0.15rem /* 15/100 */;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.14rem /* 14/100 */ 0;
                    flex-wrap: wrap;
                    > div:nth-child(1) {
                        width: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        > span:nth-child(1) {
                            margin-right: 0.1rem /* 10/100 */;
                        }
                        > img {
                            margin-right: 0.05rem /* 10/100 */;
                            width:30px;
                        }
                    }
                    > div:nth-child(2) {
                        width: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        > span:nth-child(1) {
                            margin-right: 0.1rem /* 10/100 */;
                        }
                    }
                    > div:nth-child(3) {
                        text-align: left;
                        padding-top: 0.1rem /* 10/100 */;
                        font-size: 0.13rem /* 13/100 */;
                        color: #999999;
                    }
                }
                .bottomCell:not(:last-child) {
                    border-bottom: 1px solid #eeeeee;
                }
            }
        }
    }
    .confirmOrderBox {
        width: 100%;
        height: 0.84rem /* 84/100 */;
        .cell {
            width: 100%;
            height: 0.84rem /* 84/100 */;
            position: fixed;
            bottom: 0;
            left: 0;
            background: #fff;
            box-shadow: 0px 0px 5px #e9e9e9;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.12rem /* 12/100 */;
            box-sizing: border-box;
            > div:nth-child(1) {
                font-size: 0.13rem /* 13/100 */;
                > span:nth-child(1) {
                }
                > span:nth-child(2) {
                    font-size: 0.3rem /* 20/100 */;
                    color: #e94225;
                    margin-right: 0.1rem /* 0.1/100 */;
                    font-weight:500;
                }
                > span:nth-child(3) {
                    color: #bbbbbb;
                    text-decoration: line-through;
                }
            }
            > div:nth-child(2) {
                font-size: 0.13rem /* 13/100 */;
                > div {
                    width: 1rem /* 100/100 */;
                }
                button{
                border-radius:30px;
                background-color:#38d0c9;
                color:#fff;
                font-weight:600;

                }
            }
        }
    }
}
</style>
<style>
#confirmOrder .van-image {
    width: 100%;
    height: 100%;
}
</style>