<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>
</template>
<script>
    'use strict';

    const $ = require('jquery');
    const tip = require('common/tip');

    //const Modal = require('common/modal');

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

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

        methods: {
            getOrderData() {
                let _that = this;

                this.busy = true;
                if (this.page >= this.pageTotal) {
                    return;
                }
                $.ajax({
                    url: '/home/refund/get-orders',
                    data: {
                        page: ++this.page,
                        limit: this.limit
                    }
                }).then(result => {
                    _that.busy = false;
                    if (result.data.list.length > 0) {
                        this.$set('orderList', _that.orderList.concat(result.data.list));
                        _that.pageTotal = result.data.totalPage;
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            /**
             * 取消申请
             * @param id
             * @param type refundType 1为退货,2为换货
             */
            cancelApply(id, type) {
                $.ajax({
                    url: '/home/'+(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/home/_order.css";

</style>