<template>
    <div>
        <header-box :title="title" ref="header"></header-box>
        <div class="order-wrapper" v-show="orderList.length > 0">
            <ul id="order-list" v-infinite-scroll="getOrderData" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <li class="order-item" v-for="(order, index) in orderList" :key="index">
                    <div class="order-detail">
                        <div class="order-code">
                            <p>订单号:{{order.order_code}}<span v-if="order.order_type === 7" class="exchange">换货</span></p>
                            <p v-if="order.is_cancel === 'Y'">交易已取消</p>
                            <p v-else>{{order.status | convertOrderState}}</p>
                        </div>
                        <div class="order-goods" >
                            <div class="goods-info" v-for="(goods, index) in order.order_goods" :key="index">
                                <div class="img-box">
                                    <img v-img-src="{src: goods.goods_image, width: 49, height: 65}">
                                    <label v-if="goods.goods_type === 'gift'">赠品</label>
                                    <label class="price-gift" v-if="goods.goods_type === 'price_gift'">加价购</label>
                                </div>
                                <div class="goods-detail">
                                    <p class="name">{{goods.product_name}}</p>
                                    <p class="size">
                                        <span>颜色:{{goods.color_name}}</span>
                                        <span>尺码:{{goods.size_name}}</span>
                                    </p>
                                </div>
                                <div class="goods-price">
                                    <p>&yen; {{goods.goods_price}}</p>
                                    <p>×{{goods.buy_number}}</p>
                                </div>
                                <a :href="'/me/order/detail?orderCode=' + order.order_code"></a>
                            </div>
                        </div>
                        <div class="order-option">
                            <div class="goods-total">合计 <b>&yen;{{order.amount}}</b></div>
                            <div class="options">
                            <template v-if="order.is_cancel === 'Y'">
                                    <button @click="deleteOrder(order, index)" class="leftpad">删除订单</button>
                                    <button @click="readdOrder(order)" class="normal">再次购买</button>
                            </template>
                            <template v-else>
                                    <button v-if="order.status == 0" @click="cancelOrder(order)" class="leftpad">取消订单</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(order)}"></span>
                                    </button>
                                    <a v-if="order.status == 4 || order.status == 5 " class="leftpad"
                                        :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.status == 6" @click="deleteOrder(order, index)" class="normal">删除订单</button>
                            </template>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div :class="'order-empty ' + emptybox">
            <p>您暂时还没有订单</p>
            <p>You do not have an order <br>for the time being</p>
            <a href="/product/new">随便逛逛</a>
        </div>
    </div>
</template>

<script>
    'use strict';

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

    export default {
        props: ['type'],
        data() {
            return {
                page: 0,
                limit: 10,
                pageTotal: 1,
                busy: false,
                emptybox: 'hide',
                currentOrder: {},
                orderList: []
            };
        },
        computed: {
            title() {
                if (qs.type === '1') {
                    return '我的订单';
                } else if (qs.type === '2') {
                    return '待付款';
                } else if (qs.type === '3') {
                    return '待发货';
                } else if (qs.type === '4') {
                    return '待收货';
                }
            }
        },
        created() {
            this.getOrderData();

            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('orderReload')) {
                        this.reload();
                    }
                }
            });
        },
        methods: {
            reload() {
                this.page = 0;
                this.pageTotal = 1;
                this.busy = false;
                this.emptybox = 'hide';
                this.currentOrder = {};
                this.orderList = [];

                this.getOrderData();

                yoho.store.remove('orderReload');
            },
            getOrderData() {
                this.busy = true;
                if (this.page >= this.pageTotal) {
                    return;
                }
                $.ajax({
                    url: '/me/getOrderList',
                    data: {
                        page: ++this.page,
                        limit: this.limit,
                        type: this.type
                    }
                }).then(result => {
                    if (result.data && result.data.order_list.length > 0) {
                        this.orderList = this.orderList.concat(result.data.order_list);
                        this.pageTotal = result.data.page_total;
                        this.busy = false;
                    }

                    if (this.orderList.length === 0) {
                        this.emptybox = '';
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            reasonChange(cr) {
                this.order().cancel({
                    orderCode: this.currentOrder.order_code,
                    reasonId: cr.id,
                    reason: cr.reason
                }, (result) => {
                    if (result.code === 200) {
                        this.currentOrder.is_cancel = 'Y';
                        tip('取消成功');
                    } else if (result.code !== 500) {
                        tip(result.message);
                    }
                }, () => {
                    tip('操作失败');
                });
            },
            autoCancel(order) {
                return () => {
                    order.is_cancel = 'Y';
                };
            },
            order() {
                return {
                    cancel(param, success, fail) {
                        $.ajax({
                            url: '/me/cancelOrder',
                            type: 'post',
                            data: param
                        }).then(success).fail(fail);
                    }
                };
            },
            cancelOrder(order) {
                let _that = this;

                Modal.confirm('', '取消后不能恢复,确认取消吗？', function() {
                    this.hide();
                    _that.currentOrder = order;
                    interceptClick.intercept('/me/order/cancelreason');
                });
            },
            deleteOrder(order, index) {
                let _that = this;

                Modal.confirm('', '确认删除订单？', function() {
                    this.hide();
                    $.ajax({
                        url: '/me/deleteOrder',
                        type: 'post',
                        data: {
                            orderCode: order.order_code
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            _that.orderList.splice(index, 1);
                            if (_that.orderList.length === 0) {
                                _that.emptybox = '';
                            }
                        } 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();
                        } 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: 'orderList'
                }, () => {
                    this.reload();
                });
            },
            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();
                        }
                    });
                });
            }
        },
        components: {HeaderBox}
    };

</script>

<style>
html,
body {
    height: 100%;
    background-color: #fff;
}

@import "../../scss/me/_order.css";
</style>