<template>
    <div class="order-wrapper" v-show="orderList.length > 0">
        <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 v-if="order.isCancel === 'Y'">交易已取消</p>
                        <p v-else>{{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">
                                <label v-if="goods.goodsType === 'gift'">赠品</label>
                                <label class="price-gift" v-if="goods.goodsType === 'price_gift'">加价购</label>
                            </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="/me/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.isCancel === 'Y'" @click="deleteOrder(order,index)" class="normal">删除订单</button>
                           <template v-else>
                                <button v-if="order.status == 0" @click="cancelOrder(order.orderCode)">取消订单</button>
                                <button v-if="order.status == 0 " class="countdown" @click="goBuy(order)">去支付
                                    <span v-count-down v-bind:left-time="order.payLefttime" v-bind:callback="autoCancel(order.orderCode)"></span>
                                </button>
                                <a v-if="order.status == 4 || order.status == 5 "
                                    href="/me/logistic?order_code={{order.orderCode}}">查看物流</a>
                                <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)" class="normal">删除订单</button>
                           </template>
                        </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>
    <select id="cancel-reason" class="cancel-reason" v-on:blur="reasonChange" v-on:change="reasonChange" v-model="selected">
        <option v-for="option in options" v-bind:value="{id:option.id,reason:option.reason}">{{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,
                busy: false,
                cancelbusy: false,
                emptybox: 'hide',
                currentCode: '',
                selected: {},
                options: [],
                orderList: []
            };
        },
        created() {
            this.getOrderData();
            this.getCancelReason();

            document.addEventListener('visibilitychange', () => {
                if (!document.hidden) {
                    if (yohoAPI.storage.orderReload) {
                        this.reload();
                        delete yohoAPI.storage.orderReload;
                    }
                }
            });
        },
        methods: {
            reload() {
                this.page = 0;
                this.pageTotal = 1;
                this.busy = false;
                this.cancelbusy = false;
                this.emptybox = 'hide';
                this.currentCode = '';
                this.selected = {};
                this.orderList = [];

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

                    if (this.orderList.length === 0) {
                        this.emptybox = '';
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            reasonChange() {
                if (this.cancelbusy) {
                    return false;
                }

                this.cancelbusy = true;
                this.order().cancel({
                    orderCode: this.currentCode,
                    reasonId: this.selected.id || this.options[0].id,
                    reason: this.selected.reason || this.options[0].reason
                }, (result) => {
                    if (result.code === 200) {
                        tip('取消成功');
                        setTimeout(() => {
                            this.reload();
                        }, 1000);
                    } else if (result.code !== 500) {
                        tip(result.message);
                    }
                    this.cancelbusy = false;
                }, () => {
                    tip('操作失败');
                });
            },
            getCancelReason() {
                $.ajax({
                    url: '/me/getCancelOrderReason',
                }).then(result => {
                    if (result && result.data) {
                        this.options = result.data;
                    }
                }).fail(() => {
                    tip('操作失败');
                });
            },
            autoCancel(code) {
                return () => {
                    this.order().cancel({
                        orderCode: code,
                        reasonId: this.options.length ? this.options[0].id : null,
                        reason: this.options.length ? this.options[0].reason : null
                    }, (result) => {
                        if (result.code === 200) {
                            this.reload();
                        }
                    });
                };
            },
            order() {
                return {
                    cancel(param, success, fail) {
                        $.ajax({
                            url: '/me/cancelOrder',
                            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: '/me/deleteOrder',
                        type: 'post',
                        data: {
                            orderCode: order.orderCode
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            _that.orderList.splice(index, 1);
                            if (_that.orderList.length === 0) {
                                _that.emptybox = '';
                            }
                        } else if (result.code !== 500) {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失败');
                    });
                });
            },
            confirmGoods(code) {
                let _this = this;

                Modal.confirm('', '确认收货吗？', function() {
                    this.hide();
                    $.ajax({
                        url: '/me/confirmReceive',
                        type: 'post',
                        data: {
                            orderCode: code
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            _this.reload();
                        } else if (result.code !== 500) {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失败');
                    });
                });
            },
            goBuy(order) {
                yohoAPI.goPay({
                    orderid: order.orderCode,
                    amount: order.amount
                });
            },
            dropDown(elementId) {
                let dropdown = document.getElementById(elementId);

                this.showDropdown(dropdown);
                return false;
            },
            showDropdown(element) {
                let event = document.createEvent('MouseEvents');

                event.initMouseEvent('mousedown', true, true, window);
                element.dispatchEvent(event);
            }
        }
    };

</script>

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

@import "../../scss/me/_order.css";
</style>