<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-pay-mid">
            <div class="pay-top">
                <div class="left cell">
                    <img src="../../static/images/defaultface.png" v-if="pushOrder.buyerAvatar==''"/>
                    <img :src="pushOrder.buyerAvatar" v-else/>
                </div>
                <div class="right cell">
                    <p>{{pushOrder.buyerNickName}}</p>
                    <p class="samllerfont">会员ID：{{pushOrder.custId}}</p>
                    <p>{{pushOrder.siteUnitName}}：{{pushOrder.custPoints}}</p>
                </div>
            </div>

            <div class="pay-mid">
                <div class="typer">
                    <p class="order-cell-p">需支付：<span class="purple">{{pushOrder.orderPoints}}{{pushOrder.siteUnitName}} <em
                            v-if="pushOrder.orderMoney!=''&&pushOrder.orderMoney!=0">+
                        ¥{{pushOrder.orderMoney}}</em></span></p>
                </div>
            </div>
            <!--有人民币支付时显示-->
            <div class="pay-bot" v-if="pushOrder.orderMoney!=''&&pushOrder.orderMoney!=0">
                <div class="typer" style="border-bottom:1px solid #eee">人民币支付方式</div>
                <div class="typer">
                    <template v-for="(item,index) in pushOrder.payWay">
                        <!--微信支付--->
                        <label class="order-cell-p mint-radiolist-label" @click.self="selectedlabel(index,item)"
                               v-if="item=='wx'">
                            <img src="../../static/images/weixing.svg" style="width:0.5rem;margin-right:5px;"/>微信支付<em
                                style="color:#ff0000">(系统推荐)</em>
                            <span class="mint-radio">
                                <input class="mint-radio-input" type="radio" :value="item.buyerAddressId"
                                       checked="checked">
                                <span class="mint-radio-core"></span>
                            </span>
                        </label>
                        <!--支付宝支付--->
                        <label class="order-cell-p mint-radiolist-label" @click.self="selectedlabel(index,item)"
                               v-if="item=='zfb'&&browsertyper!='weixing'">
                            <img src="../../static/images/zfb.svg" style="width:0.5rem;margin-right:5px;"/>支付宝支付
                            <span class="mint-radio">
                                <input class="mint-radio-input" type="radio" :value="item.buyerAddressId">
                                <span class="mint-radio-core"></span>
                            </span>

                        </label>
                    </template>
                </div>
            </div>
            <div class="returnGood-ps" style="padding:0 0.2rem">温馨提示：未支付的订单将于{{downTime}}分钟后自动取消</div>
            <div class="pay-button">
                <mt-button size="large" class="system-btn" @click.native="pay"
                           v-if="pushOrder.custPoints>pushOrder.orderPoints" v-show="downTime>0">确认付款
                </mt-button>
                <mt-button size="large" class="disabled-btn" @click.native="pay" disabled
                           v-if="pushOrder.custPoints>pushOrder.orderPoints" v-show="downTime<=0">确认付款
                </mt-button>
                <mt-button size="large" v-else disabled class="disabled-btn">{{pushOrder.siteUnitName}}不足</mt-button>
            </div>

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

<script type="text/ecmascript-6">
    import orderAddressItem from '../address/orderAddressItem.vue';
    import orderGoodsItem from '../order/orderGoodsItem.vue';
    import {MessageBox, Actionsheet} from 'mint-ui';
    import {countDown}  from '../../utils/commonUtil';
    import {getpushOrder, postpayOrder} from '../../vuex/actions';

    export default{
        data(){
            return {
                paymentType: 'wx',//支付方式
                browsertyper: '',//浏览器类型
                downTime: ''//倒计时
            }
        },
        components: {
            orderAddressItem,
            orderGoodsItem
        },
        computed: {},
        methods: {
            gotoback(){
                var self = this;
                MessageBox.confirm('未支付订单' + self.downTime + '分钟后将被取消，确认离开？').then(action => {
                    this.$router.go(-1)
                });
            },
            orderValidTime(){
                var self = this;
                this.downTime = (this.pushOrder.orderValidTime / 60);
                function timeCount() {
                    self.downTime = self.downTime - 1;
                    if (self.downTime == 0) {
                        window.clearInterval(interavl);
                    }
                }
                var interavl = setInterval(timeCount, 60000);
            },
            selectedlabel(index, type){
                var self = this;
                $(".mint-radio-input").removeAttr("checked");
                $(".mint-radio-label").removeClass("colorpurple");
                $(".mint-radio-input").eq(index).attr("checked", "checked");
                $(".mint-radio-label").eq(index).addClass("colorpurple");
                this.paymentType = type;
            },
            pay(){
                var self = this;
                var payType;
                if (this.paymentType == 'wx') {
                    if (this.browsertyper != 'pc') {
                        payType = 'weixin';
                    } else {
                        payType = 'weixin_code';
                    }
                } else {
                    if (this.browsertyper != 'pc') {
                        payType = 'wapalipay';
                    } else {
                        payType = 'alipay';
                    }

                }
                var data = {
                    order_code: this.$route.params.orderId,
                    payment_type: payType,
                    show_url: '/orderDetail/orderId/' + this.$route.params.orderId,
                    order_create_time: this.pushOrder.orderTime,
                    order_money: this.pushOrder.orderMoney

                };
                this.postpayOrder(data)
            }
        },
        vuex: {
            getters: {
                pushOrder: ({orderData}) => {
                    return orderData.pushOrder;
                },
            },
            actions: {
                getpushOrder,
                postpayOrder
            }
        },
        beforeRouteEnter (to, from, next){
            next(vm => {
                vm.browsertyper = window.BROWSERTYPER
                vm.getpushOrder(vm.$route.params.orderId).then(function () {
                    vm.orderValidTime();
                });
            });
        },
        beforeRouteLeave (to, from, next){
            next()
        }
    }
</script>