<template>
    <view class="mall-detail">
        <view class="md-send">
            <view class="ms-status-bar">{{ orderInfo.status_text || '-' }}</view>
            <view class="ms-send-info" v-if="logisticsInfo" @click="toLogisticInfo">
                <view class="msi-txt">
                    <view>快递：{{ logisticsInfo.logistics_info.logistics_name || '-' }}  {{ logisticsInfo.logistics_info.logistics_no || '-' }}</view>
                    <view @click.stop="copyLogisticNum(logisticsInfo.logistics_info.logistics_no || '-')">复制</view>
                </view>
                <image mode="aspectFit" src="/subpackage/order/static/images/arrow.png"></image>
            </view>
            <view class="ms-main">
                <view class="md-box ms-consignee">
                    <view class="md-tit">收货人信息</view>
                    <view class="mc-mode">配送方式：{{ orderInfo.product_order_self_pickup == 1 ? '自提' : '快递' }}</view>
                    <view class="mc-name">{{ order_custom.name || '-' }} <text>{{ order_custom.phone || '-' }}</text></view>
                    <view class="mc-addr">{{ order_custom.address || '-' }}</view>
                    <block v-if="orderInfo.product_order_self_pickup == 1&&orderInfo.product_order_self_pickup_info">
                        <view class="mc-code">取货码：{{ orderInfo.product_order_self_pickup_info.gcode || '-' }}</view>
                        <view class="mc-time">取货时间： {{ orderInfo.product_order_self_pickup_info.gtime || '-' }}</view>
                    </block>
                </view>
                <view class="md-box ms-goods-info">
                    <view class="md-tit">商品信息</view>
                    <view class="mgi-goods-ls">
                        <view class="mgl-item" v-for="(e, i) in orderInfo.product_order_goods" :key="i">
                            <image mode="aspectFill" :src="e.product_imgs"></image>
                            <view>
                                <view class="mi-name">
                                    <view>{{ e.product_name || '-' }}</view>
                                    <view>¥{{ e.product_price || '0' }}</view>
                                </view>
                                <view class="mi-spec">
                                    <view  v-if="e.product_spec_multi_info&&e.product_spec_multi_info.spec_info&&e.product_spec_multi_info.spec_info.length">
                                        <block v-for="(k, j) in e.product_spec_multi_info.spec_info" :key="j">
                                            {{ k + '；' }}
                                        </block>
                                    </view>
                                    <view>×{{ e.product_nums || 0 }}</view>
                                </view>
                                <view class="mi-amount">
                                    <view>实付：¥<text>{{ e.real_pay_amount || 0 }}</text></view>
                                    
                                    <view v-if="e.product_refund_utype == 1">已退款</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="mgi-price-info">
                        <view class="mpi-line">
                            <view>金额小计</view><view>¥{{ orderInfo.amount || 0 }}</view>
                        </view>
                        <view class="mpi-line">
                            <view>积分抵扣</view><view>¥{{ orderInfo.deduction_amount || 0 }}</view>
                        </view>
                        <view class="mpi-line">
                            <view>折扣金额</view><view>¥{{ orderInfo.discount_amount || 0 }}</view>
                        </view>
                        <view class="mpi-line">
                            <view>优惠券优惠</view><view>¥{{ orderInfo.coupons_amount || 0 }}</view>
                        </view>
                        <view class="mpi-line">
                            <view>运费</view><view>¥{{ orderInfo.product_logistics_price || 0 }}</view>
                        </view>
                        <view class="mpi-total"><text>合计支付：</text>￥{{ orderInfo.pay_amount || 0 }}</view>
                    </view>
                </view>
                <view class="md-box">
                    <p-line :keyname="'下单时间'" :value="orderInfo.created_at || '-'" ></p-line>
                    <p-line :keyname="'订单编号'" :value="orderInfo.order_no || '-'" isbtn></p-line>
                    <p-line :keyname="'支付方式'" :value="payTypeTxt(orderInfo.pay_type) || '-'" ></p-line>
                    <p-line :keyname="'交易流水号'" :value="orderInfo.trade_no || '-'"></p-line>
                    <block v-if="orderInfo.status == 7">
                        <p-line :keyname="'退款编号'" :value="orderInfo.refund_no || '-'"></p-line>
                        <p-line :keyname="'退款时间'" :value="orderInfo.refund_time || '-'"></p-line>
                        <p-line :keyname="'退款金额'" :value="orderInfo.refund_amount || '0'" ></p-line>
                    </block>
                    
                </view>
            </view>
            <view class="ms-fixed-bar">
                <view class="mfb-btns">
                    <!-- <view>查看退款</view> -->
                    <view v-if="isRufundBtn" class="red" @click="toRefund">主动退款</view>
                    <view v-if="orderInfo.status == 1&&orderInfo.after_sale_status == 0" class="green" @click="toSendOut">发货</view>
                </view>
            </view>
        </view>
        
    </view> 
