<template>
  <div class="container">
    <div class="row general">
      <div class="text-center col-6">
        <h2>Cooperativas</h2>
        <p class="general-value">
          <strong>{{ companiesCount }}</strong>
        </p>
      </div>
      <div class="text-center col-6">
        <h2>Productos</h2>
        <p class="general-value">
          <strong>{{ productsCount }}</strong>
        </p>
      </div>
    </div>
    <hr />
    <trend-stats
      :color="`#39af77`"
      :name="`Nuevas cooperativas`"
      :values="companiesTimeline"
    />
    <trend-stats
      :color="`red`"
      :name="`Nuevos productos`"
      :values="productsTimeline"
    />
    <trend-stats
      :color="`purple`"
      :name="`Nuevos usuarios`"
      :values="usersTimeline"
    />
    <trend-stats
      :color="`blue`"
      :name="`Contactados`"
      :values="contactTimeline"
    />
    <trend-stats
      :color="`orange`"
      :name="`Redirecciones a producto`"
      :values="shoppingTimeline"
    />
  </div>
</template>

<script>
export default {
  layout: 'admin',
  middleware: 'auth',
  meta: {
    auth: { authority: 'SITE_ADMIN' },
  },
  async asyncData(context) {
    const { data } = await context.$api.get(`/admin_stats/`)
    const companiesCount = data.company_count
    const productsCount = data.product_count
    const companiesTimeline = data.companies_timeline
    const productsTimeline = data.products_timeline
    const usersTimeline = data.users_timeline
    const contactTimeline = data.contact_timeline
    const shoppingTimeline = data.shopping_timeline

    return {
      companiesCount,
      productsCount,
      companiesTimeline,
      productsTimeline,
      usersTimeline,
      contactTimeline,
      shoppingTimeline,
    }
  },
}
</script>

<style lang="scss" scoped>
.general-value {
  font-size: 50px;
}
</style>
