<template>
  <div>
    <h1>Resumen mensual</h1>
    <div class="row">
      <Badge type="primary" class="col-3 p-4 rounded-pill"
        >Total Ingresos: <br /><b>{{ formatMoneda(ingresos) }}</b></Badge
      >
      <Badge type="info" class="col-3 p-4 offset-md-1 rounded-pill"
        >Total Compras: <br /><b>{{ formatMoneda(compras) }}</b></Badge
      >
    </div>

    <card title="Compras por categorías" class="p-2 col-12">
      <bar-chart
        class="col-12"
        style="height: 10%"
        ref="categorias"
        :chart-data="categoriasBars.chartData"
        :gradient-stops="categoriasBars.gradientStops"
        :extra-options="categoriasBars.extraOptions"
      >
      </bar-chart>
    </card>
  </div>
</template>




<script>
import LineChart from "@/components/Charts/LineChart";
import BarChart from "@/components/Charts/BarChart";
import * as chartConfigs from "@/components/Charts/config";
import config from "@/config";

export default {
  name: "dashboard",
  middleware: "authenticated",
  components: {
    LineChart,
    BarChart,
  },
  data() {
    return {
      ingresos: 1000,
      compras: 1000,

      categoriasBars: {
        extraOptions: chartConfigs.barChartOptions,
        chartData: {
          labels: ["USA", "GER", "AUS", "UK", "RO", "BR"],
          datasets: [
            {
              label: "Countries",
              fill: true,
              borderColor: config.colors.info,
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              data: [530, 20, 10, 80, 100, 45],
            },
          ],
        },
        gradientColors: config.colors.primaryGradient,
        gradientStops: [1, 0.4, 0],
      },
    };
  },

  methods: {
    formatMoneda(dato) {
      var num = dato;
      if (!isNaN(num)) {
        num = num
          .toString()
          .split("")
          .reverse()
          .join("")
          .replace(/(?=\d*\.?)(\d{3})/g, "$1.");
        num = num.split("").reverse().join("").replace(/^[\.]/, "");
        //return '$' +num;
        return `$ ${num}`;
      }
    },

    getCompras() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
          filtro: this.$store.state.filtro.fechas,
        },
      };
      this.$axios
        .get("/resumen_compras", axiosHeader)
        .then((res) => {
          console.log(res.data.data);
          this.compras = res.data.data;
        })
        .catch((e) => console.log(e));
    },

    getIngresos() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
          filtro: this.$store.state.filtro.fechas,
        },
      };
      this.$axios
        .get("/resumen_ingresos", axiosHeader)
        .then((res) => {
          console.log(res.data.data);
          this.ingresos = res.data.data;
        })
        .catch((e) => console.log(e));
    },

    getResumenCategorias() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
          filtro: this.$store.state.filtro.fechas,
        },
      };
      this.$axios
        .get("/resumen_categorias", axiosHeader)
        .then((res) => {
          let categorias = res.data.labels;
          let valores = res.data.datos;

          let chartData = {
            label: "Categorias",
            datasets: [
              {
                label: "Total",
                fill: true,
                borderColor: config.colors.info,
                borderWidth: 2,
                borderDash: [],
                data: valores,
              },
            ],
            labels: categorias,
          };
          this.categoriasBars.labels = categorias;
          this.categoriasBars.chartData.datasets.data = valores;

          this.$refs.categorias.renderChart(
            chartData,
            chartConfigs.barChartOptions
          );
          this.$refs.categorias.updateGradients(chartData);
        })
        .catch((e) => console.log(e));
    },
  },

  mounted() {
    this.getCompras();
    this.getIngresos();
    this.getResumenCategorias();
  },
};
</script>

<style>
</style>