<template>
  <div class="p-2 border border-gray-500 mt-4">
    <label class="block mb-2 font-bold">
      Carritos desactivados por laboratorio móvil
    </label>

    <client-only>
      <BarChart :data="chartData" />
    </client-only>
  </div>
</template>

<script>
export default {
  props: {
    data: { type: Array, required: true, default: () => [] },
    labels: { type: Array, required: true, default: () => [] },
  },
  methods: {
    randomRgba() {
      let o = Math.round,
        r = Math.random,
        s = 255

      return `rgba(${o(r() * s)}, ${o(r() * s)}, ${o(r() * s)}, 1)`
    },
  },
  computed: {
    chartData() {
      const labels = [...this.labels]
      const datasets = []
      const dataDesactivacion = []
      const dataAlumnosPrestamo = []
      let sumDesactivacion = 0
      let sumAlumnos = 0

      for (let i = 0; i < this.labels.length; i++) {
        let alumnos = 0

        dataDesactivacion.push(this.data[i].motivos.length)
        for (let j = 0; j < this.data[i].motivos.length; j++)
          alumnos += this.data[i].motivos[j].numero_equipos
        dataAlumnosPrestamo.push(alumnos)
        if (this.labels.length > 1) {
          sumDesactivacion += this.data[i].motivos.length
          sumAlumnos += alumnos
        }
      }
      if (this.labels.length > 1) {
        labels.push('Final')
        dataDesactivacion.push(sumDesactivacion)
        dataAlumnosPrestamo.push(sumAlumnos)
      }
      datasets.push({
        label: 'Carritos desactivados',
        data: dataDesactivacion,
        backgroundColor: this.randomRgba(),
      })
      datasets.push({
        label: 'Equipos de cómputo',
        data: dataAlumnosPrestamo,
        backgroundColor: this.randomRgba(),
      })
      return { labels, datasets }
    },
  },
}
</script>
