<template>
    <ul v-infinite-scroll="getOrderData()" 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.orderCode}}</p>
                        <p>申请时间：{{order.orderCreateTime}}</p>
                    </div>
                    <p>{{order.statusName}}</p>
                </div>
                <div class="order-goods">
                    <div class="goods-info" v-for="product in order.goods">
                        <div class="img-box">
                            <img v-bind:src="product.goodsImage | resize 49 65" alt="{{product.productName}}">
                            <label v-if="product.goodsType == 'gift'">赠品</label>
                        </div>
                        <div class="goods-detail">
                            <p class="name">{{product.productName}}</p>
                            <p class="size">
                                <span>颜色: {{product.colorName}}</span>
                                <span>尺码: {{product.sizeName}}</span>
                            </p>
                        </div>
                        <div class="goods-price">
                            <p>&yen;{{product.salesPrice}}</p>
                            <p>×1</p>
                        </div>
                    </div>
                </div>
                <div class="order-option" v-show="order.canCancel == 'Y'">
                    <div class="goods-total"></div>
                    <div class="options" v-show="order.canCancel == 'Y'">
                        <button v-if="order.canCancel == 'Y'" class="normal" @click="cancelApply(order.id, order.refundType)">取消申请</button>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="order-empty {{emptybox}}">
        <p>您暂时还没有订单</p>
        <p>Your do not have an order <br>for the time being</p>
        <a href="/new">随便逛逛</a>
    </div>
</template>
<script>
    'use strict';
    const $ = require('jquery');
    const tip = require('common/tip');

    module.exports = {
        data() {
            return {
                page: 0,
                limit: 10,
                pageTotal: 1,
                orderList: [],
                busy: false,
                emptybox: 'hide'
            };
        },

        ready() {
            this.getOrderData();
        },

        methods: {
            getOrderData() {
                this.busy = true;
                if (this.page >= this.pageTotal) {
                    return;
                }
                $.ajax({
                    url: '/me/return/getOrderList',
                    data: {
                        page: ++this.page,
                        limit: this.limit
                    }
                }).then(result => {
                    this.busy = false;
                    if (result.data.list.length > 0) {
                        this.$set('orderList', this.orderList.concat(result.data.list));
                        this.pageTotal = result.data.totalPage;
                    }

                    if (this.orderList.length === 0) {
                        this.emptybox = '';
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            /**
             * 取消申请
             * @param id
             * @param type refundType 1为退货,2为换货
             */
            cancelApply(id, type) {
                $.ajax({
                    url: '/me/' + (Number(type) === 2 ? 'exchange' : 'refund') + '/cancel-apply',
                    type: 'post',
                    data: {
                        id: id
                    }
                }).then(result => {
                    if (result.code === 200) {
                        location.reload();
                    } else {
                        tip(result.message);
                    }
                }).fail(() => {
                    tip('操作失敗');
                });
            }
        }
    };
</script>
<style>
    html,
    body {
        height: 100%;
    }

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

</style>