<template>
    <template v-if="show">
        <div class="status-desc">
            <p>{{detail.statusName}}</p>
            <p>申请时间: {{detail.createTime}}</p>
        </div>
        <div class="exchange-progress">
            <ul>
                <li v-for="status in detail.statusList"
                class="{{ status.act ==='Y' ? 'passed' : ''}}">
                    <div class="progress-desc">
                        <p>{{status.name}}</p>
                    </div>
                </li>
            </ul>
            <div v-if="detail.status == 20 && detail.deliveryTpye != 20"
                class="logistics-detail">
                <template v-if="detail.notice">
                    <a href="/me/logistic?order_code={{sourceOrderCode}}&id={{applyid}}&type={{type}}">
                        <h2>{{detail.notice.title}}</h2>
                        <p>物流公司: {{detail.notice.expressCompany}}<br>快递单号: {{detail.notice.expressNumber}}</p>
                        <span class="right"><span class="icon icon-right"></span></span>
                    </a>
                </template>
            </div>
            <div v-else class="progress-todo">
                <template v-if="detail.notice">
                    <p>{{detail.notice.title}}</p>
                    <p class="phone">{{detail.notice.remark}}</p>
                </template>
            </div>
            <div v-if="(detail.deliveryTpye === '10' || type ==='refund') && detail.status == 10"
                 class="logistics">
                 <a href="/me/return/logistics?applyid={{applyid}}&type={{type}}">填写商品寄回的快递信息</a>
            </div>
        </div>
        <div class="exchange-details">
            <h2 v-if="type ==='refund'">退货详情 <i>RETURN DETAILS</i></h2>
            <h2 v-else>换货详情 <i>EXCHANGE DETAILS</i></h2>
            <div class="exchange-product-wrapper">
                <div class="exchange-product" v-for="goods in detail.goodsList">
                    <div class="goods-info">
                        <div class="img-box">
                            <img :src="goods.goodsImage | resize 49 65">
                        </div>
                        <div class="goods-detail">
                            <p class="name">{{goods.productName}}</p>
                            <p class="size">
                                <span v-if="goods.colorName">颜色: {{goods.colorName}}</span>
                                <span v-if="goods.sizeName">尺码: {{goods.sizeName}}</span>
                            </p>
                        </div>
                        <div class="goods-price">
                            <p>&yen; {{goods.salesPrice}}</p>
                            <p>×1</p>
                        </div>
                    </div>
                    <div class="exchange-reason">
                        <p v-if="goods.newColorName || goods.newSizeName">换货颜色尺码: {{goods.newColorName}} {{goods.newSizeName}}</p>
                        <p v-if="goods.reasonName">原因: {{goods.reasonName}}</p>
                        <blockquote v-if="goods.remark">{{goods.remark}}</blockquote>
                        <ul v-if="goods.evidenceImages.length > 0" class="exchange-img">
                            <li v-for="image in goods.evidenceImages">
                                <img :src="image | resize 154 154">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="exchange-express" v-if="type ==='refund'">
            <div class="exchange-address" v-if="detail.returnAmount">
                <p>退款总计: &yen;{{detail.returnAmount}}</p>
                <p class="info">现金: &yen;{{detail.returnAmountTotal}}</p>
                <p v-if="detail.returnYohoCoin" class="info">有货币: &yen;{{detail.returnYohoCoin}}</p>
                <p v-if="detail.returnCouponAmount" class="info">优惠券: &yen;{{detail.returnCouponAmount}}</p>
            </div>
            <div class="exchange-type">
                <span href="" class="primary">退款方式<span class="right">{{detail.returnAmountModeName}}</span>
                </span>
                <div class="amount-modeinfo" v-if="detail.returnAmountModeInfo && detail.returnAmountModeInfo.length">
                    <p v-if="detail.returnAmountModeInfo[0].bankName">银行 <span>{{detail.returnAmountModeInfo[0].bankName}}</span></p>
                    <p v-if="detail.returnAmountModeInfo[0].bankCard">卡号 <span>{{detail.returnAmountModeInfo[0].bankCard}}</span></p>
                    <p v-if="detail.returnAmountModeInfo[0].payeeName">姓名 <span>{{detail.returnAmountModeInfo[0].payeeName}}</span></p>
                    <p v-if="detail.returnAmountModeInfo[0].alipayAccount">账号 <span>{{detail.returnAmountModeInfo[0].alipayAccount}}</span></p>
                    <p v-if="detail.returnAmountModeInfo[0].alipayName">姓名 <span>{{detail.returnAmountModeInfo[0].alipayName}}</span></p>
                </div>
                <span class="amount-info" v-if="detail.returnAmountInfo">{{detail.returnAmountInfo}}</span>
            </div>
        </div>
         <div class="exchange-express" v-else>
            <div class="exchange-address">
                <p><span>{{detail.consigneeName}}</span><span>{{detail.mobile}}</span></p>
                <p class="info">{{detail.province}}&nbsp;{{detail.city}}&nbsp;{{detail.county}} <br>{{detail.address}}</p>
            </div>
            <div class="exchange-type">
                <span class="primary">换货方式<span class="right">{{detail.deliveryTpyeName}}</span></span>
            </div>
        </div>
        <div class="exchange-order">
            <a class="primary" href="/me/order/detail?orderCode={{sourceOrderCode}}">原订单详情
                <span class="right"><span class="icon icon-right"></span></span>
            </a>
        </div>
        <div v-if="detail.canCancel ==='Y'" class="exchange-options">
            <button @click="cancel">取消申请</button>
        </div>
    </template>
</template>

<script>
    const $ = require('jquery');
    const tip = require('common/tip');
    const yoho = require('yoho');
    const Modal = require('common/modal');

    module.exports = {
        props: ['applyid', 'type'],
        data() {
            return {
                id: '',
                show: false,
                sourceOrderCode: '',
                detail: {}
            };
        },
        created() {
            this.reload();

            document.addEventListener('visibilitychange', () => {
                if (!document.hidden && yoho.store.get('refundStatus')) {
                    this.reload();
                    yoho.store.set('refundOrder', true);
                }
            });
        },
        methods: {
            reload() {
                this.id = '';
                this.sourceOrderCode = '';
                this.show = false;
                this.detail = {};

                yoho.store.remove('refundStatus');
                $.ajax({
                    url: '/me/return/status-detail',
                    data: {
                        applyid: this.applyid,
                        type: this.type
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.show = true;
                        this.detail = res.data;
                        if (!this.detail.goodsList) {
                            return;
                        }

                        this.id = this.detail.id;
                        this.sourceOrderCode = this.detail.sourceOrderCode;
                    } else if (res.code !== 500) {
                        tip(res.message);
                    } else {
                        tip('数据获取失败');
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            },
            cancel() {
                let id = this.id;
                let url = '';
                let _this = this;

                if (!id) {
                    return false;
                }
                if (this.type === 'refund') {
                    url = '/me/return/refund/cancel-apply';
                } else if (this.type === 'exchange') {
                    url = '/me/return/exchange/cancel-apply';
                }

                Modal.confirm('', '确认取消吗？', function() {
                    this.hide();
                    $.ajax({
                        method: 'POST',
                        url: url,
                        data: {
                            id: id,
                        }
                    }).then(data => {
                        if (data.code === 200) {
                            _this.reload();
                            yoho.store.set('refundOrder', true);
                        } else {
                            tip(data.message);
                        }
                    });
                });
            }
        }
    };
</script>

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