<template>
    <ele-page flex-table>
        <ele-card flex-table>
            <div v-if="loading" class="flex justify-center items-center h-64">
                <ele-loading />
            </div>
            <div v-else>
                <div class="flex justify-center mb-12">
                    <div class="flex gap-8">
                        <div class="common-section">
                            <CommonStatistics
                                title="开放回收种类（种）"
                                :value="statData.recycleingBookNum || 0"
                            />
                        </div>
                        <div class="common-section">
                            <CommonStatistics
                                title="单本回收均价（元）"
                                :value="statData.averagePrice || 0"
                                :options="{ decimalPlaces: 2 }"
                            />
                        </div>
                        <div class="common-section">
                            <CommonStatistics
                                title="回收本数（本）"
                                :value="statData.recycleBookNum || 0"
                            />
                        </div>
                        <div class="common-section">
                            <CommonStatistics
                                title="无数据图书（本）"
                                :value="statData.noDateBook || 0"
                            />
                        </div>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-1">
                        <el-card shadow="hover">
                            <bookRecycleRate :data="statData" />
                        </el-card>
                    </div>
                    <div class="flex-1">
                        <el-card shadow="hover">
                            <recycleDiscountRate :data="statData" />
                        </el-card>
                    </div>
                    <div class="flex-1">
                        <el-card shadow="hover">
                            <recycleProportion :data="statData" />
                        </el-card>
                    </div>
                </div>
            </div>
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    import CommonStatistics from '@/components/CommonPage/CommonStatistics.vue';
    import recycleDiscountRate from '@/views/recycle/booklistStat/components/recycle-discount-rate.vue';
    import bookRecycleRate from '@/views/recycle/booklistStat/components/book-recycle-rate.vue';
    import recycleProportion from '@/views/recycle/booklistStat/components/recycle-proportion.vue';
    import request from '@/utils/request';

    const statData = ref({});
    const loading = ref(false);

    const fetchBookListStat = async () => {
        loading.value = true;
        try {
            const res = await request.get(
                '/book/bookRecycleInfo/stat/bookRecycleStat'
            );
            if (res.data.code === 200) {
                statData.value = res.data.data;
            }
        } catch (error) {
            console.error('获取统计数据失败:', error);
        } finally {
            loading.value = false;
        }
    };

    onMounted(() => {
        fetchBookListStat();
    });
</script>

<style scoped>
    .common-section {
        min-width: 160px;
        text-align: center;
    }
</style>
