<template>
  <!-- Vehículos en el parking -->
  <vueper-slides
    progress
    autoplay
    :arrows="false"
    :duration="15000"
    lazy
    :touchable="false"
    pauseOnTouch
    :style="`
    top: ${parking.POSICION_Y}px;
    left: ${parking.POSICION_X}px;
    width: ${parking.WIDTH}px;
    height: ${parking.HEIGHT}px;
    `"
    :fixed-height="`${parking.HEIGHT}px`"
    class="pa-0 ma-0 parkingView text-center"
  >
    <vueper-slide
      v-for="page in vehiclesPages"
      :key="`page_vehicles_${page}`"
      :style="`
        width: ${parking.WIDTH}px;
        height: ${parking.HEIGHT}px;
      `"
    >
      <template v-slot:content>
        <v-row
          no-gutters
          :style="`
          position: absolute;
          top: 0px;
          left: 0px;
          width: ${parking.WIDTH}px;
          height: ${parking.HEIGHT}px;
          `"
          align-content="start"
          justify="space-around"
        >
          <parkingVehicle
            v-for="pVehicle in vehiclesToShow.slice(
              (page - 1) * parking.vehiclesPerPage,
              page * parking.vehiclesPerPage
            )"
            :key="pVehicle.vehicleKey"
            :vehicle="pVehicle"
            :parking="parking"
            :emptyVehicle="pVehicle.emptyVehicle"
          />
        </v-row>
      </template>
    </vueper-slide>
  </vueper-slides>
</template>

<script>
import parkingVehicle from "../parkingVehicle/index.vue";
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "DockViewParking",
  components: { parkingVehicle, VueperSlides, VueperSlide },
  props: {
    parking: {
      default: null,
    },
  },
  data() {
    return {};
  },
  computed: {
    vehiclesPages() {
      if (
        this.vehiclesToShow.length == 0 &&
        this.parking.vehiclesPerPage == 0
      ) {
        return 0;
      } else {
        return Math.ceil(
          this.vehiclesToShow.length / this.parking.vehiclesPerPage
        );
      }
    },
    /**
     * Obtener los vehículos y vehículos de relleno a mostrar
     */
    vehiclesToShow() {
      return [
        ...this.parking.vehiclesToDock,
        ...[...Array(this.itemsToFill).keys()].map(() => ({
          emptyVehicle: true,
        })),
      ].map((vehicle, index) => ({
        ...vehicle,
        vehicleKey: vehicle.emptyVehicle
          ? `parking_empty_vehicle_${index}_${Math.floor(Math.random() * 100)}`
          : `parking_vehicle_${this.parking.ID}_${vehicle.ID_PARADA}`,
      }));
    },
    /**
     * Obtener si la orientacion es vertical
     */
    isVertical() {
      return this.parking.ORIENTACION == "VERTICAL";
    },
    /**
     * Vehículos vacíos necesarios para que la alineación de flexbox funcione correctamente
     */
    itemsToFill() {
      const filledRows = Math.floor(
        this.parking.vehiclesToDock.length / this.parking.availableColumns
      );

      const filledInLastRow =
        this.parking.vehiclesToDock.length -
        filledRows * this.parking.availableColumns;

      return filledInLastRow == 0
        ? 0
        : this.parking.availableColumns - filledInLastRow;
    },
  },
};
</script>

<style scoped>
.parkingView {
  position: absolute;
  box-sizing: border-box;
}

::v-deep .vueperslides__progress {
  color: var(--v-primary-base) !important;
}

::v-deep .vueperslides__bullet .default {
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: none;
  transition: 0.3s;
  width: 12px;
  height: 12px;
}

::v-deep .vueperslides__bullet--active .default {
  background-color: var(--v-primary-base);
}

::v-deep .vueperslides__bullets {
  overflow: hidden;
}
</style>