<template>
    <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="(index, order) in orderList">
                <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 in order.goods">
                            <div class="img-box">
                                <img :src="product.goods_image | resize 49 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>
</template>
<script>
    'use strict';
    const $ = require('jquery');
    const tip = require('common/tip');
    const Modal = require('common/modal');
    const yoho = require('yoho');

    module.exports = {
        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.$set('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('操作失敗');
                    });
                });
            }
        }
    };
</script>
<style>
    html,
    body {
        height: 100%;
    }

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

</style>