<template>
    <div>
        <header-box title="订单详情" ref="header"></header-box>
        <template v-if="show">
            <div class="order-status">
                <p v-if="order.is_cancel === 'Y'">交易已取消</p>
                <p v-else>{{order.status | convertOrderState}}</p>
                <p v-if="order.is_cancel !== 'Y' && order.status == 0 && order.pay_lefttime != 0">剩余: <span v-count-down="{leftTime: order.pay_lefttime}"></span>，订单将被取消</p>
            </div>
            <div class="order-address">
                <p><span>{{order.user_name}}</span><span>{{order.mobile}}</span></p>
                <p>{{order.area}} <br>{{order.address}}</p>
            </div>
            <div class="order-code">
                <p>订单号: {{order.order_code}}</p>
                <p>下单时间: {{order.create_time | convertTime}}</p>
            </div>
            <div class="order-goods">
                <ul>
                    <li class="goods-info" v-for="(product, index) in order.order_goods" :key="index">
                        <a v-good-href.collect="product">
                            <div class="img-box">
                                <img v-img-src="{src: product.goods_image, width: 49, height: 65}">
                                <label v-if="product.goods_type === 'gift'">赠品</label>
                                <label class="price-gift" v-if="product.goods_type === 'price_gift'">加价购</label>
                            </div>
                            <div class="goods-detail">
                                <p class="name">{{product.product_name}}</p>
                                <p class="size">
                                    <span>颜色:{{product.color_name}}</span>
                                    <span>尺码:{{product.size_name}}</span>
                                </p>
                            </div>
                            <div class="goods-price">
                                <p>&yen;{{product.goods_price}}</p>
                                <p>×{{product.buy_number}}</p>
                                <p v-if="product.goods_status"><span class="goods-status">{{product.goods_status}}</span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="order-amount">
                <ul>
                    <li v-for="(promotion, index) in order.promotion_formulas" :key="index">
                        <label>{{promotion.promotion}}：</label><span>{{promotion.promotion_amount}}</span>
                    </li>
                    <li class="sum"><label>总计：</label><span>{{order.amount}}</span></li>
                </ul>
            </div>
            <div class="order-button" v-show="order.status != 1 && order.status != 2 && order.status != 3">
                <template v-if="order.is_cancel === 'Y'">
                    <button @click="deleteOrder(order.order_code)" class="leftpad">删除订单</button>
                    <button @click="readdOrder(order)" class="normal">再次购买</button>
                </template>
                <template v-else>
                    <button v-if="order.status == 0" @click="cancelOrder">取消订单</button>
                    <button v-if="order.status == 0 " class="countdown" @click="goBuy(order)">去支付 <span class="count-down" v-count-down="{leftTime: order.pay_lefttime, callback: autoCancel()}"></span></button>
                    <a v-if="order.status == 4 || order.status == 5 || order.status == 6" :href="`/me/logistic?order_code=${order.order_code}`">查看物流</a>
                    <button v-if="order.status == 4 || order.status == 5 " class="black" @click="confirmGoods(order.order_code)">确认收货</button>
                    <button v-if="order.is_support_refund == 'Y' || order.is_support_exchange == 'Y'" class="normal" @click="applyRefund()">申请售后</button>
                </template>
            </div>
        </template>
    </div>
