<template>
    <view class="waper">
        <u-navbar :autoBack="true" :placeholder="true" bgColor="#FBFBFB">
        	<view slot='center' class="navbar_title">退款详情</view>
        </u-navbar>
        <view class="waper_content" v-if="detail">
            <view class="status">
                <view class="top">
                    <view class="icon">
                        <u-icon name="checkmark-circle-fill" size="30rpx" color="#01be69" v-if="detail.refundStatus != '-1'"></u-icon>
                        <u-icon name="close-circle-fill" size="30rpx" color="#cd674f" v-if="detail.refundStatus == '-1'"></u-icon>
                    </view>
                    <view class="text">
                        <view>{{detail.refundStatusName}}</view>
                        <view>{{detail.createTime}}</view>
                    </view>
                </view>
                <view class="bottom" v-if="detail.refundStatus == '-1'">商家拒绝退款，本次退款申请关闭，如问题仍未解决，您可以在确认收货前重新发起申请。</view>
            </view>
            <view class="money" v-if="detail.refundStatus > 0">
                <view>退款总金额</view>
                <view><text>￥</text>{{detail.refundFee}}</view>
            </view>
            <view class="info" v-if="detail.goodsList.length > 0">
                <view class="title">{{detail.goodsList[0].storeName}}</view>
                <view class="goods" v-for="(i, index) in detail.goodsList" :key="index">
                    <view class="img">
                        <image :src="$utils.setImgUrl(i.image)" mode=""></image>
                    </view>
                    <view class="text">
                        <view class="name">{{i.title}}</view>
                        <view class="tag">
                            <view>
                                <text v-if="i.goodsSkuText">{{i.goodsSkuText.split(',').join('-')}}</text>
                                
                            </view>
                            <view>X{{i.goodsNum}}</view>
                        </view>
                        <view class="num">总价：￥{{(i.goodsNum * i.price).toFixed(2)}}</view>
                    </view>
                </view>
            </view>
            <view class="list_waper">
                <view class="list">
                    <view>订单编号</view>
                    <view>
                        <text>{{detail.zdyWcscOrder.orderSn}}</text>
                        <text>复制</text>
                    </view>
                </view>
                <view class="list">
                    <view>退款原因</view>
                    <view>{{detail.reasonText}} {{detail.content}}</view>
                </view>
                <view class="list">
                    <view>退款金额</view>
                    <view>{{detail.refundFee}}</view>
                </view>
                <view class="list">
                    <view>申请时间</view>
                    <view>{{detail.createTime}}</view>
                </view>
                <!-- 成功 -->
                <view class="list" v-if="detail.refundStatus == 2">
                    <view>退款时间</view>
                    <view>{{detail.updateTime}}</view>
                </view>
                <!-- 失败 -->
                <view class="list" v-if="detail.refundStatus == -1">
                    <view>失败原因</view>
                    <view>{{detail.checkReason}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            detail: null
        }
    },
    async onLoad (options) {
        let info = await this.$shop.orderRefundDetail(options.id);
        this.detail = info.data;
    }
}
</script>

<style lang="scss">

.waper_content{
    width: 100%; box-sizing: border-box; padding: 24rpx;
    .status{
        width: 100%; background: #fff; border-radius: 10rpx; padding: 24rpx; box-sizing: border-box;
        .top{
            width: 100%; box-sizing: border-box; padding-left: 50rpx; position: relative;
            .icon{
				position: absolute; left: 0; top: 0;
				/deep/.u-icon__icon { color: #03AE80 !important; font-size: 32rpx !important; }
			}
            .text{
                width: 100%; line-height: 33rpx; color: rgba(0,0,0,0.65); font-size: 28rpx;
                view:first-child{ font-weight: 500; margin-bottom: 18rpx; color: rgba(0,0,0,0.85); }
            }
        }
        .bottom{ margin-top: 24rpx; padding-top: 24rpx; border-top: 1rpx solid  rgba(0,0,0,0.1); line-height: 36rpx; color: rgba(0,0,0,0.45); font-size: 26rpx; }
    }
    .money{
        width: 100%; background: #fff; border-radius: 10rpx; padding: 0 24rpx; box-sizing: border-box; height: 129rpx; display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;
        view{
            color: rgba(0,0,0,0.85);
            &:nth-child(1){ font-size: 28rpx; font-weight: 500; }
            &:nth-child(2){
				font-size: 54rpx; font-weight: bold;
				text { font-size: 32rpx; font-weight: 400; }
			}
        }
    }
    .info{
        width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx 24rpx; margin-top: 20rpx;
        .title{ line-height: 38rpx; color: rgba(0,0,0,0.85); font-size: 32rpx; font-weight: 500; }
        .goods{
            width: 100%; margin-top: 25rpx; box-sizing: border-box; padding-left: 190rpx; position: relative; margin-bottom: 28rpx; min-height: 170rpx;
            &:last-child{ margin-bottom: 0; }
            .img{
                width: 170rpx; height: 170rpx; position: absolute; left: 0; top: 0;
                image{ border-radius: 10rpx; }
            }
            .text{
                width: 100%;
                .name{ line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
                .tag{
                    width: 100%; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center; height: 48rpx;
                    view{
                        &:nth-child(1){
                            display: flex; align-items: center;
                            text{ height: 48rpx; padding: 0 24rpx; background: #F4F4F4; border-radius: 2rpx; color: rgba(0,0,0,0.65); font-size: 24rpx; line-height: 48rpx; }
                        }
                        &:nth-child(2){ color: rgba(0,0,0,0.65); font-size: 24rpx; }
                    }
                }
                .num{ width: 100%; margin-top: 30rpx; line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; text-align: right; }
            }
        }
    }
    .list_waper{
        width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx; margin-top: 20rpx;
        .list{
            width: 100%; box-sizing: border-box; padding-left: 130rpx; position: relative; min-height: 40rpx; margin-bottom: 24rpx;
            &:last-child{ margin-bottom: 0; }
            view{
                &:nth-child(1){ color: rgba(0,0,0,0.65); font-size: 28rpx; position: absolute; left: 0; top: 0; line-height: 33rpx; }
                &:nth-child(2){
                    color: rgba(0,0,0,0.85); font-size: 28rpx; line-height: 33rpx; display: flex; width: 100%; justify-content: flex-end; align-items: center; text-align: right;
                    text:last-child{
                        margin-left: 48rpx; color: #3F79FF; position: relative;
                        &::after{ content: ""; width: 2rpx; height: 24rpx; background: #A2A2A4; position: absolute; left: -23rpx; top: 50%; transform: translateY(-50%); }
                    }
                }
            }
        }
    }
}
</style>