<template>
    <view class="waper">
        <u-navbar :autoBack="true" :placeholder="true" bgColor="#fff">
        	<view slot='center' class="navbar_title">退款详情</view>
        </u-navbar>
        <view class="waper_box">
            <view class="list" v-for="(i, index) in list" :key="index" @click="toDetail(i.id)">
                <view class="title">
                    <view>{{i.refundStatusName}}</view>
                    <view>退款编号：{{i.refundCode}}</view>
                </view>
                <view class="content">
                    <view class="money">
                        <view class="left">退款金额：¥{{i.actualPrice}}（{{i.refundQuantity}}张）</view>
                        <view class="right" @click.stop="tabShow(index)">
                            <view>{{i.show ? '收起' : '展开'}}</view>
                            <view class="icon">
                                <u-icon :name="i.show ? 'arrow-up' : 'arrow-down'" color="#999" size="26rpx"></u-icon>
                            </view>
                        </view>
                    </view>
                    <view class="fee" v-show="i.show">手续费：¥{{i.totalFee}}</view>
                    <view class="step" v-show="i.show">
                        <view class="step_list step_active">
                            <view class="text">申请退款</view>
                            <view class="time">{{i.createTime}}</view>
                            <view class="active">
                                <image src="https://common/refund_active.png" mode=""></image>
                            </view>
                        </view>
                        <view :class="'step_list' + (i.refundStatus > 1 ? ' step_active' : '')">
                            <view class="text">退款待审核</view>
                            <view class="active" v-if="i.refundStatus > 1">
                                <image src="https://common/refund_active.png" mode=""></image>
                            </view>
                            <view class="icon" v-else></view>
                        </view>
                        <view :class="'step_list' + (i.refundStatus > 1 ? ' step_active' : '') + (i.updateTime ? '' : ' add_time')">
                            <view class="text over_text" v-if="i.refundStatus == '100'">审核驳回</view>
                            <view class="text over_text" v-if="i.refundStatus == '200'">退款成功，资金原路返回</view>
                            <view class="text over_text" v-if="i.refundStatus == '2'">退款中，预计在1-3个工作日完成</view>
                            <view class="text over_text" v-if="i.refundStatus == '4'">退款失败，请联系管理员</view>
                            <view class="time" v-if="i.updateTime">{{i.updateTime}}</view>
                            <view class="active" v-if="i.refundStatus > 1">
                                <image src="https://common/refund_active.png" mode=""></image>
                            </view>
                            <view class="icon" v-else></view>
                            <view class="msg" v-if="i.refundStatus == '100' && i.refundDescribe[1]">拒绝原因：{{i.refundDescribe}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            list: []
        }
    },
    async onLoad (options) {
        let info = await this.$http.getRefundListByOrderId(options.orderId);
        for (var i = 0; i < info.data.length; i ++) {
            info.data[i].show = true;
        }
        this.list = info.data;
    },
    methods: {
        tabShow (index) {
            this.list[index].show = !this.list[index].show;
        },
        toDetail (id) {
            uni.navigateTo({ url: '/pages/my/refundDetail?id=' + id })
        }
    }
}
</script>

<style lang="scss">
page{ background: #F6F6F6; }
.waper_box{
    width: 100%; box-sizing: border-box; padding: 32rpx;
    .list{
        width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; margin-bottom: 24rpx;
        &:last-child{ margin-bottom: 0; }
        .title{
            padding-bottom: 24rpx; border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
            view{
                &:nth-child(1){ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: bold; }
                &:nth-child(2){ margin-top: 8rpx; line-height: 40rpx; font-size: 28rpx; color: #999; font-weight: 500; }
            }
        }
        .content{
            width: 100%; margin-top: 24rpx;
            .money{
                width: 100%; height: 40rpx; display: flex; justify-content: space-between; align-items: center;
                .left{ color: #666; font-size: 28rpx; font-weight: 500; }
                .right{
                    color: #999; display: flex; align-items: center; font-size: 28rpx;
                    .icon{ margin-left: 12rpx; }
                }
            }
            .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); }
                }
            }
        }
    }
}
</style>