<template>
  <v-row
    class="pa-0 ma-0 parkingView text-center"
    :style="`
    top: ${arrivalsParking.POSICION_Y}px;
    left: ${arrivalsParking.POSICION_X}px;
    width: ${arrivalsParking.WIDTH}px;
    height: ${arrivalsParking.HEIGHT}px;
    `"
    align-content="start"
    justify="space-around"
  >
    <!-- Vehículos en el parking -->
    <arrivalVehicle
      v-for="pVehicle in arrivalsParking.vehiclesToDock"
      :key="`arrivalsParking_vehicle_${arrivalsParking.ID}_${pVehicle.ID_PARADA}`"
      :vehicle="pVehicle"
      :parking="arrivalsParking"
    />
    <!-- Vehículos vacíos para completar el grid y que los elementos se alineen correctamente -->
    <arrivalVehicle
      v-for="emptyVehicle in itemsToFill"
      :key="`parking_empty_vehicle_${emptyVehicle}`"
      :parking="arrivalsParking"
      emptyVehicle
    />
  </v-row>
</template>

<script>
import arrivalVehicle from "../arrivalVehicle";

export default {
  name: "DockViewArrivals",
  components: { arrivalVehicle },
  props: {
    arrivalsParking: {
      default: null,
    },
  },
  data() {
    return {};
  },
  computed: {
    /**
     * Obtener si la orientacion es vertical
     */
    isVertical() {
      return this.arrivalsParking.ORIENTACION == "VERTICAL";
    },
    /**
     * Vehículos vacíos necesarios para que la alineación de flexbox funcione correctamente
     */
    itemsToFill() {
      const filledRows = Math.floor(
        this.arrivalsParking.vehiclesToDock.length / this.arrivalsParking.availableColumns
      );

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

      return this.arrivalsParking.availableColumns - filledInLastRow;
    },
  },
};
</script>

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