<template>
    <div class="zj-main">
        <mt-header title="确认订单">
            <span @click="gotoback" slot="left">
                <mt-button icon="back"></mt-button>
            </span>
        </mt-header>
        <div class="zj-count-mid">
            <router-link :to="{name:'selectAddress',params: { id: $route.params.addressId}}" tag="div"
                         class="order-address" style="margin-top:0px">
                <order-address-item :select-address="selectAddress">
                    <span slot="right" class="right"><i class="mint-cell-allow-right"></i></span>
                </order-address-item>
            </router-link>
            <!--订单商品-->
            <div class="order-Goods">
                <div class="top">{{checkOrder.siteName}}</div>
                <ul class="mid">
                    <li class="order-goods-li unactive-goods-li" v-for="item in checkOrder.products">
                        <order-goods-item :item="item" :unitname="checkOrder.siteUnitName"></order-goods-item>
                    </li>
                </ul>
            </div>
            <!--订单价格-->
            <div class="order-money">
                <div class="typer">
                    <p class="order-cell-p" v-if="checkOrder.shippingFee>0">运费：<span class="purple">+￥{{checkOrder.shippingFee}}</span>
                    </p>
                    <p class="order-cell-p" v-else>运费：<span class="purple">免运费</span></p>
                </div>
                <div class="typer" @click="popupVisible = true">
                    <p class="order-cell-p" v-if="typeof checkOrder.coupon=='object'">优惠券：<span class="right">-￥{{checkOrder.coupon.money}}：{{checkOrder.coupon['cplName']}}<i
                            class="mint-cell-allow-right"></i></span></p>
                    <p class="order-cell-p" v-else>优惠券：<span class="right">请选择<i
                            class="mint-cell-allow-right"></i></span></p>

                </div>
                <div class="typer" v-if="typeof checkOrder.activity=='object'">
                    <p class="order-cell-p">
                        活动：<span>-￥{{checkOrder.activity.money}}：{{checkOrder.activity.actName}}</span></p>
                </div>
            </div>
            <mt-popup v-model="popupVisible" position="bottom" style="width:100%;display:none">
                <div style="max-height:60vh;overflow: auto">
                    <mt-cell :title="'-￥'+item.money+'：'+item.cplName" v-for="item in matchCouponList"
                             @click.native="selectCoupon(item.cplId)"></mt-cell>
                </div>
            </mt-popup>
        </div>
        <div class="count-bottom">
            <div class="right" style="margin-left:10px" @click="countpay">
                <button>确认下单</button>
            </div>
            <div class="right">
                <p class="bigfont">实付款：{{checkOrder.orderPoint
                    }}{{checkOrder.siteUnitName}}+¥{{checkOrder.orderMoney}}</p>
                <p v-if="checkOrder.shippingFee>0">（含¥{{checkOrder.shippingFee}}运费）</p>
                <p v-else>免运费</p>
            </div>

        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import orderAddressItem from '../address/orderAddressItem.vue';
    import orderGoodsItem from '../order/orderGoodsItem.vue';
    import {MessageBox, Popup} from 'mint-ui';
    import {
            getmyAddressList,
            getselectAddress,
            postcheckOrder,
            postconfirmOrder,
            postmatchCouponList
    } from '../../vuex/actions';

    export default{
        data(){
            return {
                item: 'http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/02/c0/24056523_1375430477597.jpg',
                popupVisible: false,
                actions: [],
                addRessId: '',  //收货地址id
                cplID: '',      //选中的优惠券id
                products: []    //从url上获取的需要结算的商品
            }
        },

        components: {
            orderAddressItem,
            orderGoodsItem
        },
        vuex: {
            getters: {
                myAddressCount: ({addressData}) => {
                    return addressData.myAddressCount;
                },
                selectAddress: ({addressData}) => {
                    return addressData.selectAddress;
                },
                checkOrder: ({orderData}) => {
                    return orderData.checkOrder;
                },
                confirmOrder: ({orderData}) => {
                    return orderData.confirmOrder;
                },
                matchCouponList: ({orderData}) => {
                    return orderData.matchCouponList;
                },
            },
            actions: {
                getmyAddressList,
                getselectAddress,
                postcheckOrder,
                postconfirmOrder,
                postmatchCouponList
            }
        },
        methods: {

            gotoback(){
                this.$router.go(-1)
            },
            selectCoupon(id){
                console.log(id);
                this.popupVisible = false;
                this.cplID = id;
                let data = {
                    products: this.products,
                    cplID: this.cplID,               // 优惠券id   结算时进入传0
                    from: this.$route.params.from,          // 商品来源
                    addRessId: this.addRessId                //收货地址ID  ,结算时进入传0
                };
                this.postcheckOrder(data);
            },
            countpay(){
                var self = this;
                let data = {
                    products: this.products,
                    cplID: this.cplID,               // 优惠券id   结算时进入传0
                    from: this.$route.params.from,          // 商品来源
                    addRessId: this.addRessId                //收货地址ID  ,结算时进入传0
                };
                this.postconfirmOrder(data).then(function () {
                    self.$router.push({
                        name: 'pay',
                        params: {
                            orderId: self.confirmOrder.orderId,
                        }
                    })
                });
            }

        },
        beforeRouteEnter (to, from, next){
            console.log("进入结算页了");
            console.log(from);
            next(vm => {
                if (from.path.indexOf('pay') != -1) {
                    vm.$router.replace({
                        name: 'allOrderList'
                    });
                }
                vm.popupVisible = false;
                vm.cplID = vm.$route.params.cplID;
                vm.getmyAddressList(0, 10).then(function () {
                    if (vm.myAddressCount <= 0) {
                        vm.$router.push({name: 'addAddress', params: {Id: false, teype: 'add'}});
                    } else {
                        if (from.path.indexOf('selectAddress') != -1 && (from.params.id != vm.$route.params.addressId)) {//判断是否由选择地址页回退并且已改变地址
                            vm.addRessId = from.params.id
                        } else {
                            vm.addRessId = vm.$route.params.addressId
                        }
                        vm.getselectAddress(vm.addRessId);//获取指定收货地址
                        var goods = vm.$route.params.Goods;
                        var goodsArry = [];
                        goodsArry = goods.split(",");
                        goodsArry.forEach(function (el) {
                            var elArry = [];
                            elArry = el.split("-");
                            vm.products.push({spdId: elArry[0], productNum: elArry[1]});
                        });
                        var data = {
                            products: vm.products,
                            cplID: vm.cplID,               // 优惠券id   结算时进入传0
                            from: vm.$route.params.from,          // 商品来源
                            addRessId: vm.addRessId                //收货地址ID  ,结算时进入传0
                        }
                        vm.getselectAddress(vm.$route.params.addressId);
                        vm.postcheckOrder(data);
                        vm.postmatchCouponList(vm.products);
                    }
                })
            });
        },
        beforeRouteLeave (to, from, next){
            next()
        }

    }
</script>