<template>
    <div>
        <header-box :title="title" ref="header"></header-box>
        <template v-if="show">
            <div class="status-desc">
                <p>{{detail.status_name}}</p>
                <p>申请时间: {{detail.create_time}}</p>
            </div>
            <div class="exchange-progress">
                <ul>
                    <li v-for="status in detail.statusList" :key="status.name"
                        :class="status.act ==='Y' ? 'passed' : ''">
                        <div class="progress-desc">
                            <p>{{status.name}}</p>
                        </div>
                    </li>
                </ul>
                <div v-if="detail.status == 20 && detail.delivery_tpye != 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.express_company}}<br>快递单号: {{detail.notice.express_number}}</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.delivery_tpye === '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, index) in detail.goods_list" :key="index">
                        <div class="goods-info">
                            <div class="img-box">
                                <img v-img-src="{src: goods.goods_image, width: 49, height: 65}">
                            </div>
                            <div class="goods-detail">
                                <p class="name">{{goods.product_name}}</p>
                                <p class="size">
                                    <span v-if="goods.color_name">颜色: {{goods.color_name}}</span>
                                    <span v-if="goods.size_name">尺码: {{goods.size_name}}</span>
                                </p>
                            </div>
                            <div class="goods-price">
                                <p>&yen; {{goods.sales_price}}</p>
                                <p>×1</p>
                            </div>
                        </div>
                        <div class="exchange-reason">
                            <p v-if="goods.new_color_name || goods.new_size_name">换货颜色尺码: {{goods.new_color_name}} {{goods.new_size_name}}</p>
                            <p v-if="goods.reason_name">原因: {{goods.reason_name}}</p>
                            <blockquote v-if="goods.remark">{{goods.remark}}</blockquote>
                            <ul v-if="goods.evidence_images.length > 0" class="exchange-img">
                                <li v-for="image in goods.evidence_images" :key="image">
                                    <img v-img-src="{src: image, width: 154, height: 154}">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="exchange-express" v-if="type ==='refund'">
                <div class="exchange-address" v-if="detail.return_amount">
                    <p>退款总计: &yen;{{detail.return_amount}}</p>
                    <p class="info">现金: &yen;{{detail.return_amount_total}}</p>
                    <p v-if="detail.return_yoho_coin" class="info">有货币: &yen;{{detail.return_yoho_coin}}</p>
                    <p v-if="detail.return_coupon_amount" class="info">优惠券: &yen;{{detail.return_coupon_amount}}</p>
                </div>
                <div class="exchange-type">
                    <span href="" class="primary">退款方式<span class="right">{{detail.return_amount_mode_name}}</span>
                    </span>
                    <div class="amount-modeinfo" v-if="detail.return_amount_mode_info && detail.return_amount_mode_info.length">
                        <p v-if="detail.return_amount_mode_info[0].bank_name">银行 <span>{{detail.return_amount_mode_info[0].bank_name}}</span></p>
                        <p v-if="detail.return_amount_mode_info[0].bank_card">卡号 <span>{{detail.return_amount_mode_info[0].bank_card}}</span></p>
                        <p v-if="detail.return_amount_mode_info[0].payee_name">姓名 <span>{{detail.return_amount_mode_info[0].payee_name}}</span></p>
                        <p v-if="detail.return_amount_mode_info[0].alipay_account">账号 <span>{{detail.return_amount_mode_info[0].alipay_account}}</span></p>
                        <p v-if="detail.return_amount_mode_info[0].alipay_name">姓名 <span>{{detail.return_amount_mode_info[0].alipay_name}}</span></p>
                    </div>
                    <span class="amount-info" v-if="detail.return_amount_info">{{detail.return_amount_info}}</span>
                </div>
            </div>
            <div class="exchange-express" v-else>
                <div class="exchange-address">
                    <p><span>{{detail.consignee_name}}</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.delivery_tpye_name}}</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>
    </div>
</template>

<script>
    import $ from 'jquery';
    import tip from 'common/tip';
    import yoho from 'yoho';
    import Modal from 'common/modal';
    import HeaderBox from 'component/header.vue';

    export default {
        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);
                }
            });
        },
        computed: {
            title() {
                if (this.type === 'refund') {
                    return '退货状态';
                } else if (this.type === 'exchange') {
                    return '换货状态';
                }
                return '';
            }
        },
        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.goods_list) {
                            return;
                        }

                        this.id = this.detail.id;
                        this.sourceOrderCode = this.detail.source_order_code;
                    } 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);
                        }
                    });
                });
            }
        },
        components: {HeaderBox}
    };
</script>

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