<template>
  <v-tooltip left v-if="!emptyVehicle && parking.vehiclesDimensions">
    <template v-slot:activator="{ on }">
      <v-col
        v-on="on"
        no-gutters
        cols="6"
        class="pa-0 ma-2"
        :style="`
            max-width: ${parking.vehiclesDimensions.width}px;
            height: ${parking.vehiclesDimensions.height}px;
            line-height: ${parking.vehiclesDimensions.height - 4}px;
            box-sizing: border-box;
          `"
      >
        <div
          v-if="parking.vehiclesDimensions.showDock && vehicle.ID_MUELLE"
          :class="dockClasses"
          :style="`display: inline-block; border: 2px solid #000 !important; width: ${
            parking.vehiclesDimensions.dockWidth
          }px; line-height: ${parking.vehiclesDimensions.height - 4}px;`"
        >
          {{ dockAssigned.NUMERO }}
        </div>
        <div
          :class="vehicleClasses"
          :style="`display: inline-block; border: 2px solid #000 !important; max-width: ${
            parking.vehiclesDimensions.vehicleWidth
          }px; line-height: ${parking.vehiclesDimensions.height - 4}px;`"
        >
          <div
            v-if="vehicle.TIPO_RETRASO"
            class="stopDockCircleStatus elevation-7"
            :style="`background-color: ${vehicle.TIPO_RETRASO.COLOR}`"
          />
          {{ vehicle.CODIGO_RUTA }} {{ vehicle.MATRICULA_1 }}
        </div>
      </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.MATRICULA_1 ? vehicle.MATRICULA_1 : $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" :class="{ 'pb-0 mb-0': !vehicle.TIPO_RETRASO }">
        {{ $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" v-if="vehicle.TIPO_RETRASO">
        {{ $t("estimacion") }}:
        {{ $t(vehicle.TIPO_RETRASO.TAG) }}
      </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: "DockViewParkingVehicle",
  props: {
    vehicle: {
      default: null,
    },
    parking: {
      default: null,
    },
    emptyVehicle: Boolean,
  },
  mixins: [global],
  data() {
    return {};
  },
  computed: {
    /**
     * Obtener el vehículo asignado al muelle
     */
    vehicleDocked() {
      return this.$store.getters.getVehiclesDocked.find(
        (vehicle) => vehicle.ID_MUELLE == this.vehicle.ID_MUELLE
      );
    },
    /**
     * Obtener el registro del muelle
     */
    dockElement() {
      return this.$store.getters.getDocksViewDocks.find(
        (dockEl) => dockEl.ID_MUELLE == this.vehicle.ID_MUELLE
      );
    },
    /**
     * Estado del muelle:
     * 0: Sin vehículo
     * 1: Vehículo en hora
     * 2: Vehículo en muelle distinto del teórico
     */
    dockStatus() {
      let status = 0;

      const sameVehicle =
        this.vehicleDocked &&
        this.dockElement &&
        this.dockElement.theoreticalVehicleDocked &&
        this.dockElement.theoreticalVehicleDocked.ID_MUELLE ==
          this.vehicleDocked.ID_MUELLE;

      const checkVehicleStatus = this.dockElement.theoreticalVehicleDocked
        ? parseInt(this.dockElement.theoreticalVehicleDocked.ESTADO_FIELDEAS) <
            parseInt(
              this.$store.getters.getDocksFilters.ID_ESTADO_ENTRADA_MUELLE
            ) ||
          parseInt(this.dockElement.theoreticalVehicleDocked.ESTADO_FIELDEAS) >
            parseInt(
              this.$store.getters.getDocksFilters.ID_ESTADO_SALIDA_MUELLE
            )
        : false;

      switch (true) {
        case sameVehicle:
          status = 1;
          break;
        case (!this.vehicleDocked &&
          this.dockElement &&
          !!this.dockElement.theoreticalVehicleDocked) ||
          (this.vehicleDocked &&
            this.dockElement &&
            !this.dockElement.theoreticalVehicleDocked) ||
          (!sameVehicle && this.vehicleDocked) ||
          checkVehicleStatus:
          status = 2;
          break;
      }
      return status;
    },
    /**
     * Clases de los muelles
     */
    dockClasses() {
      return this.emptyVehicle
        ? null
        : {
            "pa-0 ma-0 text-h6 dockBox elevation-5 text-center": true,
            "success docksView--white-text": this.dockStatus == 1,
            "error docksView--white-text": this.dockStatus == 2,
            rotateText: this.isVertical,
          };
    },
    /**
     * Clases de los vehículos
     */
    vehicleClasses() {
      return this.emptyVehicle
        ? null
        : {
            "pa-0 ma-0 vehicleBox text-h6 text-center elevation-5": true,
            "ml-2": this.vehicle.ID_MUELLE,
            rotateText: this.isVertical,
            "docksView--white-text":
              !this.vehicle.ESTADO || this.vehicle.ESTADO.COLOR != "#fff",
            [this.vehicle.ESTADO ? this.vehicle.ESTADO.COLOR : ""]: true,
          };
    },
    /**
     * 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>
.dockBox {
  background: #fff;
  border: 2px solid #000;
  color: #000;
  border-radius: 4px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}

.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;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

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

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