<template>
  <v-row v-if="positionY" class="pa-0 ma-0 vehicleView text-center" :style="`
    top: ${positionY}px;
    left: ${positionX}px;
    width: ${isHorizontal ? vehicle.realHeight : dockConfig.WIDTH}px;
    `" align-content="center" justify="center">
    <v-tooltip :right="!isHorizontal" :bottom="isHorizontal">
      <template v-slot:activator="{ on }">
        <v-col v-on="on" no-gutters cols="12" :class="{
          'pa-0 ma-0 text-h6 vehicleBox': true,
          'elevation-5': true,
          rotateText: dockConfig.EXTRA_WIDE != 1 && !isHorizontal,
          [getTextColor]: true,
        }" :style="`
            height: ${isHorizontal ? dockConfig.HEIGHT : vehicle.realHeight}px;
            line-height: ${Math.round(
          dockConfig.EXTRA_WIDE != 1
            ? isHorizontal
              ? dockConfig.HEIGHT
              : dockConfig.WIDTH
            : vehicle.realHeight
        ) - 4
          }px;
            border: 2px solid #000 !important;
            background-color: ${vehicle.TIPO_RETRASO ? vehicle.TIPO_RETRASO.COLOR : '#fff'
          };          `">
          {{ vehicle.CODIGO_RUTA }} - {{ vehicle.MATRICULA_1 }}
        </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">
          {{ $t("stop_status") }}:
          {{ $t(vehicle.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"
            )
          }}
          <v-icon v-if="vehicle.TIPO_RETRASO" x-small :color="vehicle.TIPO_RETRASO.COLOR">fas fa-circle</v-icon>
        </p>
      </v-col>
    </v-tooltip>
  </v-row>
</template>

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

export default {
  name: "DockViewVehicle",
  props: {
    vehicle: {
      default: null,
    },
  },
  mixins: [global],
  data() {
    return {};
  },
  computed: {
    getTextColor() {
      return this.isDark(
        this.vehicle.TIPO_RETRASO ? this.vehicle.TIPO_RETRASO.COLOR : "#ffffff"
      )
        ? "docksView--white-text"
        : "docksView--black-text";
    },
    /**
     * Obtener la configuración del muelle
     */
    dockConfig() {
      return this.vehicle.dockConfig;
    },
    /**
     * Obtener las posiciones en base a estados
     */
    statusPositions() {
      const config = this.$store.getters.getDocksFilters;
      const configPositions = config?.CONFIG_POSICION;

      return configPositions != null
        ? JSON.parse(configPositions)
        : null
    },
    /**
     * Obtener la posición Y del vehículo
     */
    positionY() {
      if (!this.dockConfig) return null;

      let position = +this.dockConfig.positionY;

      const status = this.vehicle.ESTADO_FIELDEAS;
      const statusConfig = this.statusPositions?.find(
        (statusConfig) => statusConfig.ID_ESTADO == status
      );

      if (statusConfig != null) {
        position = +statusConfig.POSICION_Y;
      }

      switch (true) {
        case !this.dockConfig.VEHICLE_POSITION ||
          this.dockConfig.VEHICLE_POSITION.length == 0 ||
          this.dockConfig.VEHICLE_POSITION == "TOP":
          position -= +this.vehicle.realHeight + 25;
          break;
        case this.dockConfig.VEHICLE_POSITION == "BOTTOM":
          position += +this.dockConfig.HEIGHT + 25;
          break;
      }

      return position;
    },
    /**
     * Obtener la posición X del muelle
     */
    positionX() {
      if (!this.dockConfig) return null;

      let position = +this.dockConfig.positionX;

      const status = this.vehicle.ESTADO_FIELDEAS;
      const statusConfig = this.statusPositions?.find(
        (statusConfig) => statusConfig.ID_ESTADO == status
      );

      if (statusConfig != null) {
        position = +statusConfig.POSICION_X;
      }

      switch (true) {
        case this.dockConfig.VEHICLE_POSITION == "LEFT":
          position -= +this.vehicle.realHeight + 25;
          break;
        case this.dockConfig.VEHICLE_POSITION == "RIGHT":
          if (this.isDockVertical) position += +this.dockConfig.WIDTH + 25;
          else position += +this.dockConfig.WIDTH + 25;
          break;
      }

      return position;
    },
    /**
     * Obtener si la orientación del muelle es vertical
     */
    isDockVertical() {
      let orientacion = this.dockConfig.ORIENTACION == "VERTICAL";

      const status = this.vehicle.ESTADO_FIELDEAS;
      const statusConfig = this.statusPositions?.find(
        (statusConfig) => statusConfig.ID_ESTADO == status
      );

      if (statusConfig != null && statusConfig.ORIENTACION != null) {
        orientacion = statusConfig.ORIENTACION == "VERTICAL";
      }

      return orientacion;
    },
    /**
     * Obtener la posición del vehículo respecto al muelle
     */
    isHorizontal() {
      let isHorizontal = ["LEFT", "RIGHT"].includes(this.dockConfig.VEHICLE_POSITION);

      const status = this.vehicle.ESTADO_FIELDEAS;
      const statusConfig = this.statusPositions?.find(
        (statusConfig) => statusConfig.ID_ESTADO == status
      );

      if (statusConfig != null && statusConfig.ORIENTACION != null) {
        isHorizontal = statusConfig.ORIENTACION == "HORIZONTAL";
      }

      return isHorizontal;
    },
  },
};
</script>

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

.rotateText {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.vehicleBox {
  background: #fff;
  border-radius: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>