<template>
  <ele-page flex-table>
    <ele-card flex-table>
      <div class="flex justify-center">
        <div class="flex gap-6">
          <div class="common-section">
            <CommonStatistics title="开放回收种类（种）" :value="565621" />
          </div>
          <div class="common-section">
            <CommonStatistics
              title="单本回收均价（元）"
              :value="2.4"
              :options="{ decimalPlaces: 2 }"
            />
          </div>
          <div class="common-section">
            <CommonStatistics title="回收本数（本）" :value="454445" />
          </div>
          <div class="common-section">
            <CommonStatistics title="无数据图书（本）" :value="5621" />
          </div>
        </div>
      </div>

      <div class="flex mt-12 gap-8">
        <div class="flex-1">
            <bookRecycleRate />
        </div>
        <div class="flex-1">
          <recycleDiscountRate />
        </div>
      </div>
    </ele-card>
  </ele-page>
</template>

<script setup>
  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';
</script>