</template>

<script>
// 0 待付款 / 1 待发货 / 2 待收货 / 3 待评价 / 4 交易完成 / 5 订单关闭 / 6 退款中 / 7 退款完成 / 8 退款失败 / 9 已删除
import p_line from '../../../components/p_line/p_line.vue';
import { ORDER_API } from '../../../js/api';
import server from '../../../js/server';
import util from '../../../../../utils/util';
export default {
    computed: {
        isRufundBtn(){
            let { orderInfo } = this;
            return (orderInfo.status!=6 || orderInfo.status != 7) && orderInfo.after_sale_status == 0
        },
        order_custom(){
            let { orderInfo } = this;
            if(orderInfo&&orderInfo.product_order_custom)return (orderInfo.product_order_custom || {})
            return {};
        },
        logisticsInfo(){
            let { orderInfo } = this;
            if(orderInfo.product_order_logistics_data&&orderInfo.product_order_logistics_data.length){
                return orderInfo.product_order_logistics_data[orderInfo.product_order_logistics_data.length - 1]; // 最后为最新
            }
            return null
        }
    },
    components: {
        'p-line': p_line,
    },
    data(){
        return {
            orderInfo: {}
        }
    },
    onLoad(options){
        this.getInfo(options.order_no);
    },
    methods: {
        // 主动退款
        toRefund(){
            let { orderInfo } = this;
            // let _ls = this.sendAndNotRefundList() || [];
            // if(!_ls.length)return;
            // if(_ls.length == 1)
            return util.routeTo(`/subpackage/order/pages/mall/refund_operate/refund_operate?order_no=${orderInfo.order_no}&brand_id=${orderInfo.brand_id}`, 'nT');
            // util.routeTo(`/subpackage/order/pages/mall/refund_list/refund_list?order_no=${orderInfo.order_no}&brand_id=${orderInfo.brand_id}`, 'nT');
        },
        // 已发货为退款列表
        // sendAndNotRefundList(){
        //     let { orderInfo } = this;
        //     let _goodsLs = orderInfo.product_order_goods || [];
        //     return _goodsLs.filter(ele=>ele.product_logistics_end == 1&&ele.product_refund_utype == 0);
        // },
        // 快递详情
        toLogisticInfo(){
            let { orderInfo } = this;
            util.routeTo(`/subpackage/order/pages/mall/check_logistic/check_logistic?order_no=${orderInfo.order_no}&brand_id=${orderInfo.brand_id}`, 'nT');
        },
        copyLogisticNum(_data){
            uni.setClipboardData({ data: _data });
        },
        toSendOut(){
            let { orderInfo } = this;
            util.routeTo(`/subpackage/order/pages/mall/send_out/send_out?order_no=${orderInfo.order_no}&brand_id=${orderInfo.brand_id}`, 'nT');
        },
        payTypeTxt: util.order_pay_type_txt,
        getInfo(order_no){
            util.showLoad();
            server.get({
                url: ORDER_API.shop2OrderInfo,
                data: { order_no },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _order = res.order || {};
                this.orderInfo = _order;
            })
        },
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .mall-detail{
        padding-bottom: 128upx;
        padding-bottom: calc( 128upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
        padding-bottom: calc( 128upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
    }
    .md-send{
        .ms-status-bar{
            padding: 0 44upx;
            line-height: 108upx;
            font-size: 36upx;
            color: #fff;
            background-color: #0a9a79;
        }
        .ms-send-info{
            padding: 0 44upx;
            height: 108upx;
            background-color: #fff;
            @include centerFlex(space-between);
            .msi-txt{
                @include centerFlex(flex-start);
                >view{
                    &:first-child{
                        font-size: 28upx;
                        color: #000;
                        @include textHide(1);
                    }
                    &+view{
                        flex-shrink: 0;
                        margin-left: 20upx;
                        font-size: 28upx;
                        color: $themeColor;
                    }
                }
            }
            >image{
                margin-left: 20upx;
                flex-shrink: 0;
                width: 32upx;
                height: 32upx;
            }

        }
        .ms-main{
            padding: 24upx;
        }
        .ms-consignee{  
            .mc-mode{
                margin-bottom: 10upx;
                line-height: 40upx;
                font-size: 28upx;
                color: #1a1a1a;
                @include textHide(1);
            }
            .mc-name{
                margin-bottom: 6upx;
                line-height: 44upx;
                font-weight: 500;
                font-size: 32upx;
                color: #1a1a1a;
                @include textHide(1);
                >text{
                    margin-left: 50upx;
                }
            }
            .mc-addr{
                margin-bottom: 16upx;
                line-height: 40upx;
                font-size: 28upx;
                color: #9a9a9d;
            }
            .mc-code{
                font-size: 32upx;
                line-height: 52upx;
                color: #9a9a9d;
                @include textHide(1);
                &.green{
                    color: $themeColor;
                }
            }
            .mc-time{
                font-size: 32upx;
                line-height: 52upx;
                color: #1a1a1a;
                @include textHide(1);
            }
        }   
        .ms-goods-info{
            .mgi-goods-ls{
                .mgl-item{
                    margin-bottom: 30upx;
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    border-bottom: 2upx solid #F2F2F7;
                    >image{
                        margin-right: 20upx;
                        flex-shrink: 0;
                        flex-grow: 0;
                        width: 180upx;
                        height: 180upx;
                        border-radius: 6upx;
                    }
                    >view{
                        flex-grow: 1;
                        .mi-name{
                            display: flex;
                            align-items: flex-start;
                            margin-bottom: 12upx;
                            >view{
                                &:first-child{
                                    flex-grow: 1;
                                    line-height: 40upx;
                                    font-size: 28upx;
                                    color: #333;
                                    @include textHide(2);
                                }
                                &+view{
                                    margin-left: 24upx;
                                    flex-shrink: 0;
                                    max-width: 130upx;
                                    line-height: 34upx;
                                    font-size: 24upx;
                                    color: #1a1a1a;
                                    @include textHide(1);
                                }
                            }
                        }
                        .mi-spec{
                            margin-bottom: 12upx;
                            @include centerFlex(space-between);
                            >view{
                                line-height: 40upx;
                                color: #9a9a9d;
                                &:first-child{
                                    font-size: 24upx;
                                    @include textHide(1);
                                }
                                &+view{
                                    margin-left: 20upx;
                                    flex-shrink: 0;
                                    max-width: 30%;
                                    font-size: 28upx;
                                    @include textHide(1);
                                }
                            }
                        }
                        .mi-amount{
                            margin-bottom: 20upx;
                            @include centerFlex(space-between);
                            >view{
                                &:first-child{
                                    flex-grow: 1;
                                    font-size: 28upx;
                                    color: #1a1a1a;
                                    @include textHide(1);
                                    >text{
                                        font-size: 32upx;
                                        font-weight: 500;
                                    }
                                }
                                &+view{
                                    flex-shrink: 0;
                                    margin-left: 20upx;
                                    line-height: 40upx;
                                    font-size: 28upx;
                                    color: #EA5061;
                                }
                            }
                            
                        }
                    }
                }
            }
        }
        .mgi-price-info{
            .mpi-line{
                margin-bottom: 30upx;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        flex-shrink: 0;
                        margin-right: 20upx;
                        font-size: 28upx;
                        color: #9a9a9d;
                    }
                    &+view{
                        @include textHide(1);
                        font-size: 24upx;
                        color: #333;
                    }
                }
            }
            .mpi-total{
                text-align: right;
                font-size: 32upx;
                line-height: 40upx;
                color: #1a1a1a;
                @include textHide(1);
                >text{
                    font-size: 28upx;
                    color: #9A9A9D;
                }
            }
        }
        .ms-fixed-bar{
            position: fixed;
            left: 0;
            width: 100%;
            bottom: 0;
            padding: 10upx 24upx;
            padding-bottom: calc( 10upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
            padding-bottom: calc( 10upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
            background-color: #f2f2f7;
            .mfb-btns{
                @include centerFlex(flex-end);
                >view{
                    margin-left: 20upx;
                    width: 192upx;
                    line-height: 88upx;
                    text-align: center;
                    font-size: 32upx;
                    font-weight: 500;
                    border-radius: 10upx;
                    background-color: #fff;
                    color: $themeColor;
                    &.red{
                        color: #EA5061;
                    }
                    &.green{
                        background-color: $themeColor;
                        color: #fff;
                    }
                }
            }
        }
    }
    
    .md-box{

        margin-bottom: 24upx;
        padding: 30upx 20upx;
        border-radius: 10upx;
        background-color: #fff;
    }
    .md-tit{
        margin-bottom: 30upx;
        line-height: 44upx;
        font-weight: 500;
        font-size: 32upx;
        color: #1a1a1a;
    }
</style>