<template>
     <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"
            class="logistics-detail">
            <template v-if="detail.notice">
                <a href="/me/logistic?order_code={{sourceOrderCode}}&type=refund">
                    <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}}">填写商品寄回的快递信息</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">
                        </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>(现金:&yen;{{detail.returnAmountTotal}} - YOHO币:{{detail.returnYohoCoin}} - 优惠券:{{detail.returnCouponAmount}})</p>
        </div>
        <div class="exchange-type">
            <a href="" class="primary">退款方式<span class="right">{{detail.returnAmountModeName}}</span>
            </a>
            <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>{{detail.province}}&nbsp;{{detail.city}}&nbsp;{{detail.county}} <br>{{detail.address}}</p>
        </div>
        <div class="exchange-type">
            <a href="" class="primary">换货方式<span class="right">{{detail.deliveryTpyeName}}</span>
            </a>
        </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>

<script>
    const $ = require('jquery');
    const util = require('common/util');
    const tip = require('common/tip');
    const interceptClick = require('common/intercept-click');
    const yoho = require('yoho');

    module.exports = {
        props: ['applyid', 'type'],
        data() {
            return {
                id: '',
                sourceOrderCode: '',
                detail: {}
            };
        },
        methods: {
            cancel() {
                if (!this.id) {
                    return false;
                }

                let url = '';

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

                $.ajax({
                    method: 'POST',
                    url: url,
                    data: {
                        id: this.id,
                    }
                }).then(data => {
                    if (data.code === 200) {
                        interceptClick.intercept('/me/return');
                    } else if (data.code === 400) {
                        tip(data.message);
                    } else {
                        tip('取消失败');
                    }
                });
            }
        },
        created() {
            $.ajax({
                url: '/me/return/status-detail',
                data: {
                    applyid: this.applyid,
                    type: this.type
                }
            }).then(res => {
                if (res.data) {
                    this.detail = res.data;
                    if (!this.detail.goodsList) {
                        return;
                    }

                    this.id = this.detail.id;
                    this.sourceOrderCode = this.detail.sourceOrderCode;
                    this.detail.goodsList.forEach(d => {
                        d.evidenceImages = d.evidenceImages.map(p => {
                            return util.getImgHost(p) + '?imageView2/2/w/154/h/154';
                        })
                    });
                }
            });
        }
    };
</script>

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