<template>
  <v-tooltip left v-if="!emptyVehicle && parking.vehiclesDimensions">
    <template v-slot:activator="{ on }">
      <v-col
        v-on="on"
        no-gutters
        cols="6"
        :class="vehicleClasses"
        :style="`
            max-width: ${parking.vehiclesDimensions.width}px;
            height: ${parking.vehiclesDimensions.height}px;
            line-height: ${parking.vehiclesDimensions.height - 4}px;
            border: 2px solid #000 !important;
            background-color: ${
              vehicle.TIPO_RETRASO ? vehicle.TIPO_RETRASO.COLOR : '#fff'
            };
          `"
      >
        {{ vehicle.CODIGO_RUTA }}
      </v-col>
    </template>
    <v-col class="px-0">
      <p class="docksView--white-text">
        {{ vehicle.CODIGO_RUTA }}
      </p>
      <p class="docksView--white-text">
        <v-icon color="#fff" small>fas fa-user</v-icon>
        {{
          vehicle.NOMBRE_CONDUCTOR
            ? vehicle.NOMBRE_CONDUCTOR
            : $t("notAssigned")
        }}
      </p>
      <p class="docksView--white-text">
        <v-icon color="#fff" small>fas fa-truck</v-icon>
        {{ vehicle.vehicleID ? vehicle.vehicleID : $t("notAssigned") }}
      </p>
      <p style="color: white">
        {{ $t("agency") }}:
        {{ vehicle.agencia ? vehicle.agencia : $t("notAssigned") }}
      </p>
      <p style="color: white" v-if="vehicle.ID_MUELLE">
        {{ $t("dock") }}:
        {{
          vehicle.ID_MUELLE
            ? `${dockAssigned.NUMERO} (${dockAssigned.DESCRIPCION})`
            : $t("notAssigned")
        }}
      </p>
      <p style="color: white" v-if="vehicle.ESTADO">
        {{ $t("dock_status") }}:
        {{ $t(vehicle.ESTADO.CLAVE_ESTADO) }}
      </p>
      <p style="color: white">
        {{ $t("stop_planned_date") }}:
        {{ getDateToShow(vehicle.FH_PLANIFICADA_CERCANA) }}
      </p>
      <p style="color: white" v-if="vehicle.TIPO_RETRASO">
        {{ $t("stops_estimated_date") }}:
        {{ getDateToShow(vehicle.FH_ESTIMADA_LLEGADA) }}
      </p>
      <p class="pb-0 mb-0" style="color: white">
        {{ $t("estimacion") }}:
        {{
          $t(vehicle.TIPO_RETRASO ? vehicle.TIPO_RETRASO.TAG : "no_estimacion")
        }}
      </p>
    </v-col>
  </v-tooltip>
  <v-col
    v-else-if="emptyVehicle"
    no-gutters
    cols="6"
    class="emptyVehicle pa-0 ma-2"
    :style="`max-width: ${parking.vehiclesDimensions.width}px;`"
  >
  </v-col>
</template>

<script>
import global from "../../../../mixins/Global";

export default {
  name: "DockViewArrivalVehicle",
  props: {
    vehicle: {
      default: null,
    },
    parking: {
      default: null,
    },
    emptyVehicle: Boolean,
  },
  mixins: [global],
  data() {
    return {};
  },
  computed: {
    vehicleClasses() {
      return this.emptyVehicle
        ? null
        : {
            "pa-0 ma-2 vehicleBox text-h6 text-center elevation-5": true,
            rotateText: this.isVertical,
          };
    },
    /**
     * Obtener si el vehículo está orientado verticalmente
     */
    isVertical() {
      return this.emptyVehicle
        ? null
        : this.parking.vehiclesDimensions
        ? this.parking.vehiclesDimensions.height >
          this.parking.vehiclesDimensions.width
        : false;
    },
    /**
     * Obtener el muelle asignado
     */
    dockAssigned() {
      return this.emptyVehicle
        ? null
        : this.$store.getters.getDocksViewDocks.find(
            (dockEl) => dockEl.ID_MUELLE == this.vehicle.ID_MUELLE
          );
    },
  },
};
</script>

<style lang="scss" scoped>
.rotateText {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.vehicleBox {
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
}

.stopDockCircleStatus {
  position: absolute;
  right: 2px;
  top: 2px;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 100%;
  width: 20px !important;
  height: 20px !important;
}

.emptyVehicle {
  height: 0px;
}
</style>