<template>
    <ul id="order-list" 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(order.orderCode)">去支付 <span v-count-down v-bind:left-time="order.payLefttime" v-bind:callback="autoCancel(order.orderCode)"></span></button>
                        <button v-if="order.status === 4 || order.status === 5 " @click="seeExpress(order.orderCode)">查看物流</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>
    <div class="order-empty {{emptybox}}">
        <p>您暂时还没有订单</p>
        <p>Your do not have an order <br>for the time being</p>
        <a href="">去购物</a>
    </div>
    <select id="cancel-reason" class="cancel-reason" v-on:change="reasonChange" v-model="selected">
        <option v-for="option in options" v-bind:value="{id:option.id}">{{option.reason}}</option>
    </select>
</template>

<script>
    'use strict';

    const $ = require('jquery');
    const tip = require('common/tip');
    const Modal = require('common/modal');
    const yohoAPI = require('yoho');

    module.exports = {
        data() {
            return {
                page: 0,
                limit: 10,
                pageTotal: 1,
                type: this.$parent.$data.type,
                orderList: [],
                busy: false,
                emptybox: 'hide',
                selected: null,
                options: [],
                currentCode: ''
            };
        },

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

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

                this.busy = true;
                if (this.page >= this.pageTotal) {
                    return;
                }
                $.ajax({
                    url: '/home/get-orders',
                    data: {
                        page: ++this.page,
                        limit: this.limit,
                        type: this.type
                    }
                }).then(result => {
                    if (result.code === 200) {
                        _that.busy = false;
                        if (result.data.orderList.length > 0) {
                            this.$set('orderList', _that.orderList.concat(result.data.orderList));
                            _that.pageTotal = result.data.pageTotal;
                        } else {
                            _that.emptybox = '';
                        }
                    } else {
                        _that.emptybox = '';
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            reasonChange(){
                console.log(this.currentCode)
                this.order().cancel({
                    orderCode: this.currentCode,
                    reasonId: this.selected.id
                }, (result) => {
                    if (result.code === 200) {
                        location.href = '/home/orders?type=2';
                    } else {
                        tip(result.message);
                    }
                }, () => {
                    tip('操作失败');
                });
            },
            getCancelReason() {
                let that = this;

                $.ajax({
                    url: '/home/order/cancel-reason',
                }).then(result => {
                    if (result.data.length > 0) {
                        that.options = result.data;
                    }
                }).fail(() => {
                    tip('操作失败');
                });
            },
            autoCancel(code) {
                let _that = this;

                return () => {
                    _that.order().cancel({orderCode: code}, (result) => {
                        if (result.code === 200) {
                            location.reload();
                        }
                    });
                };
            },
            order() {
                return {
                    cancel(param, success, fail) {
                        $.ajax({
                            url: '/home/cancel-order',
                            type: 'post',
                            data: param
                        }).then(success).fail(fail);
                    }
                };
            },
            cancelOrder(code) {
                let _that = this;

                Modal.confirm('订单取消后不能恢复,确认取消订单吗？', '', function() {
                    this.hide();
                    _that.currentCode = code;
                    _that.dropDown('cancel-reason');
                });
            },
            deleteOrder(order, index) {
                let that = this;

                Modal.confirm('确认删除订单？', '', function() {
                    this.hide();
                    $.ajax({
                        url: '/home/delete-order',
                        type: 'post',
                        data: {
                            orderCode: order.orderCode
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            that.orderList.splice(index, 1);
                        } 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(code) {
                yohoAPI.goPay({orderid: code});
            },
            seeExpress(code) {
                location.href = '/home/logistic?order_code='+code;
            },
            dropDown(elementId){
                let dropdown = document.getElementById(elementId);
                try {
                    this.showDropdown(dropdown);
                } catch(e) {
                    console.log(e)
                }
                return false;
            },

            showDropdown(element) {
                let event;
                event = document.createEvent('MouseEvents');
                event.initMouseEvent('mousedown', true, true, window);
                element.dispatchEvent(event);
            }
        }
    };

</script>

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

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


</style>