<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>
 <div class="chart-area" style="height: 300px">
            <highchart style="height: 100%"  v-if="isMounted" :options="comprasChart"/>
        </div>
          <div class="chart-area" style="height: 300px">
            <highchart style="height: 100%"  v-if="isMounted" :options="metodosChart"/>
        </div>
    </card>

         





  </div>

</template>



<script>
import * as configPlot from "@/components/Charts/config_plots";
import config from "@/config";

export default {
  name: "dashboard",
  middleware: "authenticated",
 
  data() {
    return {
      isMounted: false,

comprasChart:{
...configPlot.chartOptions,
    title: {
      text: 'Compras por  categorías'
  },
   series: [{
      name: '',
      data: [],
      color: "#e14eca"
  },],

},

metodosChart:{
...configPlot.pieOptions,
    title: {
      text: 'Métodos de pago'
  },
   series: [{
      data: [],
       },],

},

      ingresos: 1000,
      compras: 1000,

    };
  },

 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));
    },

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

           this.comprasChart.xAxis.categories =categorias;
           this.comprasChart.series =[{name: '',
                        data: valores,
                        }]

                        

        
           
        })
        .catch((e) => console.log(e));
    },

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

           //this.metodosChart.xAxis.categories =metodos;
           var series =[];
           for (var i=0;i< metodos.length;i++){
             var serie={
               name:metodos[i],
               y:valores[i]
             }
             series.push(serie)
           }
           console.log(series)
           this.metodosChart.series = [{name: '',
                        data: series,
                        }];

                        

        
           
        })
        .catch((e) => console.log(e));
    },
  },

  async mounted() {
   await this.getCompras();
   await this.getIngresos();
   await this.getResumenCategorias();
   await this.getResumenMetodos();
    this.isMounted = true;
  },
};
</script>

<style>
</style>