<template>
  <div>
        <!-- <div class=" text-right">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary btn-sm">
            <input type="radio" name="options" autocomplete="off" > ງວດທີ່ 1
            </label>
            <label class="btn btn-secondary btn-sm">
            <input type="radio" name="options" autocomplete="off"> ງວດທີ່ 2
            </label>
            <label class="btn btn-secondary btn-sm">
            <input type="radio" name="options"  autocomplete="off"> ງວດທີ່ 3
            </label>
            <label class="btn btn-secondary btn-sm">
            <input type="radio" name="options"  autocomplete="off"> ງວດທີ່ 4
            </label>
            <label class="btn btn-secondary active btn-sm">
            <input type="radio" name="options"  autocomplete="off" checked=""> ປະຈຳປີ
            </label>
            </div>
        </div> -->
    <linechart
      :height="300"
      :chartData="chdata"
      :chartOptions="chdataop"
      :update="update_chart"
      :key="key"
    />
  
  </div>
</template>

<script>
import Linechart from "../LineChart.vue";
import moment from "moment";
export default {
  name: "MyAppVueInExChart",

  data() {
    return {
      chdata: null,
      chdataop: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          yAxes: [
            {
              ticks: {
                display: true,
                beginAtZero: false,
                callback: function (value, index, values) {
                  return (
                    Number(value/1000000)
                      .toFixed(0)
                      .replace(/./g, function (c, i, a) {
                        return i > 0 && c !== "," && (a.length - i) % 3 === 0
                          ? "," + c
                          : c;
                      }) + " ລ້ານກີບ"
                  );
                },
              },
              gridLines: {
                show: true,
              },
            },
          ],
        },
        tooltips: {
          callbacks: {
            label: function (tooltipItem, data) {
              return (
                Number(tooltipItem.yLabel)
                  .toFixed(0)
                  .replace(/./g, function (c, i, a) {
                    return i > 0 && c !== "," && (a.length - i) % 3 === 0
                      ? "," + c
                      : c;
                  }) + " ກີບ"
              );
            },
          },
          mode: "index",
          intersect: false,
        },
      },
      update_chart: null,
      key: 0,
      datareport: null,
      re: null,
      ex: null,
      polling: null,
    };
  },
  components: { Linechart,moment },
  mounted() {},

  methods: {
    getData() {
      this.chdata = null;
      // this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/dashboard/re_exp_grap`)
          .then((response) => {
            //  console.log(response.data.reve)
            //let reve = response.data.reve
            // let exp = response.data.exp
            // let kem = response.data.kam
            // this.data_chart = [{name:'ລາຍຮັບ',data:reve},{name:'ລາຍຈ່າຍ',data:exp},{name:'ກຳໄລ', data: kem}]
            //this.data_bar = response.data
            this.re = response.data.re;
            this.ex = response.data.ex;
            this.datareport = response.data.acc;
            this.GenGrap();
            // this.$Progress.finish();

            this.polling = setInterval(() => {
              this.key++;
              this.update_chart = Math.floor(Math.random() * 100);
              clearInterval(this.polling);
            }, 1500);

          })
          .catch((error) => {
            this.$notify(
              {
                group: "error",
                title: "ບໍ່ສຳເລັດ!",
                text: "ຜິດຜາດ: " + error.message,
              },
              4000
            );
            console.error(error);
            // this.$Progress.fail();
          });
      });
    },
    GenGrap() {
      
        
      let db_income = this.datareport.filter((i) => i.trn_type == "income");
      let db_expense = this.datareport.filter((i) => i.trn_type == "expense");

      let re_income = []
      let re_expense = []
      let re_profit = [];

      
      let minth_chart = 12;
      re_income = this.Get_data_chart(minth_chart, db_income) || 0;
      re_expense = this.Get_data_chart(minth_chart, db_expense) || 0;

      //console.log(db_income);
      for (let i = 0; i < re_income.length; i++) {
          re_profit.push( parseInt(re_income[i]-re_expense[i]))
     
          
      }

      this.chdata = {
        labels: [
          "ເດືອນ 1",
          "ເດືອນ 2",
          "ເດືອນ 3",
          "ເດືອນ 4",
          "ເດືອນ 5",
          "ເດືອນ 6",
          "ເດືອນ 7",
          "ເດືອນ 8",
          "ເດືອນ 9",
          "ເດືອນ 10",
          "ເດືອນ 11",
          "ເດືອນ 12",
        ],
        datasets: [
          {
            label: "ລາຍຮັບ",
            fill: false,
            borderColor: "#3366CC",
            backgroundColor:"#3366CC",
            data: re_income,
          },
          {
            label: "ລາຍຈ່າຍ",
            fill: false,
            borderColor: "#DC3912",
            backgroundColor:"#DC3912",
            data: re_expense,
          },
          {
            label: "ກຳໄລ",
            fill: false,
            borderColor: "#FF9900",
            backgroundColor:"#FF9900",
            data: re_profit,
          },
        ],
      };

    },
    Get_data_chart(minth_chart,data){
                let new_db_in = []
                let re_income =[]
                for (let y = 0; y < data.length; y++) {
                                if(data[y]!=''){
                                let month = this.Getmonth(data[y].created_at)
                                new_db_in.push({'price':(data[y].sum),'month':month})
                                }
                }

                let update_db_in = new_db_in.reduce((a, c) => {
                                let filtered = a.filter(el => el.month == c.month);
                                if(filtered.length > 0){
                                    a[a.indexOf(filtered[0])].price =parseInt(a[a.indexOf(filtered[0])].price) + parseInt(c.price);
                                }else{
                                    a.push(c);
                                }
                                return a;
                            }, []);

                    for (let i = 0; i < minth_chart; i++) {
                            let type = true
                            for (let k = 0; k < update_db_in.length; k++) {
                              if(update_db_in[k].month==i+1){
                                  if(type){
                                      re_income.push(update_db_in[k].price)
                                      type = false
                                  }
                              } 
                            }
                            if(type){ re_income.push(0); type = false }
                    }

                    return re_income
        },
        Getmonth(value) {
         return moment(value).format("MM");
        },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
</style>