<template>
    <div class="sales-stat-cards">
        <!-- Top Status Cards -->
        <div class="status-cards">
            <div
                v-for="(item, index) in statusData"
                :key="index"
                class="status-card"
            >
                <div class="status-value">{{ item.value }}</div>
                <div class="status-label">{{ item.label }}</div>
            </div>
        </div>

        <!-- Main Sales Stats Grid -->
        <div class="stats-grid">
            <div
                v-for="(item, index) in salesData"
                :key="index"
                class="stat-card"
            >
                <div class="stat-header">{{ item.label }}</div>
                <div class="stat-value">{{ item.value }}</div>
                <div class="stat-compare"> 昨日 {{ item.yesterdayValue }} </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    defineProps({
        statusData: {
            type: Array,
            default: () => []
        },
        salesData: {
            type: Array,
            default: () => []
        }
    });
</script>

<style scoped lang="scss">
    .sales-stat-cards {
        margin-bottom: 20px;
    }

    .status-cards {
        display: flex;
        justify-content: space-between;
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;

        .status-card {
            text-align: center;
            flex: 1;
            position: relative;

            &:not(:last-child)::after {
                content: '';
                position: absolute;
                right: 0;
                top: 10%;
                height: 80%;
                width: 1px;
                background-color: #e0e0e0;
            }

            .status-value {
                font-size: 24px;
                font-weight: bold;
                color: #333;
                margin-bottom: 5px;
            }

            .status-label {
                font-size: 14px;
                color: #666;
            }
        }
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;

        .stat-card {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .stat-header {
                font-size: 14px;
                color: #666;
                margin-bottom: 10px;
            }

            .stat-value {
                font-size: 24px;
                font-weight: bold;
                color: #333;
                margin-bottom: 5px;
            }

            .stat-compare {
                font-size: 12px;
                color: #999;
            }
        }
    }
</style>