</template>
<script>
    'use strict';

    import $ from 'jquery';
    import tip from 'common/tip';
    import Modal from 'common/modal';
    import yoho from 'yoho';
    import interceptClick from 'common/intercept-click';
    import genderSelect from 'common/select';
    import HeaderBox from 'component/header.vue';

    export default {
        props: ['order_code'],
        data() {
            return {
                show: false,
                order: {},
                genderSel: {}
            };
        },
        created() {
            this.updateNavBar();
            this.getOrderData();

            yoho.addNativeMethod('goToService', () => {
                interceptClick.intercept('/me/service');
                return false;
            });

            document.addEventListener('visibilitychange', () => {
                if (!document.hidden) {
                    const cr = yoho.store.get('cancelReason');

                    if (cr && cr.iscancel) {
                        this.reasonChange(cr);
                        yoho.store.remove('cancelReason');
                    } else if (yoho.store.get('orderDetail')) {
                        this.reload();
                    }
                }
            });
        },
        methods: {
            updateNavBar() {
                const header = Object.assign({}, interceptClick.defaultTitleMap[2]);

                header.title.des = '订单详情';
                setTimeout(() => {
                    yoho.updateNavigationBar({
                        header: header
                    });
                }, 200);
            },
            reload() {
                this.show = false;
                this.order = {};

                this.getOrderData();
            },
            getOrderData() {
                yoho.store.remove('orderDetail');

                $.ajax({
                    url: '/me/get-order',
                    data: {
                        orderCode: this.order_code
                    }
                }).then(result => {
                    if (result.code === 200) {
                        this.show = true;
                        this.order = result.data;
                        this.genderSel = genderSelect([{
                            key: this.order.is_support_refund,
                            val: this.order.is_support_refund === 'Y' ? '申请退货' : '申请退货（已过期限）',
                            url: '/me/return/refund?orderCode=' + this.order.order_code,
                            disabled: this.order.is_support_refund !== 'Y'
                        }, {
                            key: this.order.is_support_exchange,
                            val: this.order.is_support_exchange === 'Y' ? '申请换货' : '申请换货（已过期限）',
                            url: '/me/return/exchange?orderCode=' + this.order.order_code,
                            disabled: this.order.is_support_exchange !== 'Y'
                        }]);
                    } else if (result.code !== 500) {
                        tip(result.message);
                    } else {
                        tip('数据获取失败');
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            reasonChange(cr) {
                this.orderDetail().cancel({
                    orderCode: this.order.order_code,
                    reasonId: cr.id,
                    reason: cr.reason
                }, (result) => {
                    if (result.code === 200) {
                        tip('取消成功');
                        this.order.is_cancel = 'Y';
                        yoho.store.set('orderReload', true);
                    } else if (result.code !== 500) {
                        tip(result.message);
                    }
                }, () => {
                    tip('操作失败');
                });
            },
            orderDetail() {
                return {
                    cancel(param, success, fail) {
                        $.ajax({
                            url: '/me/cancelOrder',
                            type: 'post',
                            data: param
                        }).then(success).fail(fail);
                    }
                };
            },
            autoCancel() {
                return () => {
                    this.order.is_cancel = 'Y';
                    yoho.store.set('orderReload', true);
                };
            },
            cancelOrder() {
                Modal.confirm('', '取消后不能恢复,确认取消吗？', function() {
                    this.hide();
                    interceptClick.intercept('/me/order/cancelreason');
                });
            },
            deleteOrder(code) {
                Modal.confirm('', '确认删除订单？', function() {
                    this.hide();
                    $.ajax({
                        url: '/me/deleteOrder',
                        type: 'post',
                        data: {
                            orderCode: code
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            yoho.goBack();
                            yoho.store.set('orderReload', true);
                            return false;
                        } else if (result.code !== 500) {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失败');
                    });
                });
            },
            confirmGoods(code) {
                let _this = this;

                Modal.confirm('', '确认收货吗？', function() {
                    this.hide();
                    $.ajax({
                        url: '/me/confirmReceive',
                        type: 'post',
                        data: {
                            orderCode: code
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            _this.reload();
                            yoho.store.set('orderReload', true);
                        } else if (result.code !== 500) {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失败');
                    });
                });
            },
            goBuy(order) {
                let orderDesc = [];
                let goods = order.order_goods || [];

                goods.forEach((g) => {
                    orderDesc.push(g.product_name);
                });

                yoho.goPay({
                    orderid: order.order_code,
                    amount: order.amount,
                    orderDesc: orderDesc.join(','),
                    type: 'orderDetail'
                }, () => {
                    this.reload();
                    yoho.store.set('orderReload', true);
                });
            },
            readdOrder(order) {
                $.post('/me/readdorder', {
                    orderCode: order.order_code
                }).then((result)=> {
                    tip({
                        txt: result.message,
                        delay: 1000
                    }, ()=> {
                        if (result.code === 200) {
                            if (yoho.goShopingKey && result.data && result.data.shopping_key) {
                                yoho.goShopingKey({shoppingKey: result.data.shopping_key});
                            }
                            yoho.goShopingCart();
                        }
                    });
                });
            },
            applyRefund() {
                this.genderSel.show(item => {
                    if (item.url) {
                        interceptClick.intercept(item.url);
                    }
                    return false;
                });
            }
        },
        components: {HeaderBox}
    };
</script>
<style>
    @import "../../scss/me/_order-detail.css";
</style>