<template>
    <div>
        <header-box title="退/换货" ref="header"></header-box>
        <div class="order-wrapper return-goods" v-show="orderList.length > 0">
            <ul v-infinite-scroll="getRefundData" 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">
                            <div class="code-time">
                                <p>订单号:{{order.order_code}}</p>
                                <p>申请时间：{{order.order_create_time}}</p>
                            </div>
                            <p>{{order.status_name}}</p>
                        </div>
                        <div class="order-goods">
                            <div class="goods-info" v-for="(product, index) in order.goods" :key="index">
                                <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.sales_price}}</p>
                                    <p>×1</p>
                                </div>
                                <a v-if="order.refund_type === 1" :href="'/me/return/refund/detail/' + order.id"></a>
                                <a v-if="order.refund_type === 2" :href="'/me/return/exchange/detail/' + order.id"></a>
                            </div>
                        </div>
                        <div class="order-option" v-show="order.canCancel == 'Y'">
                            <div class="goods-total"></div>
                            <div class="options">
                                <button class="normal" @click="cancelApply(order.id, order.refund_type)">取消申请</button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div :class="'order-empty ' + emptybox">
            <p>您暂时还没有订单</p>
            <p>Your 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 yoho from 'yoho';
    import HeaderBox from 'component/header.vue';

    export default {
        data() {
            return {
                page: 0,
                limit: 10,
                pageTotal: 1,
                orderList: [],
                busy: false,
                emptybox: 'hide'
            };
        },
        created() {
            this.reload();

            document.addEventListener('visibilitychange', () => {
                if (!document.hidden && yoho.store.get('refundOrder')) {
                    this.reload();
                }
            });
        },
        methods: {
            reload() {
                this.page = 0;
                this.pageTotal = 1;
                this.orderList = [];
                this.busy = false;
                this.emptybox = 'hide';

                this.getRefundData();

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

                    if (this.orderList.length === 0) {
                        this.emptybox = '';
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            cancelApply(id, type) {
                let _this = this;

                Modal.confirm('', '确认取消吗？', function() {
                    this.hide();

                   // type refundType 1为退货,2为换货
                    $.ajax({
                        url: '/me/return/' + (Number(type) === 2 ? 'exchange' : 'refund') + '/cancel-apply',
                        type: 'post',
                        data: {
                            id: id
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            tip('取消成功');
                            setTimeout(() => {
                                _this.reload();
                            }, 1000);
                        } else {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失敗');
                    });
                });
            }
        },
        components: {HeaderBox}
    };
</script>
<style>
    html,
    body {
        height: 100%;
    }

    @import "../../scss/me/_order.css";

</style>