<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">
                    <p>订单号:{{order.orderCode}}</p>
                    <p>{{order.status | convertOrderState}}</p>
                </div>
                <div class="order-goods" >
                    <div class="goods-info" v-for="goods in order.orderGoods">
                        <div class="img-box">
                            <img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
                        </div>
                        <div class="goods-detail">
                            <p class="name">{{goods.productName}}</p>
                            <p class="size">
                                <span>颜色:{{goods.colorName}}</span>
                                <span>尺码:{{goods.sizeName}}</span>
                            </p>
                        </div>
                        <div class="goods-price">
                            <p>&yen; {{goods.goodsPrice}}</p>
                            <p>×{{goods.buyNumber}}</p>
                        </div>
                        <a href="/home/order-detail?orderCode={{order.orderCode}}"></a>
                    </div>
                </div>
                <div class="order-option">
                    <div class="goods-total">合计: <b>&yen;{{order.amount}}</b></div>
                    <div class="options">
                        <button v-if="order.status === 0" @click="cancelOrder(order.orderCode)">取消订单</button>
                        <button v-if="order.status === 0 " class="countdown" @click="goBuy()">去支付 11:58:12</button>
                        <button v-if="order.status === 4 || order.status === 5 ">查看物流</button>
                        <button v-if="order.status === 4 || order.status === 5 " class="black" @click="confirmGoods(order.orderCode)">确认收货</button>
                        <button v-if="order.status === 6" @click="deleteOrder(order,index)">删除订单</button>
                        <button v-if="order.status === 6" class="normal">再次购买</button>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>

<script>
    'use strict';

    const $ = require('yoho-jquery');
    const tip = require('common/tip');
    const modal = require('common/modal');
    const overlay = require('common/overlay');

    module.exports = {
        data() {
            return {
                page: 0,
                limit: 10,
                type: this.$parent.$data.type,
                orderList: [],
                busy: false,
            };
        },
        ready(){
            this.getOrderData();
        },
        methods:{
            getOrderData(){
                let _that = this;
                this.busy = true;
                $.ajax({
                    url: '/home/get-orders',
                    data: {
                        page : ++ this.page,
                        limit : this.limit,
                        type: this.type
                    }
                }).then(result => {
                    if(result.code === 200){
                        if (result.isend) {
                            _that.busy = true;
                        } else {
                            _that.busy = false;
                        }
                        if(result.data.orderList.length > 0){
                            this.$set('orderList', result.data.orderList);
                            //_that.orderList = result.data.orderList;
                        } else {

                        }
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            cancelOrder(code){
                $.modal.confirm('', '订单取消后不能恢复,确认取消订单吗？', function() {
                    $.ajax({
                        url: '/home/cancel-order',
                        type: 'post',
                        data: {
                            orderCode: code
                        }
                    }).then(result => {
                        if(result.code === 200 ){
                            location.reload();
                        } else {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失敗');
                    });
                });
            },
            deleteOrder(order, index){
                var that = this;
                $.modal.confirm('', '确认删除订单？', function() {
                    $.ajax({
                        url: '/home/delete-order',
                        type: 'post',
                        data: {
                            orderCode: order.orderCode
                        }
                    }).then(result => {
                        if(result.code === 200 ){
                            //location.reload();
                            that.$el.querySelectorAll('.order-item')[index].remove()
                        } else {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失敗');
                    });
                });
            },
            confirmGoods(code){
                $.ajax({
                    url: '/home/confirm-order',
                    type: 'post',
                    data: {
                        orderCode: code
                    }
                }).then(result => {
                    if(result.code === 200 ){
                        location.reload();
                    } else {
                        tip(result.message);
                    }
                }).fail(() => {
                        tip('操作失敗');
                });
            },
            goBuy(){

            },
            see(){

            }
        }
    };

</script>

<style>
html,body{height:100%;}

.order-wrapper {
    height: 100%;
    ul {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@import "../../scss/home/_order.css";
</style>