<template>
    <div class="order-status">
        <p>{{order.status | convertOrderState}}</p>
        <p v-if="order.status == 0">剩余: 订单将被取消</p>
    </div>
    <div class="order-address">
        <p><span>{{order.userName}}</span><span>{{order.phone}}</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><label>商品：</label><span>{{order.goodsTotalAmount}}</span></li>
            <li><label>YOHO币：</label><span>{{order.yohoCoinNum}}</span></li>
            <li><label>运费：</label><span>{{order.shippingCost}}</span></li>
            <li><label>总计：</label><span>&yen;{{order.paymentAmount}}</span></li>
        </ul>
    </div>
    <div class="order-button">
        <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>
</template>
<script>
    'use strict';

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

    module.exports = {
        data() {
            return {
                order: {}
            };
        },
        ready() {
            this.getOrderData();
        },
        methods: {
            getOrderData() {
                $.ajax({
                    url: '/home/get-order',
                    data: {
                        orderCode: this.$parent.$data.orderCode
                    }
                }).then(result => {
                    if (result) {
                        this.$set('order', result.data);
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            cancelOrder(code) {
                Modal.confirm('订单取消后不能恢复,确认取消订单吗？', '', function() {
                    $.ajax({
                        url: '/home/cancel-order',
                        type: 'post',
                        data: {
                            orderCode: code
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            location.href = '/home/orders';
                        } else {
                            tip(result.message);
                        }
                    }).fail(() => {
                        tip('操作失敗');
                    });
                });
            },
            deleteOrder(code) {
                Modal.confirm('确认删除订单？', '', function() {
                    $.ajax({
                        url: '/home/delete-order',
                        type: 'post',
                        data: {
                            orderCode: code
                        }
                    }).then(result => {
                        if (result.code === 200) {
                            location.href = '/home/orders';
                        } 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() {
                location.href = '';
            },
            seeExpress() {
                location.href = '';
            }
        }
    };
</script>
<style>
    @import "../../scss/home/_order-detail.css";
</style>