<template>
    <div class="refund-stats">
        <div class="header">
            <div class="title">已完结退款</div>
            <div class="filters">
                <span class="range-text">统计时间: {{ dateRangeText }}</span>
                <div class="actions">
                    <!-- Filters can be passed via slots or handled in parent, 
                but UI shows them here. Let's make them visual only for now or simple props -->
                    <el-button-group size="small">
                        <el-button>昨日</el-button>
                        <el-button type="primary">7日</el-button>
                        <el-button>30日</el-button>
                    </el-button-group>
                    <el-date-picker
                        size="small"
                        type="daterange"
                        style="width: 200px; margin: 0 10px"
                    />
                    <el-button type="primary" size="small">搜索</el-button>
                    <el-button size="small">重置</el-button>
                </div>
            </div>
        </div>

        <div class="cards-container">
            <div
                v-for="(card, index) in refundData"
                :key="index"
                class="refund-card"
            >
                <div class="card-header">
                    <div class="indicator"></div>
                    <span class="card-title">{{ card.title }}</span>
                </div>

                <div class="card-content">
                    <div class="row">
                        <span class="label">退款人数</span>
                        <span class="value">{{ card.refundUsers }}</span>
                    </div>
                    <div class="row">
                        <span class="label">退款子订单数</span>
                        <span class="value">{{ card.subOrders }}</span>
                    </div>
                    <div class="row">
                        <span class="label">订单退款率</span>
                        <span class="value">{{ card.refundRate }}</span>
                    </div>

                    <div class="divider"></div>

                    <div class="row">
                        <span class="label">退款金额</span>
                        <span class="value">{{ card.refundAmount }}</span>
                    </div>
                    <div class="row">
                        <span class="label">金额退款率</span>
                        <span class="value">{{ card.amountRate }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    defineProps({
        dateRangeText: {
            type: String,
            default: '2025-09-15 ~ 2025-10-14'
        },
        refundData: {
            type: Array,
            default: () => []
        }
    });
</script>

<style scoped lang="scss">
    .refund-stats {
        margin-top: 30px;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .filters {
            display: flex;
            align-items: center;

            .range-text {
                font-size: 12px;
                color: #999;
                margin-right: 20px;
            }
        }
    }

    .cards-container {
        display: flex;
        gap: 15px;
        overflow-x: auto;
    }

    .refund-card {
        flex: 0 0 240px;
        background: #fff;
        border: 1px solid #e6ebf5;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .indicator {
                width: 4px;
                height: 14px;
                background-color: #409eff;
                margin-right: 8px;
                border-radius: 2px;
            }

            .card-title {
                font-weight: bold;
                color: #333;
            }
        }

        .card-content {
            .row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                font-size: 13px;

                .label {
                    color: #666;
                }
                .value {
                    color: #333;
                    font-weight: 500;
                }
            }

            .divider {
                height: 1px;
                background-color: #eee;
                margin: 15px 0;
            }
        }
    }
</style>
