<template>
  <v-container fluid grid-list-md class="py-0" style="height: calc(100vh - 64px)">
    <slot></slot>
    <v-row style="height: 100%">
      <modal :showModal="showEventModal" :title="comment.ID_EVENTO ? $t('edit_event') : $t('new_event')"
        max-width="450px" @closeModal="closeComment" @ok="saveComment">
        <v-form ref="commentForm">
          <json-form :form="commentForm" :obj="comment" />
        </v-form>
      </modal>
      <v-col cols="12" class="pb-0">
        <!-- Filtros -->
        <v-card>
          <view-title :showButtonBack="showButtonBack" :title="$t('dock_assignment')" id="dockAssignmentsMenuToolbar">
            <template slot="right-content">
              <v-tooltip left v-if="
                  acceptedEvents.length > 0 && hasPermit('BLOCK_DOCK_STOP', 'W')
                ">
                <template v-slot:activator="{ on }">
                  <v-btn v-on="on" fab icon class="mr-2" color="error" @click="blockAllAcceptedEvents">
                    <v-icon color="error">fas fa-ban</v-icon>
                  </v-btn>
                </template>
                <span>{{ $t("block_all_stops") }}</span>
              </v-tooltip>

              <v-tooltip left v-if="
                  pendingEvents.length > 0 && hasPermit('ACCEPT_DOCK_STOP', 'W')
                ">
                <template v-slot:activator="{ on }">
                  <v-btn v-on="on" fab icon class="mr-2" color="success" @click="acceptAllPendingEvents">
                    <v-icon color="success">fas fa-check-double</v-icon>
                  </v-btn>
                </template>
                <span>{{ $t("accept_all_stops") }}</span>
              </v-tooltip>
              <v-tooltip left :disabled="!platformCapacityStatus" v-if="currentPlatformObject">
                <template v-slot:activator="{ on }">
                  <v-chip v-on="on" dark :color="
                      platformCapacityStatus
                        ? platformCapacityStatus.color
                        : 'primary'
                    ">
                    {{ currentPlatformObject.NOMBRE }}
                  </v-chip>
                </template>
                <span v-if="platformCapacityStatus">{{
                  $t("platform_capacity").replace(
                  "_PCT_",
                  platformCapacityStatus.pct
                  )
                  }}</span>
              </v-tooltip>

              <!-- <div> -->
              <v-btn-toggle v-model="mode" @change="fetchData" shaped mandatory dense class="mx-4"
                active-class="primary white--text">
                <v-btn text>{{ $t("dock_planning") }}</v-btn>
                <v-btn text>{{ $t("dock_real_time") }}</v-btn>
                <v-btn text v-if="hasPermit('PLANIFICAR_OPERARIOS', 'W')">{{
                  $t("dock_operarios")
                  }}</v-btn>
              </v-btn-toggle>

              <f-intervalComponent :intervalSeconds="intervalSeconds" :intervalSize="55" @intervalFinished="fetchData"
                ref="intervalComponent" :activeColor="
  docksAssignmentOptions.isToolbarDark ? '#fff' : '#000'
                " />

              <!-- Leyenda de retrasos -->
              <v-menu :close-on-content-click="false" attach="#dockAssignmentsMenuToolbar" :nudge-left="118"
                nudge-bottom="60">
                <template v-slot:activator="{ on }">
                  <v-btn fab icon class v-on="on">
                    <v-icon color="black">fas fa-question</v-icon>
                  </v-btn>
                </template>

                <v-card>
                  <template v-if="mode == 0">
                    <v-subheader>{{ $t("dockAssignment") }}</v-subheader>
                    <v-list light class="py-0">
                      <v-list-item>
                        <v-list-item-action>
                          <v-chip small color="rgb(55, 136, 216)"> </v-chip>
                        </v-list-item-action>

                        <v-list-item-content>
                          <v-list-item-title>{{
                            $t("dock_requested")
                            }}</v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>

                      <v-divider></v-divider>
                      <v-list-item>
                        <v-list-item-action>
                          <v-chip small color="rgb(0, 193, 0)"> </v-chip>
                        </v-list-item-action>

                        <v-list-item-content>
                          <v-list-item-title>{{
                            $t("dock_confirmed")
                            }}</v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>
                      <v-divider></v-divider>
                      <v-list-item>
                        <v-list-item-action>
                          <v-chip small color="error"> </v-chip>
                        </v-list-item-action>

                        <v-list-item-content>
                          <v-list-item-title>{{
                            $t("dock_blocked")
                            }}</v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>
                    </v-list>
                    <v-divider />
                  </template>
                  <template v-else>
                    <v-subheader>{{ $t("estimations") }}</v-subheader>

                    <v-list light class="py-0">
                      <v-divider></v-divider>
                      <v-list-item>
                        <v-list-item-action>
                          <v-chip small color="rgb(0, 193, 0)"> </v-chip>
                        </v-list-item-action>

                        <v-list-item-content>
                          <v-list-item-title>{{
                            $t("dock_in_time")
                            }}</v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>

                      <v-divider></v-divider>
                      <v-list-item>
                        <v-list-item-action>
                          <v-chip small color="rgb(255, 165, 0)"> </v-chip>
                        </v-list-item-action>

                        <v-list-item-content>
                          <v-list-item-title>{{
                            $t("dock_slight_displacement")
                            }}</v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>

                      <v-divider></v-divider>
                      <v-list-item>
                        <v-list-item-action>
                          <v-chip small color="rgb(235, 0, 0)"> </v-chip>
                        </v-list-item-action>

                        <v-list-item-content>
                          <v-list-item-title>{{
                            $t("dock_severe_displacement")
                            }}</v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>

                      <v-divider></v-divider>
                      <v-list-item>
                        <v-list-item-action>
                          <v-chip small color="rgb(55, 136, 216)"> </v-chip>
                        </v-list-item-action>

                        <v-list-item-content>
                          <v-list-item-title>{{
                            $t("dock_no_estimate")
                            }}</v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>
                    </v-list>
                  </template>
                  <v-subheader>{{ $t("dockAssignmentStatus") }}</v-subheader>
                  <v-list light class="py-0">
                    <v-list-item>
                      <v-list-item-action>
                        <v-chip small color="#F7CB73"> </v-chip>
                      </v-list-item-action>

                      <v-list-item-content>
                        <v-list-item-title>{{ $t("MAP_PENDING_STOP") }}
                        </v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>

                    <v-divider></v-divider>

                    <v-list-item>
                      <v-list-item-action>
                        <v-chip small color="#00B0FF"> </v-chip>
                      </v-list-item-action>

                      <v-list-item-content>
                        <v-list-item-title>{{
                          $t("MAP_PROGRESS_STOP")
                          }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>

                    <v-divider></v-divider>
                    <v-list-item>
                      <v-list-item-action>
                        <v-chip small color="#00C853"> </v-chip>
                      </v-list-item-action>

                      <v-list-item-content>
                        <v-list-item-title>{{
                          $t("MAP_FINISHED_STOP")
                          }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                    <v-divider />
                  </v-list>
                  <v-subheader>{{
                    $t("dockAssignmentStopsToDockStatus")
                    }}</v-subheader>
                  <v-list light class="py-0">
                    <v-list-item>
                      <v-list-item-action>
                        <v-chip small color="rgba(0, 193, 0, .15)"> </v-chip>
                      </v-list-item-action>

                      <v-list-item-content>
                        <v-list-item-title>{{
                          $t("dock_in_time")
                          }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>

                    <v-divider></v-divider>
                    <v-list-item>
                      <v-list-item-action>
                        <v-chip small color="rgba(255, 165, 0, .15)"> </v-chip>
                      </v-list-item-action>

                      <v-list-item-content>
                        <v-list-item-title>{{
                          $t("dock_slight_displacement")
                          }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>

                    <v-divider></v-divider>
                    <v-list-item>
                      <v-list-item-action>
                        <v-chip small color="rgba(235, 0, 0, .15)"> </v-chip>
                      </v-list-item-action>

                      <v-list-item-content>
                        <v-list-item-title>{{
                          $t("dock_severe_displacement")
                          }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>

                    <v-divider></v-divider>
                    <v-list-item>
                      <v-list-item-action>
                        <v-chip small color="black" outlined> </v-chip>
                      </v-list-item-action>

                      <v-list-item-content>
                        <v-list-item-title>{{
                          $t("dock_no_estimate")
                          }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item>
                  </v-list>
                </v-card>
              </v-menu>

              <v-btn fab icon class @click="fetchData">
                <v-icon color="black">fas fa-redo-alt</v-icon>
              </v-btn>
            </template>
          </view-title>
        </v-card>
        <!-- Listado rutas -->
        <v-row no-gutters style="height: calc(100% - 83px)" :class="{ operarios: mode == 2 }">
          <v-col :cols="hideFreeStops ? 12 : 10" class="mt-4">
            <Fullcalendar :options="calendarOptions" ref="fullCalendar">
              <template v-slot:eventContent="arg">
                <div v-if="arg.event.extendedProps.isDocked">
                  <v-tooltip right class="fc-event-main-frame" style="overflow: hidden">
                    <template v-slot:activator="{ on }">
                      <div v-on="minimize ? on : null" class="fc-event-title-container pl-2 pt-2"
                        style="font-size: 1.1em">
                        <v-row no-gutters>
                          <v-col class="pa-0">
                            <div class="stopDockCircleStatus elevation-7"
                              :style="`background-color: ${arg.event.extendedProps.stopStatusColor}`" />
                            <div v-if="
                                platformConfig &&
                                parseInt(arg.event.extendedProps.stopStatus) ==
                                  parseInt(platformConfig.ID_ESTADO_ESPERA)
                              " class="stopDockWaitingApproval elevation-7">
                              <v-icon small color="white" class="centerApproval">fas fa-truck-loading</v-icon>
                            </div>

                            <p class="description white--text">
                              {{ arg.event.extendedProps.CODIGO_RUTA }}
                            </p>
                            <template v-if="!minimize">
                              <p class="usuario white--text">
                                <v-icon small color="white">fas fa-box</v-icon>
                                {{ arg.event.extendedProps.tipoProducto }}
                              </p>
                              <p class="usuario white--text">
                                <v-icon small color="white">fas fa-user</v-icon>
                                {{
                                arg.event.extendedProps.NOMBRE_CONDUCTOR
                                ? arg.event.extendedProps.NOMBRE_CONDUCTOR
                                : $t("notAssigned")
                                }}
                              </p>
                              <p class="usuario white--text">
                                <v-icon small color="white">fas fa-truck</v-icon>
                                {{
                                arg.event.extendedProps.vehicleID
                                ? arg.event.extendedProps.vehicleID
                                : $t("notAssigned")
                                }}
                              </p>
                              <v-row no-gutters>
                                <v-col>
                                  <p class="agency" style="color: white">
                                    {{ $t("agency") }}:
                                    {{
                                    arg.event.extendedProps.agencia
                                    ? arg.event.extendedProps.agencia
                                    : $t("notAssigned")
                                    }}
                                  </p>
                                </v-col>
                              </v-row>
                              <p class="agency" style="color: white">
                                {{ $t("dock_operarios") }}:
                                {{
                                arg.event.extendedProps.costeOperarios
                                ? arg.event.extendedProps.costeOperarios
                                : $t("notAssigned")
                                }}
                              </p>
                            </template>
                          </v-col>
                        </v-row>
                      </div>
                    </template>
                    <template v-if="minimize">
                      <p class="description white--text">
                        {{ arg.event.extendedProps.CODIGO_RUTA }}
                      </p>
                      <p class="usuario white--text">
                        <v-icon small color="white">fas fa-box</v-icon>
                        {{ arg.event.extendedProps.tipoProducto }}
                      </p>
                      <p class="usuario white--text">
                        <v-icon small color="white">fas fa-user</v-icon>
                        {{
                        arg.event.extendedProps.NOMBRE_CONDUCTOR
                        ? arg.event.extendedProps.NOMBRE_CONDUCTOR
                        : $t("notAssigned")
                        }}
                      </p>
                      <p class="usuario white--text">
                        <v-icon small color="white">fas fa-truck</v-icon>
                        {{
                        arg.event.extendedProps.vehicleID
                        ? arg.event.extendedProps.vehicleID
                        : $t("notAssigned")
                        }}
                      </p>
                      <v-row no-gutters>
                        <v-col>
                          <p class="agency" style="color: white">
                            {{ $t("agency") }}:
                            {{
                            arg.event.extendedProps.agencia
                            ? arg.event.extendedProps.agencia
                            : $t("notAssigned")
                            }}
                          </p>
                        </v-col>
                      </v-row>
                      <p class="agency" style="color: white">
                        {{ $t("dock_operarios") }}:
                        {{
                        arg.event.extendedProps.costeOperarios
                        ? arg.event.extendedProps.costeOperarios
                        : $t("notAssigned")
                        }}
                      </p>
                    </template>
                  </v-tooltip>
                </div>
                <div v-else>
                  <div class="fc-event-main-frame">
                    <div class="fc-event-title-container">
                      <div class="fc-event-title fc-sticky" style="top: 0px">
                        {{
                        !hasPermit(
                        "HIDE_DOCKS_EVENTS_DESCRIPCION",
                        "W",
                        null,
                        null,
                        null,
                        true
                        ) || arg.event.extendedProps.commentID == null
                        ? arg.event.title
                        : "&nbsp;"
                        }}
                      </div>
                      <p v-if="
                          !hasPermit(
                            'HIDE_DOCKS_EVENTS_DESCRIPCION',
                            'W',
                            null,
                            null,
                            null,
                            true
                          ) &&
                          arg.event.extendedProps.commentID != null &&
                          globalRestrictions
                        " class="agency" style="color: white">
                        {{ $t("dock_operarios") }}:
                        {{
                        arg.event.extendedProps.costeOperarios
                        ? arg.event.extendedProps.costeOperarios
                        : $t("notAssigned")
                        }}
                      </p>
                    </div>
                  </div>
                </div>
              </template>
            </Fullcalendar>
            <v-menu v-if="showMenu" v-model="showMenu" :position-x="eventMenu.x" :position-y="eventMenu.y">
              <!-- :attach="getElementToAttach()" -->
              <v-card :color="eventMenu.event.backgroundColor" min-width="300">
                <v-card-title>
                  <v-row justify="space-between">
                    <v-col class="white--text">
                      <span>{{
                        !hasPermit(
                        "HIDE_DOCKS_EVENTS_DESCRIPCION",
                        "W",
                        null,
                        null,
                        null,
                        true
                        ) && !eventMenu.event.id.includes("event_comm")
                        ? eventMenu.event.title
                        : "&nbsp;"
                        }}</span>
                    </v-col>
                    <v-col v-if="mode == 1" class="text-right">
                      <v-chip small light color="white">
                        {{
                        eventMenu.event.extendedProps.ETA
                        ? getDateToShow(eventMenu.event.extendedProps.ETA)
                        : $t("no_estimacion")
                        }}
                      </v-chip>
                    </v-col>
                  </v-row>
                </v-card-title>
                <v-card-text class="py-0 white px-0">
                  <v-list class="py-0">
                    <template v-if="
                        eventMenu.event.extendedProps.commentID &&
                        !hasPermit(
                          'HIDE_DOCKS_EVENTS_DESCRIPCION',
                          'W',
                          null,
                          null,
                          null,
                          true
                        )
                      ">
                      <v-list-item @click="editComment">
                        <v-list-item-avatar>
                          <v-icon small color="primary">fas fa-edit</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{ $t("edit") }}</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="deleteComment">
                        <v-list-item-avatar>
                          <v-icon small color="error">fas fa-times</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{
                          $t("delete")
                          }}</v-list-item-title>
                      </v-list-item>
                    </template>
                    <template v-else-if="
                        !eventMenu.event.extendedProps.commentID &&
                        mode == 0 &&
                        (!eventMenu.event.extendedProps.status ||
                          eventMenu.event.extendedProps.status == 0)
                      ">
                      <v-list-item @click="acceptEvent" v-if="hasPermit('ACCEPT_DOCK_STOP', 'W')">
                        <v-list-item-avatar>
                          <v-icon small color="success">fas fa-check</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{
                          $t("accept")
                          }}</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="deleteEvent" v-if="mode == 0 && hasPermit('REJECT_DOCK_STOP', 'W')">
                        <v-list-item-avatar>
                          <v-icon small color="error">fas fa-times</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{
                          $t("refuse")
                          }}</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="approveDockStop" v-if="
                          platformConfig &&
                          eventMenu.event.extendedProps.stopStatus ==
                            platformConfig.ID_ESTADO_ESPERA &&
                          hasPermit('APPROVE_DOCK_STOP', 'W')
                        ">
                        <v-list-item-avatar>
                          <v-icon small color="info">fas fa-check-double</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{
                          $t("authorize")
                          }}</v-list-item-title>
                      </v-list-item>
                    </template>
                    <template v-else-if="!eventMenu.event.extendedProps.commentID">
                      <v-list-item v-if="
                          hasPermit('BLOCK_DOCK_STOP', 'W') &&
                          eventMenu.event.extendedProps.status == 1
                        " @click="blockEvent">
                        <v-list-item-avatar>
                          <v-icon small color="error">fas fa-ban</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{ $t("block") }}</v-list-item-title>
                      </v-list-item>

                      <v-list-item v-if="
                          hasPermit('BLOCK_DOCK_STOP', 'W') &&
                          eventMenu.event.extendedProps.status == -1
                        " @click="unblockEvent">
                        <v-list-item-avatar>
                          <v-icon small color="success">fas fa-arrow-left</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{
                          $t("unblock")
                          }}</v-list-item-title>
                      </v-list-item>

                      <v-list-item @click="deleteEvent" v-if="
                          hasPermit('REJECT_DOCK_STOP', 'W') &&
                          (eventMenu.event.extendedProps.status != -1 ||
                            hasPermit('BLOCK_DOCK_STOP', 'W'))
                        ">
                        <v-list-item-avatar>
                          <v-icon small color="error">fas fa-times</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{
                          $t("delete")
                          }}</v-list-item-title>
                      </v-list-item>
                      <v-list-item @click="approveDockStop" v-if="
                          platformConfig &&
                          eventMenu.event.extendedProps.stopStatus ==
                            platformConfig.ID_ESTADO_ESPERA &&
                          hasPermit('AUTHORIZE_DOCK_STOP', 'W')
                        ">
                        <v-list-item-avatar>
                          <v-icon small color="info">fas fa-check-double</v-icon>
                        </v-list-item-avatar>
                        <v-divider class="mr-4" vertical></v-divider>
                        <v-list-item-title>{{
                          $t("authorize")
                          }}</v-list-item-title>
                      </v-list-item>
                    </template>
                    <v-list-item @click="goToRoute" v-if="
                        !eventMenu.event.extendedProps.commentID &&
                        showGoToRoute
                      ">
                      <v-list-item-avatar>
                        <v-icon small>fas fa-directions</v-icon>
                      </v-list-item-avatar>
                      <v-divider class="mr-4" vertical></v-divider>
                      <v-list-item-title>{{ $t("view") }} {{ $t("route") }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-card-text>
              </v-card>
            </v-menu>
          </v-col>
          <v-col v-show="!hideFreeStops" cols="2">
            <v-card>
              <v-toolbar color="primary" dark height="48px">
                <div class="text-button text-center" style="width: 100%">
                  {{ $t("undocked_stops") }}
                </div>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on }">
                    <v-btn v-on="on" class="mx-2" fab icon @click="initSearch">
                      <v-icon>fas fa-search</v-icon>
                    </v-btn>
                  </template>

                  <span>{{ $t("search") }}</span>
                </v-tooltip>
              </v-toolbar>

              <v-expand-x-transition>
                <v-toolbar id="searchToolbar" dense flat rounded="0" v-show="searchActive">
                  <v-text-field hide-details v-model="searchStopsToDock" ref="searchStopsToDock" single-line
                    class="mr-4" @keydown.esc="
                      searchActive = false;
                      showFilteredStopsToDock = false;
                      searchStopsToDock = null;
                    ">
                    <template v-slot:prependIcon>
                      <v-icon small color="primary">fas fa-search</v-icon>
                    </template>
                  </v-text-field>
                  <v-btn small dense color="primary" @click="
                      searchActive = false;
                      showFilteredStopsToDock = false;
                      searchStopsToDock = null;
                    ">{{ $t("cancel") }}</v-btn>
                </v-toolbar>
              </v-expand-x-transition>

              <v-card-text :style="`height: calc(100vh - ${
                  searchActive ? 257 : 209
                }px); position: relative`">
                <v-container fluid class="py-0" style="height: 100%">
                  <v-row class="py-0" style="height: 100%">
                    <v-col cols="12" class="pa-0">
                      <json-form :form="formDates" :obj="filter" />
                    </v-col>
                    <v-divider />
                    <v-col cols="12" class="px-0" style="height: calc(100% - 72px)">
                      <v-list :three-line="
                          vehiclesToDockAndShow.some(
                            (stop) => stop.stopETAColor.length > 0
                          )
                        " :two-line="
                          vehiclesToDockAndShow.every(
                            (stop) => stop.stopETAColor.length > 0
                          )
                        " subheader id="draggableContainer" class="overflow-y-auto"
                        style="max-height: calc(100% - 1px)">
                        <template v-for="(item, index) in showFilteredStopsToDock
                            ? stopsToDockFiltered
                            : vehiclesToDockAndShow">
                          <v-list-item :key="item.ID_PARADA" class="draggableItem" :style="`background-color: ${
                              item.stopETAColor ? item.stopETAColor : ''
                            }`" :data-event="
                              JSON.stringify({
                                title: item.TITLE,
                                start: item.start,
                                end: item.end,
                                stopID: item.ID_PARADA,
                                tipoProducto: item.tipoProducto,
                                costeOperarios: item.costeOperarios,
                                duration: { minutes: item.DURACION },
                                create: false,
                              })
                            ">
                            <v-list-item-icon>
                              <v-btn icon class="primary" dark>
                                <v-icon small>fas fa-truck</v-icon>
                              </v-btn>
                            </v-list-item-icon>
                            <v-list-item-content>
                              <v-list-item-title>
                                <v-tooltip top disabled>
                                  <template v-slot:activator="{ on }">
                                    <span v-on="on">{{ item.TITLE }}</span>
                                  </template>
                                  <span>{{ item.TITLE }}</span>
                                </v-tooltip>
                              </v-list-item-title>
                              <v-list-item-subtitle v-if="
                                  item.OPERACIONES &&
                                  item.OPERACIONES.length > 0
                                ">
                                <v-menu :close-on-content-click="false" offset-x left ref="operationsMenu">
                                  <template v-slot:activator="{ on: onMenu }">
                                    <v-tooltip left>
                                      <template v-slot:activator="{ on }">
                                        <div v-on="on" class="mt-2">
                                          <v-icon small class="mr-2">fas fa-box-open</v-icon>
                                          <span>{{ item.tipoProducto }}</span>
                                          <v-btn color="info" class="ml-2" icon small v-on="onMenu" @click="
                                              tempOperations = JSON.parse(
                                                JSON.stringify(item.OPERACIONES)
                                              )
                                            " v-if="
                                              hasPermit(
                                                'EDIT_TIPO_PRODUCTO',
                                                'W'
                                              )
                                            ">
                                            <v-icon color="info" small>fas fa-pencil</v-icon>
                                          </v-btn>
                                        </div>
                                      </template>
                                      <span style="
                                          display: inline-block;
                                          width: calc(100% - 59px);
                                          white-space: nowrap;
                                          overflow: hidden;
                                          text-overflow: ellipsis;
                                        ">{{ item.descProducto }}</span>
                                    </v-tooltip>
                                  </template>

                                  <v-card style="max-height: 346px; overflow-y: auto">
                                    <v-subheader>{{ item.TITLE }}</v-subheader>
                                    <v-list>
                                      <v-list-item v-for="operation in item.OPERACIONES" :key="operation.ID_OPERACION">
                                        <v-list-item-avatar>
                                          <v-btn icon class="primary" dark>
                                            <v-icon small>fas fa-box</v-icon>
                                          </v-btn>
                                        </v-list-item-avatar>

                                        <v-list-item-content>
                                          <v-list-item-title>{{
                                            operation.CODIGO_OPERACION
                                            }}</v-list-item-title>
                                          <v-list-item-subtitle>
                                            <v-text-field @input="
                                                $store.commit(
                                                  '_setFieldAssignment',
                                                  {
                                                    obj: operation,
                                                    key: 'TIPO_PRODUCTO',
                                                    value: $event,
                                                  }
                                                )
                                              " :value="operation.TIPO_PRODUCTO" @keydown.enter="
                                                closeMenus();
                                                guardarTiposProducto(
                                                  item.OPERACIONES
                                                );
                                              " @keydown.esc="
                                                closeMenus();
                                                $store.commit(
                                                  '_setFieldAssignment',
                                                  {
                                                    obj: item,
                                                    key: 'OPERACIONES',
                                                    value: tempOperations,
                                                  }
                                                );
                                              " />
                                          </v-list-item-subtitle>
                                        </v-list-item-content>
                                      </v-list-item>
                                    </v-list>

                                    <v-card-actions>
                                      <v-spacer></v-spacer>

                                      <v-btn text @click="
                                          closeMenus();
                                          $store.commit('_setFieldAssignment', {
                                            obj: item,
                                            key: 'OPERACIONES',
                                            value: tempOperations,
                                          });
                                        ">
                                        {{ $t("cancel") }}
                                      </v-btn>
                                      <v-btn color="primary" text @click="
                                          closeMenus();
                                          guardarTiposProducto(
                                            item.OPERACIONES
                                          );
                                        ">
                                        {{ $t("save") }}
                                      </v-btn>
                                    </v-card-actions>
                                  </v-card>
                                </v-menu>
                              </v-list-item-subtitle>

                              <!-- Duracion de la parada -->
                              <v-list-item-subtitle class="py-2">
                                <v-menu :close-on-content-click="false" offset-x left ref="durationMenu">
                                  <template v-slot:activator="{ on: onMenu }">
                                    <v-tooltip left>
                                      <template v-slot:activator="{ on }">
                                        <div v-on="on">
                                          <v-icon class="mr-2" small>fas fa-clock</v-icon>
                                          <span>{{ item.DURACION_TEXT }}</span>
                                          <v-btn color="info" class="ml-2" icon small v-on="onMenu" @click="
                                              initTempDuration(item.DURACION)
                                            " v-if="
                                              hasPermit(
                                                'EDIT_DURACION_PARADA',
                                                'W'
                                              )
                                            ">
                                            <v-icon color="info" small>fas fa-pencil</v-icon>
                                          </v-btn>
                                        </div>
                                      </template>
                                      <span>{{ $t("stop_duration") }}</span>
                                    </v-tooltip>
                                  </template>

                                  <v-card>
                                    <v-subheader>{{ item.TITLE }}</v-subheader>

                                    <v-card-text class="text-center">
                                      <v-text-field v-model="tempDuracion.hours" hide-details solo flat style="
                                          max-width: 65px;
                                          display: inline-block;
                                        " suffix="h" class="inputDuration" @keydown.enter="
                                          closeMenusDuration();
                                          guardarDuracion(item);
                                        " @keydown.esc="
                                          closeMenusDuration();
                                          $store.commit('_setFieldAssignment', {
                                            obj: item,
                                            key: 'DURACION',
                                            value: item.DURACION,
                                          });
                                        " v-mask="'##'" />
                                      <v-text-field v-model="tempDuracion.minutes" hide-details solo flat style="
                                          max-width: 75px;
                                          display: inline-block;
                                        " suffix="m" class="inputDuration" @keydown.enter="
                                          closeMenusDuration();
                                          guardarDuracion(item);
                                        " @keydown.esc="
                                          closeMenusDuration();
                                          $store.commit('_setFieldAssignment', {
                                            obj: item,
                                            key: 'DURACION',
                                            value: item.DURACION,
                                          });
                                        " v-mask="'##'" />
                                    </v-card-text>

                                    <v-card-actions>
                                      <v-spacer></v-spacer>

                                      <v-btn text @click="
                                          closeMenusDuration();
                                          $store.commit('_setFieldAssignment', {
                                            obj: item,
                                            key: 'DURACION',
                                            value: item.DURACION,
                                          });
                                        ">
                                        {{ $t("cancel") }}
                                      </v-btn>
                                      <v-btn color="primary" text @click="
                                          closeMenusDuration();
                                          guardarDuracion(item);
                                        ">
                                        {{ $t("save") }}
                                      </v-btn>
                                    </v-card-actions>
                                  </v-card>
                                </v-menu>
                                <v-menu :close-on-content-click="false" offset-x left ref="numCargadores">
                                  <template v-slot:activator="{ on: onMenu }">
                                    <v-tooltip left>
                                      <template v-slot:activator="{ on }">
                                        <div v-on="on">
                                          <v-icon class="mr-2" small>fas fa-user</v-icon>
                                          <span>{{ item.NUM_CARGADORES }}</span>
                                          <v-btn color="info" class="ml-2" icon small v-on="onMenu" @click="
                                              initTempNumOperators(
                                                item.NUM_CARGADORES
                                              )
                                            " v-if="
                                              hasPermit(
                                                'EDIT_NUM_CARGADORES',
                                                'W'
                                              )
                                            ">
                                            <v-icon color="info" small>fas fa-pencil</v-icon>
                                          </v-btn>
                                        </div>
                                      </template>
                                      <span>{{ $t("num_operators") }}</span>
                                    </v-tooltip>
                                  </template>

                                  <v-card>
                                    <v-subheader>{{ item.TITLE }}</v-subheader>

                                    <v-card-text class="text-center">
                                      <v-text-field v-model="tempNumOperators.units" hide-details solo flat style="
                                          max-width: 45px;
                                          display: inline-block;
                                        " suffix="," class="" @keydown.enter="
                                          closeMenusNumOperators();
                                          guardarNumCargadores(item);
                                        " @keydown.esc="
                                          closeMenusNumOperators();
                                          $store.commit('_setFieldAssignment', {
                                            obj: item,
                                            key: 'NUM_CARGADORES',
                                            value: item.NUM_CARGADORES,
                                          });
                                        " v-mask="'##'" />
                                      <v-text-field v-model="tempNumOperators.decimals" hide-details solo flat style="
                                          max-width: 45px;
                                          display: inline-block;
                                        " suffix="" class="" @keydown.enter="
                                          closeMenusNumOperators();
                                          guardarNumCargadores(item);
                                        " @keydown.esc="
                                          closeMenusNumOperators();
                                          $store.commit('_setFieldAssignment', {
                                            obj: item,
                                            key: 'NUM_CARGADORES',
                                            value: item.NUM_CARGADORES,
                                          });
                                        " v-mask="'#'" />
                                    </v-card-text>

                                    <v-card-actions>
                                      <v-spacer></v-spacer>

                                      <v-btn text @click="
                                          closeMenusNumOperators();
                                          $store.commit('_setFieldAssignment', {
                                            obj: item,
                                            key: 'NUM_CARGADORES',
                                            value: item.NUM_CARGADORES,
                                          });
                                        ">
                                        {{ $t("cancel") }}
                                      </v-btn>
                                      <v-btn color="primary" text @click="
                                          closeMenusNumOperators();
                                          guardarNumCargadores(item);
                                        ">
                                        {{ $t("save") }}
                                      </v-btn>
                                    </v-card-actions>
                                  </v-card>
                                </v-menu>
                              </v-list-item-subtitle>

                              <slot name="stopToDockInfo" :stop="item" />
                              <v-list-item-subtitle>
                                <v-tooltip left>
                                  <template v-slot:activator="{ on }">
                                    <span v-on="on">{{ item.SUBTITLE }}</span>
                                  </template>
                                  <span>{{ $t("stop_planned_date") }}</span>
                                </v-tooltip>
                              </v-list-item-subtitle>
                              <v-list-item-subtitle>
                                <v-tooltip left>
                                  <template v-slot:activator="{ on }">
                                    <span v-on="on">{{
                                      item.THIRD_TITLE
                                      }}</span>
                                  </template>
                                  <span>{{
                                    $t("stops_filter_FECHA_PREVISTA")
                                    }}</span>
                                </v-tooltip></v-list-item-subtitle>
                            </v-list-item-content>
                          </v-list-item>
                          <v-divider v-if="index + 1 < vehiclesToDockAndShow.length"
                            :key="`divider_stop_${index}`"></v-divider>
                        </template>
                      </v-list>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        <v-btn v-if="mode != 2" :class="hideFreeStops ? 'primary' : 'white'"
          :style="showPlatformButton ? 'margin-bottom: 80px' : ''" @click="hideFreeStops = !hideFreeStops" fab fixed
          bottom right><v-icon :color="hideFreeStops ? 'white' : 'primary'">{{
            hideFreeStops ? "visibility" : "visibility_off"
            }}</v-icon></v-btn>
        <v-btn v-if="showPlatformButton" class="primary" @click="dialogPlatform = true" fab fixed bottom right><v-icon
            color="white">store</v-icon></v-btn>
      </v-col>
      <modal :showModal="dialogPlatform" :maxWidth="'450px'" :title="$t('selectPlatform')"
        @closeModal="dialogPlatform = false" :cancelButton="true" :closeButton="false" @ok="assignPlatform">
        <v-select v-model="platformSelected" item-value="CODIGO_INTERNO" :item-text="
            (platform) =>
              `${platform.CODIGO_INTERNO.replaceAll('%', '')} (${
                platform.NOMBRE
              })`
          " :items="platforms" :label="$t('platform') + '*'" required></v-select>
      </modal>
      <modal :showModal="showCalendarModal" :title="$t('select_date')" :maxWidth="'450px'"
        @closeModal="showCalendarModal = false" :cancelButton="false" :okButton="false">
        <v-date-picker first-day-of-week="1" :locale="
            $store.getters.getDocksAssignmentUser.Language == 1
              ? 'es-ES'
              : 'en-EN'
          " :value="formatDateFromFieldeasFormat(calendarDate)" @input="
            changeCalendarDate($event);
            showCalendarModal = false;
          " no-title scrollable width="100%"></v-date-picker>
      </modal>
      <modal v-if="showNewConfig" :showModal="showNewConfig" :title="$t(isEditConfig ? 'editConfig' : 'new_config')"
        :maxWidth="'450px'" @closeModal="resetConfig" @ok="createNewConfig">
        <v-form ref="scheduleForm">
          <json-form :form="formDateConfig" :obj="newConfig" />
          <v-btn color="error" block large class="my-4" text v-if="newConfigExists" @click="deleteConfig">{{
            $t("delete") }}</v-btn>
        </v-form>
        <v-alert v-if="!isEditConfig && newConfigExists" color="warning" class="white--text mt-3 mb-0">{{
          $t("new_config_exists") }}</v-alert>
      </modal>
    </v-row>
  </v-container>
</template>
<script src="./dockAssignment.js"></script>
<style src="./dockAssignment.scss" lang="scss" scoped />