<template>
    <div class="order-status">
        <p>{{order.status | convertOrderState}}</p>
        <p v-if="order.status == 0 && order.payLefttime != 0">剩余: <span v-count-down v-bind:left-time="order.payLefttime"></span>，订单将被取消</p>
    </div>
    <div class="order-address">
        <p><span>{{order.userName}}</span><span>{{order.mobile}}</span></p>
        <p>{{order.area}} <br>{{order.address}}</p>
    </div>
    <div class="order-code">
        <p>订单号:{{order.orderCode}}</p>
        <p>下单时间:{{order.createTime | convertTime}}</p>
    </div>
    <div class="order-goods">
        <ul>
            <li class="goods-info" v-for="product in order.orderGoods">
                <div class="img-box">
                    <img v-bind:src="product.goodsImage | resize 49 65" alt="">
                    <!--<label>赠品</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.goodsPrice}}</p>
                    <p>×{{product.buyNumber}}</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="order-amount">
        <ul>
            <li v-for="promotion in order.promotionFormulas">
                <label>{{promotion.promotion}}：</label><span>{{promotion.promotionAmount}}</span>
            </li>
            <li><label>总计：</label><span>{{order.amount}}</span></li>
        </ul>
    </div>
    <div class="order-button" v-show="order.status != 1 && order.status != 2 && order.status != 3">
        <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>
        <button v-if="order.isSupportRefund == 'Y' || order.isSupportExchange == 'Y'" class="normal" @click="applyRefund()">申请售后</button>
    </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');
    let genderSel = require('common/select');

    module.exports = {
        data() {
            return {
                order: {},
                options: [],
                selected: null
            };
        },
        ready() {
            this.getOrderData();
        },
        methods: {
            getOrderData() {
                $.ajax({
                    url: '/me/get-order',
                    data: {
                        orderCode: this.$parent.$data.orderCode
                    }
                }).then(result => {
                    if (result.code === 200) {
                        this.$set('order', result.data);
                        genderSel = genderSel([
                            {
                                key: this.order.isSupportRefund,
                                val: this.order.isSupportRefund === 'Y' ? '申请退货' : '<span class="overdue">申请退货（已过期限）</span>',
                                url: '/me/refund?orderId=' + this.order.orderCode,
                                disabled: this.order.isSupportRefund !== 'Y'
                            },
                            {
                                key: this.order.isSupportExchange,
                                val: this.order.isSupportExchange === 'Y' ? '申请换货' : '<span class="overdue">申请换货（已过期限）</span>',
                                url: '/me/exchange?orderId=' + this.order.orderCode,
                                disabled: this.order.isSupportExchange !== 'Y'
                            },
                            {
                                key: 'onlineService',
                                val: '在线客服'
                            }
                        ]);
                        if (this.order.status == 0) {
                            this.getCancelReason();
                        }
                    } else {
                        tip(result.message);
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            reasonChange(){
                this.orderDetail().cancel({
                    orderCode: this.order.orderCode,
                    reasonId: this.selected.id
                }, (result) => {
                    if (result.code === 200) {
                        location.reload();
                    } else {
                        tip(result.message);
                    }
                }, () => {
                    tip('操作失败');
                });
            },
            getCancelReason() {
                let that = this;

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

                return () => {
                    _that.orderDetail({
                        orderCode: code
                    }).cancel({orderCode: code}, (result) => {
                        if (result.code === 200) {
                            location.href = '/me/order?type=2';
                        }
                    });
                };
            },
            cancelOrder(code) {
                let _that = this;

                Modal.confirm('订单取消后不能恢复,确认取消订单吗？', '', function() {
                    this.hide();
                    _that.dropDown('cancel-reason');
                });
            },
            deleteOrder(code) {
                Modal.confirm('确认删除订单？', '', function() {
                    this.hide();
                    $.ajax({
                        url: '/me/delete-order',
                        type: 'post',
                        data: {
                            orderCode: code
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            location.href = '/me/order';
                        } else {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失败');
                    });
                });
            },
            confirmGoods(code) {
                $.ajax({
                    url: '/me/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 = '/me/logistic?order_code='+code;
            },

            /**
             * 申请售后
             */
            applyRefund(code) {
                genderSel.show(function(item) {
                    console.log(item);
                    return;
                    location.href = item.url;
                });
            },
            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>
    @import "../../scss/me/_order-detail.css";
</style>