<template>
    <div class="header__item">
        <header>
            <div class="icon">
                <img src="@/assets/icons/order.svg">
            </div>
            <p class="title">今日新增订单</p>
        </header>
        <footer>
            <p class="count">15单</p>
            <p class="compare__text">
                <span style="color:#f40">10%↑</span>
                <!-- <span style="color:#0da777">↓</span> -->
                <span>相较于昨日</span>
            </p>
        </footer>
    </div>
    <div class="header__item">
        <header>
            <div class="icon">
                <img src="@/assets/icons/order.svg">
            </div>
            <p class="title">今日新增陪玩</p>
        </header>
        <footer>
            <p class="count">12人</p>
            <p class="compare__text">
                <span style="color:#f40">2%↑</span>
                <!-- <span style="color:#0da777">↓</span> -->
                <span>相较于昨日</span>
            </p>
        </footer>
    </div>
    <div class="header__item">
        <header>
            <div class="icon">
                <img src="@/assets/icons/money.svg">
            </div>
            <p class="title">今日订单金额</p>
        </header>
        <footer>
            <p class="count">￥1,238</p>
            <p class="compare__text">
                <span style="color:#f40">10%↑</span>
                <!-- <span style="color:#0da777">↓</span> -->
                <span>相较于昨日</span>
            </p>
        </footer>
    </div>
    <div class="header__item">
        <header>
            <div class="icon">
                <img src="@/assets/icons/order.svg">
            </div>
            <p class="title">今日活跃代理数</p>
        </header>
        <footer>
            <p class="count">8人</p>
            <p class="compare__text">
                <!-- <span style="color:#f40">10%↑</span> -->
                <span style="color:#0da777">5%↓</span>
                <span>相较于昨日</span>
            </p>
        </footer>
    </div>
    <div class="header__item">
        <header>
            <div class="icon">
                <img src="@/assets/icons/order.svg">
            </div>
            <p class="title">本月订单总数</p>
        </header>
        <footer>
            <p class="count">1,558单</p>
            <p class="compare__text">
                <span style="color:#f40">2%↑</span>
                <!-- <span style="color:#0da777">↓</span> -->
                <span>相较于上月</span>
            </p>
        </footer>
    </div>
</template>

<script setup lang='ts'>
</script>
<style scoped lang='scss'>
$colors: #00b882, #4d76eb, #db4c4d, #dc6333, #897dd7;
.header__item {
    border-radius: 4px;
    background: #fff;
    height: 100px;
    padding: 0 12px;

    // Loop through each item and apply colors
    @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
            border-right: 3px solid nth($colors, $i);

            header .icon {
                background: nth($colors, $i);
                // Create a lighter version of the color for box-shadow
                box-shadow: 0 2px 8px rgba(nth($colors, $i), 0.15);
            }
        }
    }

    header {
        height: 60px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid $dashLineColor;
        box-sizing: border-box;

        .title {
            font-size: 14px;
            font-weight: bold;
            color: $titleTextColor;
        }

        .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            width: 25px;
            height: 25px;

            img {
                width: 16px;
                height: 16px;
            }
        }
    }

    footer {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .count {
            font-weight: bold;
        }

        .compare__text {
            font-size: 11px;
            color: #a7a5a6;
            font-weight: 600;
        }
    }
}
</style>