<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');
    const overlay = require('common/overlay');

    module.exports = {
        data() {
            return {
                order:{}
            };
        },
        ready(){
            this.getOrderData();
        },
        methods:{
            getOrderData(){
                // let _that = this;
                $.ajax({
                    url: '/home/get-order',
                    data: {
                        orderCode: this.$parent.$data.orderCode
                    }
                }).then(result => {
                    if(result){
                        this.$set('order', result.data);
                        //_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.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(){

            },
            see(){

            }
        }
    };
</script>
<style>
    @import "../../scss/home/_order-detail.css";
</style>