<template>
    <view class="retail-container">
        <view class="rc-header">
            <view class="ra-header">
							<image mode="aspectFit" src="/static/images/icon/retail/storeIcon.png"></image>
							<text>{{ orderInfo.source || '-' }}</text>
							<view></view>
						</view>
						<view class="rh-name">
								<view class="rh-name-line">
									<view>
										<view>微信昵称：</view>
										<text>{{ orderInfo.nickname || '-' }}</text>
									</view>
									<view :style="{color:getStatus(orderInfo.pay_status)==='已退款'?'#EA5061':'#9C9C9F'}">{{ getStatus(orderInfo.pay_status) }}</view>
								</view>
								<view class="rh-name-line">
									<view>
										<view>手机号码：</view>
										<text>{{ orderInfo.mobile || '-' }}</text>
									</view>
								</view>
								<!-- <view class="rh-name-line">
									<view>
										<view>身份：</view>
										<text>{{ orderInfo.sys_optuname || '-' }}</text>
									</view>
								</view> -->
								<view class="rh-name-line">
									<view>
										<view>下单途径：</view>
										<text>{{ orderInfo.retail_source || '-' }}</text>
									</view>
								</view>
            </view>
        </view>
        <view class="rc-goods-info" v-if="orderInfo.retail_order_goods&&orderInfo.retail_order_goods.length">
            <view class="rgi-tit">商品详情</view>
            <view class="rgi-goods-ls">
                <view class="rgl-item" v-for="(e, i) in orderInfo.retail_order_goods" :key="i">
                    <view class="rgl-item-desc">
											<view>{{ e.erp_retail_goods ? (e.erp_retail_goods.goods_name || '-') : (e.name || '-') }}</view>
											<view>￥{{ e.erp_retail_goods ? e.erp_retail_goods.assistant_price || 0 : 0 }}</view>
										</view>
										<view class="rgl-item-sku">sku：{{ e.erp_retail_goods ? (e.erp_retail_goods.erp_goods ? e.erp_retail_goods.erp_goods.erp_goods_sku : '-') : '-' }}</view>
										<view class="rgl-item-type-spec">
											<view>型号：{{ e.erp_retail_goods ? (e.erp_retail_goods.erp_goods ? e.erp_retail_goods.erp_goods.erp_goods_type : '-') : '-' }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;规格：{{ e.spec || '-' }}</view>
											<text>x{{ e.nums || 0 }}</text>
										</view>
										<view v-if="orderInfo.retail_order_goods.length - 1 == i ? false : true" class="rgl-item-bottom-line"></view>
                </view>
            </view>
        </view>
				<view class="rc-total-amount-info">
				    <view class="rc-total-amount-line">
							<view>金额小计</view>
							<text>￥{{ orderInfo.amount || 0 }}</text>
						</view>
						<view class="rc-total-amount-line">
							<view>积分抵扣</view>
							<text>￥{{ orderInfo.deduction_amount || 0 }}</text>
						</view>
						<view class="rc-total-amount-line">
							<view>折扣金额</view>
							<text>-￥{{ orderInfo.discount_amount || 0 }}</text>
						</view>
						<view class="rc-total-amount-line">
							<view>优惠券优惠</view>
							<text>-￥{{ orderInfo.coupons_amount || 0 }}</text>
						</view>
				    <view class="rgi-total"><text>合计支付：</text>￥{{ orderInfo.pay_amount || 0 }}</view>
				</view>
        <view class="rc-pay-info">
            <!-- 订单编号   -->
            <view class="rpi-tit">支付详情</view>
            <p-line :keyname="'订单编号'" :value="orderInfo.order_no || '-'" isbtn></p-line>
            <!-- <p-line :keyname="'支付方式'" :value="payTypeTxt(orderInfo.pay_type, orderInfo.card_no)"></p-line> -->
						<p-line :keyname="'支付方式'" :value="orderInfo.extension ? orderInfo.extension.pay_type_text || '-' : '-'"></p-line>
            <p-line :keyname="'支付时间'" :value="orderInfo.pay_time || '-'"></p-line>
        </view>
				<!-- <view v-if="orderInfo.refunds&&orderInfo.refunds.length">
					<view class="rc-refund-info" v-for="(item, index) in orderInfo.refunds" :key="index">
							<view class="rpi-tit">退款信息{{ index + 1 }}</view>
							<p-line :keyname="'退款金额：'" :value="item.refund_amount ? '￥' + item.refund_amount : '￥0'"></p-line>
							<p-line :keyname="'退款单号：'" :value="item.refund_no || '-'"></p-line>
							<p-line :keyname="'退款时间：'" :value="item.refund_time || '-'"></p-line>
							<p-line :keyname="'退款原因：'" :value="item.refund_reason || '-'"></p-line>
					</view>
				</view> -->
				<!-- <view v-if="orderInfo.refund_no">
					<view class="rc-refund-info">
							<view class="rpi-tit">退款信息</view>
							<p-line :keyname="'退款金额：'" :value="orderInfo.refund_amount ? '￥' + orderInfo.refund_amount : '￥0'"></p-line>
							<p-line :keyname="'退款单号：'" :value="orderInfo.refund_no || '-'"></p-line>
							<p-line :keyname="'退款时间：'" :value="orderInfo.refund_time || '-'"></p-line>
							<p-line :keyname="'退款原因：'" :value="orderInfo.refund_reason || '商家主动退款'"></p-line>
					</view>
				</view> -->
				<view v-if="refundList.length">
					<view class="rc-refund-info" v-for="(item, index) in refundList" :key="index">
							<view class="rpi-tit">退款信息{{ index + 1 }}</view>
							<p-line :keyname="'退款金额：'" :value="item.refund_amount ? '￥' + item.refund_amount : '￥0'"></p-line>
							<p-line :keyname="'退款单号：'" :value="item.refund_no || '-'"></p-line>
							<p-line :keyname="'退款时间：'" :value="item.refund_time || '-'"></p-line>
							<p-line :keyname="'退款原因：'" :value="item.refund_reason || '商家主动退款'"></p-line>
					</view>
				</view>
    </view>
</template>

<script>
import { ORDER_API } from '../../../js/api';
import server from '../../../js/server';
import util from '../../../../../utils/util';
import s_line from '../../../components/s_line/s_line.vue';
import p_line from '../../../components/p_line/p_line.vue';
import { mapState } from 'vuex';
export default {
    components: {
        's-line': s_line,
        'p-line': p_line,
    },
    data(){
        return {
            orderInfo: {},
						refundList: []
        }
    },
		computed:{
			...mapState([ 'brandInfo',])
		},
    onLoad(options){
        this.getOrderInfo(options.order_no);
    },
    methods: {
        // payTypeTxt: util.order_pay_type_txt,
				payTypeTxt(payType, cardNo) {
					let _obj = {
					    0: '微信支付',
					    1: '支付宝支付',
					    2: `储值卡支付 ${cardNo ? '(' + cardNo + ')' : ''}`,
					    3: '现金支付',
							4: '其他'
					};
					return _obj[payType] || '-'
				},
        getStatus(status){
            let _obj = {
                1: '交易成功',
								4: '已退款'
            }
            return _obj[status] || '-'
        },
        getOrderInfo(order_no){
            util.showLoad();
            server.get({
                url: ORDER_API.retailOrderInfo,
                data: { order_no, brand_id: this.brandInfo.brand.id },
                failMsg: '加载失败！'
            })
            .then(res=>{
                this.orderInfo = res || {};
								// this.orderInfo.refunds = [
								// 	{ refund_amount: this.orderInfo.refund_amount, refund_no: this.orderInfo.refund_no, refund_time: this.orderInfo.refund_time, refund_reason: this.orderInfo.refund_reason },
								// 	{ refund_amount: this.orderInfo.refund_amount, refund_no: this.orderInfo.refund_no, refund_time: this.orderInfo.refund_time, refund_reason: this.orderInfo.refund_reason }
								// ];
								server.get({
								    url: ORDER_API.retailOrderInfoRefundList,
								    data: { order_no, brand_id: this.brandInfo.brand.id },
								    failMsg: '加载失败！'
								})
								.then(res=>{
								    util.hideLoad();
										this.refundList = res.list;
								});
            });
        },

    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .retail-container{

    }
    .rc-header{
        margin-bottom: 26upx;
        padding: 0 24upx;
        background-color: #fff;
				.ra-header {
					position: relative;
					padding: 30upx 0;
					@include centerFlex(flex-start);
					>image {
						width: 32upx;
						height: 30upx;
						margin-right: 14upx;
					}
					>text {
						font-size: 28upx;
						font-weight: 500;
						color: #1A1A1A;
					}
					>view {
						position: absolute;
						bottom: 0%;
						width: 100%;
						height: 2upx;
						background-color: #D8D8D8;
					}
				}
        .rh-name{
						padding: 18upx 0;
						.rh-name-line {
							@include centerFlex(space-between);
							font-size: 28upx;
							font-weight: 400;
							margin-bottom: 10upx;
							
							>view {
								&:first-child {
									color: #9C9C9F;
									@include centerFlex(flex-start);
									flex-grow: 1;
									
									>view {
										width: 152upx;
										flex-shrink: 0;
									}
									>text {
										color: #333;
										@include textHide(1);
									}
								}
								
								&:nth-child(2) {
									flex-shrink: 0;
								}
							}
						}
        }
    }
    .rc-goods-info{
        margin-bottom: 24upx;
        padding: 30upx 24upx 46upx 24upx;
        background-color: #fff;
				font-weight: 500;
        .rgi-tit{
            font-size: 32upx;
						font-weight: 500;
            color: #1a1a1a;
        }
        .rgi-goods-ls{
            .rgl-item{
                padding-top: 30upx;
                // border-bottom: 2upx solid #D8D8D8;
								color: #9C9C9F;
								font-size: 28upx;
								
								.rgl-item-desc {
									display: flex;
									justify-content: space-between;
									margin-bottom: 20upx;
									color: #333;
								}
								.rgl-item-sku {
									margin-bottom: 10upx;
								}
								.rgl-item-type-spec {
									display: flex;
									justify-content: space-between;
									align-items: flex-end;
									>text {
										color: #333;
									}
								}
								.rgl-item-bottom-line {
									width: 100%;
									height: 2upx;
									background-color: #D8D8D8;
									margin-top: 18upx;
								}
            }
        }
    }
		.rc-total-amount-info{
		    margin-bottom: 24upx;
		    padding: 0 24upx;
				padding-top: 1upx;
				background-color: #fff;
				font-size: 28upx;
		    
				.rc-total-amount-line {
					margin-top: 26upx;
					@include centerFlex(space-between);
					>text {
						font-size: 24upx;
					}
				}
		    .rgi-total{
		        text-align: right;
		        line-height: 106upx;
		        font-weight: 500;
		        font-size: 28upx;
		        color: #1a1a1a;
		        white-space: nowrap;
		        text-overflow: ellipsis;
		        overflow: hidden;
		        >text{
		            color: #9a9a9d;
		            font-weight: 400;
		        }
		    }
		}
    .rc-pay-info{
        padding: 30upx;
        background-color: #fff;
        .rpi-tit{
            margin-bottom: 16upx;
            line-height: 44upx;
            font-size: 32upx;
            color: #333;
        }
    }
		.rc-refund-info{
		    padding: 30upx;
				margin-top: 24upx;
		    background-color: #fff;
				.rpi-tit{
				    margin-bottom: 16upx;
				    line-height: 44upx;
				    font-size: 28upx;
				    color: #9C9C9F;
				}
		}
</style>