<template>
    <div class="row-cards">
        <div class="card" v-for="item in stats" :key="item.label" shadow="never">
            <div class="flex-between">
                <div class="icon-container" :class="item.iconName">
                    <SvgIcon :name="item.iconName" :size="28" color="#fff" />
                </div>
                <div class="right">
                    <span class="stat-label">{{ item.label }}</span>
                    <div class="stat-number mt-2">{{ item.value }}</div>
                    <span v-if="item.trend" class="stat-trend" :class="item.trendClass">
                        <span>较昨日</span>{{ item.trend }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import SvgIcon from "@/components/SvgIcon";
import { getDashboardApi } from '@/api/corpusManger/speech_synthesis.js'

const stats = ref([
    {
        iconName: 'task',
        label: '合成任务总数（条）',
        value: '13',
        trend: '+12.4%',
        trendClass: 'up'
    },
    {
        iconName: 'add',
        label: '今日新增合成（条）',
        value: '3',
        trend: '+8.7%',
        trendClass: 'up',
    },
    {
        iconName: 'language',
        label: '支持语种（种）',
        value: '4',
        trend: '—',
        trendClass: 'neutral'
    },
    {
        iconName: 'consuming',
        label: '可用音色（个）',
        value: '3',
        trend: '+3.2%',
        trendClass: 'up'
    },
    {
        iconName: 'timbre',
        label: '平均生成时延（ms）',
        value: '428',
        trend: '-5.6%',
        trendClass: 'down'
    }
])

const getDashboard = async () => {
    const res = await getDashboardApi()
    if (res.code === 200) {
        stats.value[0].value = res.data.totalTasks
        stats.value[0].trend = res.data.totalTasksGrowth
        stats.value[1].value = res.data.todayTasks
        stats.value[1].trend = res.data.todayTasksGrowth
        stats.value[2].value = res.data.totalLanguages
        stats.value[3].value = res.data.totalVoices
        stats.value[4].value = res.data.avgDuration.toFixed(2)
        stats.value[4].trend = res.data.avgDurationGrowth
    }
}

onMounted(() => {
    getDashboard()
})
</script>

<style lang="scss" scoped>
.row-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;

    .card {
        background: #fff;
        border-radius: 12px;
        padding: 8px 32px;

        .flex-between {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;

            .icon-container {
                width: 52px;
                height: 52px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
            }

            .task {
                background: #196afd;
            }

            .add {
                background: #16cb8d;
            }

            .language {
                background: #735df6;
            }

            .consuming {
                background: #fd9131;
            }

            .timbre {
                background: #2f7bf9;
            }

            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 8px;

                .stat-label {
                    font-size: 16px;
                    color: #64748b;
                    font-weight: 500;
                }

                .stat-number {
                    font-size: 24px;
                    font-weight: 700;
                    letter-spacing: -0.02em;
                    color: #0f172a;
                }

                .stat-trend {
                    font-size: 12px;
                    font-weight: 600;
                    margin-left: 6px;

                    span {
                        margin-right: 10px;
                    }

                    &.up {
                        color: #22c55e;
                    }

                    &.down {
                        color: #ef4444;
                    }

                    &.neutral {
                        color: #94a3b8;
                    }
                }
            }
        }
    }
}
</style>