<template>
    <view class="waper">
        <u-navbar :autoBack="true" bgColor="#03AE80" left-icon-color="#fff">
        	<view slot='center' class="navbar_title">退款详情</view>
        </u-navbar>
        <view class="banner" v-if="detail">
            <view class="title">{{detail.refundStatusName}}</view>
            <view class="code">退款编号：{{detail.refundCode}}</view>
            <image src="https://common/refund_banner.png" mode=""></image>
        </view>
        <view class="waper_box" v-if="detail">
            <view class="money">
                <view class="title">退款金额：¥{{detail.orderRefundItemList[0].actualPrice}}（{{detail.orderRefundItemList[0].refundQuantity}}张）</view>
                <view class="fee">手续费：¥{{detail.orderRefundItemList[0].totalFee}}</view>
                <view class="step">
                    <view class="step_list step_active">
                        <view class="text">申请退款</view>
                        <view class="time">{{detail.createTime}}</view>
                        <view class="active">
                            <image src="https://refund_active.png" mode=""></image>
                        </view>
                    </view>
                    <view :class="'step_list' + (detail.refundStatus > 1 ? ' step_active' : '')">
                        <view class="text">退款待审核</view>
                        <view class="active" v-if="detail.refundStatus > 1">
                            <image src="https://refund_active.png" mode=""></image>
                        </view>
                        <view class="icon" v-else></view>
                    </view>
                    <view :class="'step_list' + (detail.refundStatus > 1 ? ' step_active' : '') + (detail.updateTime ? '' : ' add_time')">
                        <view class="text over_text">{{detail.refundStatus == '100' ? '审核驳回' : '退款成功，资金原路返回'}}</view>
                        <view class="time" v-if="detail.updateTime">{{detail.updateTime}}</view>
                        <view class="active" v-if="detail.refundStatus > 1">
                            <image src="https://common/refund_active.png" mode=""></image>
                        </view>
                        <view class="icon" v-else></view>
                        <view class="msg" v-if="detail.refundStatus == '100' && detail.refundDescribe">拒绝原因：{{detail.refundDescribe}}</view>
                    </view>
                </view>
            </view>
            <view class="info">
                <view class="title">退款信息</view>
                <view class="content">
                    <view class="list">
                        <view>退款单号</view>
                        <view>{{detail.refundCode}}</view>
                    </view>
                    <view class="list">
                        <view>申请时间</view>
                        <view>{{detail.createTime}}</view>
                    </view>
                    <view class="list">
                        <view>申请原因</view>
                        <view v-if="detail.personalRefundTypeName">个人原因:{{detail.personalRefundTypeName}}</view>
                        <view v-if="detail.businessRefundTypeName">商家原因:{{detail.businessRefundTypeName}}</view>
                    </view>
                    <view class="list" v-if="detail.refundStatus == '100' && detail.refundDescribe">
                        <view>拒绝原因</view>
                        <view>{{detail.refundDescribe}}</view>
                    </view>
                </view>
            </view>
            <view class="refund">
                <view class="title">退改规则</view>
                <view class="cont">
                    <view>{{detail.orderRefundItemList[0].zdyTicket.refundRuleName}}</view>
                    <view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '0'">{{detail.refundRemark || '门票一经售出，不可退款'}}</view>
                    <view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '3'">门票有效期内可退</view>
                    <view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '4'">订单生成后{{detail.orderRefundItemList[0].zdyTicket.refundDay}}天内可退</view>
                    <view v-if="detail.orderRefundItemList[0].zdyTicket.refundRule == '5'">未激活可退</view>
                </view>
                <view class="fee">
                    <view class="fee_title">退款手续费</view>
                    <view class="fee_cont">
                        <view v-if="detail.orderRefundItemList[0].zdyTicket.isFee == 0">无需手续费</view>
                        <view v-if="detail.orderRefundItemList[0].zdyTicket.isFee == 1 && detail.orderRefundItemList[0].zdyTicket.feeType == '1'">退款需扣除手续费{{(detail.orderRefundItemList[0].zdyTicket.deductionFees) + (detail.orderRefundItemList[0].zdyTicket.deductionFeesUnit == '1' ? '%' : '元')}}</view>
                        <view v-if="detail.orderRefundItemList[0].zdyTicket.isFee == 1 && detail.orderRefundItemList[0].zdyTicket.feeType == '2'" v-for="(i, index) in detail.orderRefundItemList[0].zdyTicket.refundRuleList" :key="index">游玩前{{i.day}}天内退票，需扣除手续费{{i.deductionFees}}{{i.deductionFeesUnit == '1' ? '%' : '元'}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

<style lang="scss">

.navbar_title{ color: #fff; }
.banner{
    width: 100%; height: 394rpx; background: #03AE80; box-sizing: border-box; padding: 208rpx 0 0 62rpx; position: relative; color: #fff; overflow: hidden;
    .title{ line-height: 68rpx; font-size: 48rpx; font-weight: bold; }
    .code{ margin-top: 6rpx; line-height: 40rpx; font-size: 28rpx; font-weight: 500; }
    image{ width: 245rpx; height: 245rpx; position: absolute; bottom: -40rpx; right: -18rpx; }
}
.waper_box{
    width: 100%; box-sizing: border-box; padding: 0 32rpx 32rpx; margin-top: -50rpx; position: relative; z-index: 3;
    .money{
        width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff;
        .title{ line-height: 40rpx; color: #666; font-size: 28rpx; font-weight: 500; }
        .fee{ margin-top: 24rpx; line-height: 40rpx; color: #666; font-size: 28rpx; font-weight: 500; }
        .step{
            width: 100%; margin-top: 32rpx;
            .step_list{
                width: 100%; padding-left: 44rpx; position: relative; margin-bottom: 32rpx;
                .text{ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; }
                .time{ margin-top: 4rpx; line-height: 34rpx; color: #999; font-size: 24rpx; }
                &::after{ content: ""; width: 2rpx; height: 100%; background: #E8E8E8; position: absolute; left: 10rpx; top: calc(50% + 7rpx); z-index: 5; }
                &.step_active::after{ background: #03AE80; }
                &.step_active .over_text{ color: #03AE80; }
                &:nth-child(2)::after{ width: 0; }
                .icon{ width: 10rpx; height: 10rpx; background: #999; border-radius: 10rpx; position: absolute; left: 6rpx; top: 50%; transform: translateY(-50%); z-index: 6; }
                .active{ width: 20rpx; height: 20rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
                .msg{ margin-top: 12rpx; color: #333; font-size: 26rpx; line-height: 36rpx; }
                &:last-child{
                    margin-bottom: 0;
                    &::after{ top: auto; bottom: calc(50% + 7rpx); }
                }
                &.add_time::after{ height: calc(100% + 30rpx); }
            }
        }
    }
    .info{
        width: 100%; margin-top: 24rpx; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff;
        .title{ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; }
        .content{
            width: 100%; margin-top: 32rpx;
            .list{
                width: 100%; box-sizing: border-box; padding-left: 130rpx; position: relative; margin-bottom: 30rpx; min-height: 40rpx;
                &:last-child{ margin-bottom: 0; }
                view{
                    color: #666; font-size: 28rpx; font-weight: 500; text-align: right;
                    &:nth-child(1){ line-height: 40rpx; position: absolute; left: 0; top: 0; }
                }
            }
        }
    }
    .refund{
        width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff; margin-top: 24rpx;
        .title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
        .cont{
            width: 100%; margin-top: 32rpx;
            view{
                &:nth-child(1){ display: inline-block; padding: 0 32rpx; background: rgba(3,174,128,0.1); border-radius: 2rpx; line-height: 40rpx; vertical-align: top; color: #03AE80; font-size: 20rpx; }
                &:nth-child(2){ margin-top: 12rpx; color: #666; line-height: 40rpx; font-size: 28rpx; }
            }
        }
        .fee{
            width: 100%; margin-top: 30rpx;
            .fee_title{ display: inline-block; padding: 0 32rpx; background: rgba(255,88,51,0.1); border-radius: 2rpx; line-height: 40rpx; vertical-align: top; color: #FF5833; font-size: 20rpx; }
            .fee_cont{
                color: #666; line-height: 40rpx; font-size: 28rpx;
                view{ margin-top: 12rpx; }
            }
        }
    }
}
</style>