<template>
  <v-row
    v-if="dockElement"
    class="pa-0 ma-0 dockView text-center"
    :style="`
    top: ${dock.positionY}px;
    left: ${dock.positionX}px;
    width: ${dock.WIDTH}px;
    `"
    align-content="center"
    justify="center"
  >
    <v-tooltip right>
      <template v-slot:activator="{ on }">
        <v-col
          v-on="on"
          no-gutters
          cols="12"
          :class="{
            'success docksView--white-text': dockStatus == 1,
            'error docksView--white-text': dockStatus == 2,
            'dock--disabled': dockStatus == 3,
            'pa-0 ma-0 text-h6 dockBox elevation-5': true,
            dockLabelBottom: isVertical,
          }"
          :style="`
            height: ${dock.HEIGHT}px;
            line-height: ${
              Math.round(isVertical ? dock.WIDTH : dock.HEIGHT) - 4
            }px;
           border: 2px solid #000 !important;
          `"
        >
          {{ dockElement.NUMERO }}
        </v-col>
      </template>
      <v-col class="px-0">
        <p class="docksView--white-text">
          {{ dockElement.NUMERO }}
        </p>
        <p class="docksView--white-text">
          {{ dockElement.DESCRIPCION }}
        </p>
        <p style="color: white">
          {{ $t("dock_status_dock") }}:
          {{ $t(`dock_status_${dockStatus}`) }}
        </p>
        <p style="color: white" class="pb-0 mb-0" v-if="dockStatus != 3">
          {{ $t("dock_theoric_vehicle") }}:
          {{
            dockElement.theoreticalVehicleDocked
              ? dockElement.theoreticalVehicleDocked.CODIGO_RUTA
              : $t("notAssigned")
          }}
        </p>
      </v-col>
    </v-tooltip>
    <div
      v-if="!dock.HIDE_LABEL || dock.HIDE_LABEL != 1"
      :class="{
        dockLabel: true,
        dockLabelHorizontal: ['LEFT', 'RIGHT'].includes(dock.LABEL_POSITION),
        dockLabelTop: dock.LABEL_POSITION == 'TOP',
        dockLabelBottom: dock.LABEL_POSITION == 'BOTTOM',
        dockLabelLeft: dock.LABEL_POSITION == 'LEFT',
        dockLabelRight: dock.LABEL_POSITION == 'RIGHT',
        'text-center': true,
        'mb-4': dock.LABEL_POSITION == 'TOP',
        'mt-4': dock.LABEL_POSITION == 'BOTTOM',
        'mr-4': dock.LABEL_POSITION == 'LEFT',
        'ml-4': dock.LABEL_POSITION == 'RIGHT',
        'elevation-4': true,
      }"
      :style="dock.LABEL_POSITION == 'BOTTOM' ? `top: ${dock.HEIGHT}px` : ''"
    >
      {{ dockElement.DESCRIPCION }}
    </div>
  </v-row>
</template>

<script>
export default {
  name: "DockViewDock",
  props: {
    dock: {
      default: null,
    },
  },
  data() {
    return {};
  },
  computed: {
    /**
     * Obtener el vehículo asignado al muelle
     */
    vehicleDocked() {
      return this.$store.getters.getVehiclesDocked.find(
        (vehicle) => vehicle.ID_MUELLE == this.dock.ID_MUELLE
      );
    },
    /**
     * Obtener el registro del muelle
     */
    dockElement() {
      return this.$store.getters.getDocksViewDocks.find(
        (dockEl) => dockEl.ID_MUELLE == this.dock.ID_MUELLE
      );
    },
    /**
     * Estado del muelle:
     * 0: Sin vehículo
     * 1: Vehículo en hora
     * 2: Vehículo en muelle distinto del teórico
     * 3: Deshabilitado
     */
    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;
        case this.dockElement.dockDisabled:
          status = 3;
          break;
      }
      return status;
    },
    /**
     * Obtener si la orientacion es vertical
     */
    isVertical() {
      return this.dock.ORIENTACION == "VERTICAL";
    },
  },
};
</script>

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

.dockBox {
  background: #fff;
  border: 2px solid #000;
  color: #000;
  border-radius: 4px;
}

.dock--disabled {
  background-color: #ababab !important;
  color: #2a2a2a !important;
}

.dockLabel {
  white-space: nowrap;
  background: rgba(97, 97, 97, 0.9);
  border-radius: 4px;
  padding: 16px 5px;
  color: #fff;
  position: absolute;
}

.dockLabelHorizontal {
  padding: 5px 16px !important;
}

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

.dockLabelTop {
  bottom: 35px;
}

.dockLabelRight {
  left: 50px;
}

.dockLabelLeft {
  right: 50px;
}
</style>