@golstats/gsc-top-player 1.0.11 → 1.0.13

package/src/components/comparative/gsc-top.vue

@@ -1,1511 +1,1511 @@
-<template>
-  <div :class="type == 0 ? 'gsc-top' : 'gsc-top-full'">
-    <div ref="myDivRef">
-      <template v-if="type == 0">
-        <template v-if="topData.length > 0">
-          <!-- Título de la categoría con línea verde -->
-          <div class="btnViewFullList">
-            <div class="text">{{ categoryName }}</div>
-          </div>
-          <div class="row-table-carrousel">
-            <template v-for="(player, index) in topData[0]" :key="index">
-              <template v-if="player.top == 1">
-                <GSCLeaders
-                  @mediadata="emitEventMedia($event, category, categoryName)"
-                  :type="typeTable"
-                  :type-data="typeData"
-                  :game="game"
-                  :arrow="arrow"
-                  :team-widget="teamWidget"
-                  :can-play-videos="canPlayVideos"
-                  :is-expanded="playerexpand == player.id && expand"
-                  ref="GSCLeaders"
-                  :data="
-                    typeTable == 0
-                      ? {
-                          top: '01',
-                          photo: player.img,
-                          logo:
-                            player.img && player.img.includes('player-shadow')
-                              ? 'https://golstatsimages.blob.core.windows.net/images-library/logo-team@2x.png'
-                              : 'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                                player.teamid +
-                                '.png',
-                          name: player.name,
-                          player_short: player.name_short,
-                          player_id: player.id,
-                          categoryId: category,
-                          total: player.total,
-                        }
-                      : {
-                          top: '01',
-                          logo: player.img,
-                          total: player.total,
-                          name_team: player.name,
-                          player_id: player.id,
-                        }
-                  "
-                  :category-name="categoryName"
-                  :buttonMaxWidth="
-                    typeTable != 0
-                      ? elementSize.width > 360
-                        ? '210px'
-                        : '130px'
-                      : elementSize.width > 360
-                        ? '180px'
-                        : '110px'
-                  "
-                  :buttonFontSize="getButtonFontSize()"
-                  iconSize="11px"
-                  @expand="clickexpand"
-                  @more="morestats"
-                />
-              </template>
-              <template v-else>
-                <GSCRowTable
-                  :type-data="typeData"
-                  :team-widget="teamWidget"
-                  :game="game"
-                  :type="typeTable"
-                  :type-view="type"
-                  :arrow="arrow"
-                  :is-expanded="playerexpand == player.id && expand"
-                  @mediadata="emitEventMedia($event, category, categoryName)"
-                  :data="
-                    typeTable == 0
-                      ? {
-                          position: player.top,
-                          player_name: player.name,
-                          player_short: player.name_short,
-                          player_photo: player.img,
-                          total: player.total,
-                          id: player.id,
-                          player_age: player.age,
-                          team_abrev: player.team,
-                          team_logo:
-                            player.img && player.img.includes('player-shadow')
-                              ? 'https://golstatsimages.blob.core.windows.net/images-library/logo-team@2x.png'
-                              : 'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                                player.teamid +
-                                '.png',
-                          player_position: player.position,
-                          player_country_flag:
-                            'https://golstatsimages.blob.core.windows.net/flags/' +
-                            player.country +
-                            '.jpg',
-                          player_games: player.minutes,
-                          player_min: player.games,
-                          league_name:
-                            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Liga MX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
-                        }
-                      : {
-                          position: player.top,
-                          team_logo: player.img,
-                          team_abrev: player.name,
-                          frequency: player.frecuency,
-                          promthistournament: player.game_avg,
-                          promlasttournament: player.game_avg_last_season,
-                          teams_games: '-',
-                          category: category,
-                          total: player.total,
-                          id: player.id,
-                        }
-                  "
-                  height="71px"
-                  :can-play-videos="canPlayVideos"
-                  :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
-                  @expand="clickexpand"
-                />
-              </template>
-              <template v-if="expand && playerexpand == player.id">
-                <GSCExpandedInfo
-                  :type="typeTable"
-                  :is-live="game.is_live"
-                  :view-effectiveness="player.positionId === 1 ? false : true"
-                  :data="
-                    typeTable == 0
-                      ? {
-                          teams: player.teamname,
-                          age: player.age,
-                          dataofbirth: player.date,
-                          nationality: player.nationality,
-                          countryFlag: player.player_country_flag,
-                          position: player.position,
-                          games: player.games,
-                          min: player.minutes,
-                          goals: player.total,
-                          effectiveness: player.effectiveness,
-                          category: categoryName,
-                          id: player.id,
-                        }
-                      : {
-                          position: player.positiontable,
-                          goals: player.goals,
-                          goals_received: player.goalsrecived,
-                          games_played: player.games_played,
-                          category: categoryName,
-                          effectiveness: player.effectiveness,
-                          xg: player.xg,
-                          total: player.total,
-                          attendance: '-',
-                          id: player.id,
-                        }
-                  "
-                  @viewprofile="viewprofile($event, player.teamid)"
-                  :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
-                />
-              </template>
-            </template>
-          </div>
-        </template>
-        <template v-else>
-          <div class="container-no-search-result">
-            <template v-if="isloading">
-              <div class="overlay-loading-top">
-                <div class="overlay-loading-top__spinner">
-                  <img
-                    src="https://golstatsimages.blob.core.windows.net/images-library/balon_liga.png"
-                    alt=""
-                  />
-                </div>
-                <div class="overlay-loading-top__text">Loading...</div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="container-no-search-result-title">No existen resultados</div>
-              <div class="container-no-search-result-subtitle">
-                No existen resultados para este tipo de<br />
-                jugada, considerando el torneo y otros<br />
-                filtros que has seleccionado.
-              </div>
-            </template>
-          </div>
-        </template>
-      </template>
-      <template v-else>
-        <GSCTableHeader background="#183143" :type="typeTable" />
-        <template v-for="(page, index2) in topData" :key="index2">
-          <template v-for="(player, index) in page.slice(0, numRows)" :key="index">
-            <GSCRowTable
-              :type-data="typeData"
-              :team-widget="teamWidget"
-              :game="game"
-              :arrow="arrow"
-              :type="typeTable"
-              :type-view="type"
-              :can-play-videos="canPlayVideos"
-              :is-expanded="playerexpand == player.id && expand"
-              @mediadata="emitEventMediaFullTable($event, category, categoryName)"
-              :data="
-                typeTable == 0
-                  ? {
-                      position: player.top,
-                      player_name: player.name,
-                      player_short: player.name_short,
-                      player_photo: player.img,
-                      total: player.total,
-                      id: player.id,
-                      player_age: player.age,
-                      team_abrev: player.team,
-                      team_logo:
-                        'https://golstatsimages.blob.core.windows.net/teams-80/' +
-                        player.teamid +
-                        '.png',
-                      player_position: player.position,
-                      player_country_flag:
-                        'https://golstatsimages.blob.core.windows.net/flags/' +
-                        player.country +
-                        '.jpg',
-                      player_games: player.games,
-                      player_min: player.minutes,
-                      league_name:
-                        '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Liga MX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
-                    }
-                  : {
-                      position: player.positiontable,
-                      team_logo: player.img,
-                      team_abrev: player.name,
-                      frequency: player.frecuency,
-                      promthistournament: player.game_avg,
-                      promlasttournament: player.game_avg_last_season,
-                      category: category,
-                      team_games: player.games_played,
-                      total: player.total,
-                      id: player.id,
-                    }
-              "
-              height="71px"
-              :background="((index2 + 1) * 5 + index) % 2 === 0 ? backgroundOdd : backgroundEven"
-              @expand="clickexpand"
-            />
-            <template v-if="expand && playerexpand == player.id">
-              <GSCExpandedInfo
-                :type="typeTable"
-                :is-live="game.is_live"
-                :additionalClass="'fullTable'"
-                :view-effectiveness="player.positionId === 1 ? false : true"
-                :data="
-                  typeTable == 0
-                    ? {
-                        teams: player.teamname,
-                        age: player.age,
-                        dataofbirth: player.date,
-                        nationality: player.nationality,
-                        countryFlag: player.player_country_flag,
-                        position: player.positionfull,
-                        positionfull: player.positionfull,
-                        games: player.games,
-                        min: player.minutes,
-                        goals: player.total,
-                        effectiveness: player.effectiveness,
-                        category: getCategoryName(category),
-                        id: player.id,
-                      }
-                    : {
-                        position: player.positiontable,
-                        goals: player.goals,
-                        goals_received: player.goalsrecived,
-                        games_played: player.games_played,
-                        category: categoryName,
-                        effectiveness: player.effectiveness,
-                        xg: player.xg,
-                        total: player.total,
-                        category: getCategoryName(category),
-                        attendance: '-',
-                        id: player.id,
-                      }
-                "
-                @viewprofile="viewprofile($event, player.teamid)"
-                :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
-              />
-            </template>
-          </template>
-        </template>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import { ref } from 'vue'
-import useElementSize from './useElementSize'
-import GSCLeaders from './gsc-header-tops.vue'
-import GSCRowTable from './gsc-row.vue'
-import GSCTableHeader from './gsc-head-titles.vue'
-import GSCExpandedInfo from './gsc-expanded-info-player.vue'
-
-import nationalitiesCatalog from '@/components/comparative/nationalities-catalog.js'
-
-export default {
-  components: {
-    GSCLeaders,
-    GSCRowTable,
-    GSCTableHeader,
-    GSCExpandedInfo,
-  },
-  props: {
-    isTeam: {
-      type: Boolean,
-      default: false,
-    },
-    typeTable: {
-      type: Number,
-      default: 0,
-    },
-    carrousel: {
-      type: Boolean,
-      default: false,
-    },
-    arrow: {
-      type: Boolean,
-      default: false,
-    },
-    typeData: {
-      type: Number,
-      default: 0,
-    },
-    gameId: {
-      type: Number,
-      default: 0,
-    },
-    filtersProp: {
-      type: [Object, String],
-      default: () => {},
-    },
-    game: {
-      type: Object,
-      default: () => ({}),
-    },
-    isWidget: {
-      type: Boolean,
-      default: false,
-    },
-    teamWidget: {
-      type: Number,
-      default: 0,
-    },
-    canPlayVideos: {
-      type: Boolean,
-      default: false,
-    },
-    filterTeam: {
-      type: Number,
-      default: 0,
-    },
-    timeLiveComparativeAvanced: {
-      type: Number,
-      default: 60000,
-    },
-    category: {
-      type: Number,
-      default: 1,
-    },
-    categoryName: {
-      type: String,
-      default: 'Goles',
-    },
-    seasonSelected: {
-      type: Object,
-      default: () => ({}),
-    },
-    season: {
-      type: Number,
-      default: 1772,
-    },
-    type: {
-      type: Number,
-      default: 0,
-    },
-    borderRadius: { type: String, default: '8px' },
-    borderWidth: { type: [String, Number], default: '2px' },
-    borderColor: { type: String, default: '#cfcfcf' },
-    backgroundOdd: { type: String, default: '#172531' },
-    backgroundEven: { type: String, default: '#0d1d29' },
-    numRows: { type: Number, default: 5 },
-    dummyData: {
-      type: Array,
-      default: null,
-    },
-  },
-  setup() {
-    const myDivRef = ref('myDivRef')
-    const { elementSize } = useElementSize(myDivRef)
-    return {
-      myDivRef,
-      elementSize,
-    }
-  },
-  watch: {
-    game: {
-      immediate: true,
-      deep: true,
-      async handler(newValue) {
-        if (!newValue) return
-        this.playersInfo = {}
-        this.teamInfo = {}
-        this.isloading = true
-        this.formatFilterStats = []
-        await this.getCategoryStats(this.season)
-        if (this.game.is_live) {
-          this.createIntervalTops()
-          this.$emit('intervalidtops', this.intervalIdtops)
-        }
-      },
-    },
-    typeData: {
-      immediate: true,
-      async handler(newValue) {
-        await this.getCategoryStats(this.season)
-        if (newValue === 1 && this.game.is_live) {
-          this.createIntervalTops()
-          this.$emit('intervalidtops', this.intervalIdtops)
-        } else {
-          clearInterval(this.intervalIdtops)
-        }
-      },
-    },
-    filtersProp: {
-      immediate: false,
-      deep: true,
-      async handler(newValue, oldValue) {
-        if (!newValue) return
-        if (
-          JSON.stringify(newValue) !== JSON.stringify(oldValue) ||
-          this.sonConjuntosDistintos(newValue.setNationalitiesIds, oldValue.setNationalitiesIds)
-        ) {
-          this.isloading = true
-          this.filterEmitAux = newValue
-          const categoryZone1 = [1, 23, 3, 4, 5, 7, 6, 9, 8, 11, 10, 12, 13, 15, 14, 17, 16, 22]
-          if (categoryZone1.includes(this.category)) {
-            this.filterEmitAux.typeZone = 1
-          } else {
-            this.filterEmitAux.typeZone = 2
-          }
-          this.formatFilterStats = await this.filterRecords(this.filterEmitAux)
-        }
-      },
-    },
-  },
-  computed: {
-    topData() {
-      // Si hay dummyData, úsala directamente
-      if (this.dummyData) {
-        return [this.dummyData]
-      }
-      this.changeStateLoading(true)
-      if (Object.entries(this.statsData).length > 0 && this.formatFilterStats.length > 0) {
-        var topTeam = {}
-        var topPlayer = {}
-        var sortTopTeam = []
-        var sortMinutes = []
-        var sortTopPlayer = []
-        var sortTopPlayerFilterTeam = []
-
-        this.formatFilterStats.map((play) => {
-          if (topTeam[play.team_id]) {
-            topTeam[play.team_id]['total'] = topTeam[play.team_id]['total'] + play.total
-          } else {
-            sortMinutes
-            topTeam[play.team_id] = {}
-            topTeam[play.team_id]['total'] = play.total
-            topTeam[play.team_id]['id'] = this.teamInfo[play.team_id].id
-            topTeam[play.team_id]['name'] = this.teamInfo[play.team_id].name.replace(' Femenil', '')
-            topTeam[play.team_id]['img'] =
-              'https://golstatsimages.blob.core.windows.net/teams-80/' + play.team_id + '.png'
-            topTeam[play.team_id]['effectiveness'] = this.teamInfo[play.team_id].effectiveness
-            topTeam[play.team_id]['frecuency'] = this.teamInfo[play.team_id].frecuency
-            topTeam[play.team_id]['game_avg'] = this.teamInfo[play.team_id].game_avg
-            topTeam[play.team_id]['game_avg_last_season'] =
-              this.teamInfo[play.team_id].game_avg_last_season
-            topTeam[play.team_id]['games_played_lastseason'] =
-              this.teamInfo[play.team_id].games_played_lastseason
-            topTeam[play.team_id]['games_played'] = this.teamInfo[play.team_id].games_played
-            topTeam[play.team_id]['positiontable'] = this.teamInfo[play.team_id].positiontable
-            topTeam[play.team_id]['goals'] = this.teamInfo[play.team_id].goals
-            topTeam[play.team_id]['goalsrecived'] = this.teamInfo[play.team_id].goalsrecived
-            topTeam[play.team_id]['xg'] = this.teamInfo[play.team_id].xg
-          }
-          if (topPlayer[play.player_id]) {
-            if (play.player_id != 0 && play.player_id != 62117) {
-              topPlayer[play.player_id]['total'] = topPlayer[play.player_id]['total'] + play.total
-            }
-          } else {
-            if (play.player_id != 0 && play.player_id != 62117) {
-              topPlayer[play.player_id] = {}
-              topPlayer[play.player_id]['total'] = play.total
-              if (play.player_id && this.playersInfo[play.player_id]) {
-                topPlayer[play.player_id]['name'] = this.playersInfo[play.player_id].name
-                topPlayer[play.player_id]['name_short'] = this.getnameshort(
-                  this.playersInfo[play.player_id].name,
-                )
-                topPlayer[play.player_id]['img'] = this.playersInfo[play.player_id].img
-                topPlayer[play.player_id]['id'] = this.playersInfo[play.player_id].id
-                topPlayer[play.player_id]['age'] = this.playersInfo[play.player_id].age
-                topPlayer[play.player_id]['team'] = this.playersInfo[play.player_id].team
-                topPlayer[play.player_id]['teamname'] = this.playersInfo[play.player_id].teamname
-                topPlayer[play.player_id]['teamid'] = this.playersInfo[play.player_id].teamid
-                topPlayer[play.player_id]['position'] = this.playersInfo[play.player_id].position
-                topPlayer[play.player_id]['positionId'] =
-                  this.playersInfo[play.player_id].positionId
-                topPlayer[play.player_id]['positionfull'] =
-                  this.playersInfo[play.player_id].positionfull
-                topPlayer[play.player_id]['country'] = this.playersInfo[play.player_id].country
-                topPlayer[play.player_id]['effectiveness'] =
-                  this.playersInfo[play.player_id].effectiveness
-                topPlayer[play.player_id]['minutes'] =
-                  this.playersInfo[play.player_id].minutes_played
-                topPlayer[play.player_id]['games'] = this.playersInfo[play.player_id].games_played
-                topPlayer[play.player_id]['date'] = this.playersInfo[play.player_id].date
-                topPlayer[play.player_id]['nationality'] =
-                  this.playersInfo[play.player_id].nationality
-                topPlayer[play.player_id]['player_country_flag'] =
-                  this.playersInfo[play.player_id].player_country_flag
-                topPlayer[play.player_id]['categoryName'] = this.categoryName
-              } else {
-                topPlayer[play.player_id]['id'] = play.player_id
-                topPlayer[play.player_id]['name'] = play.player_id
-                topPlayer[play.player_id]['img'] = 'SIN IMAGEN'
-                topPlayer[play.player_id]['age'] = ''
-                topPlayer[play.player_id]['teamname'] = ''
-                topPlayer[play.player_id]['team'] = ''
-                topPlayer[play.player_id]['teamid'] = 0
-                topPlayer[play.player_id]['position'] = ''
-                topPlayer[play.player_id]['positionId'] = 0
-                topPlayer[play.player_id]['positionfull'] = ''
-                topPlayer[play.player_id]['country'] = ''
-                topPlayer[play.player_id]['effectiveness'] = ''
-                topPlayer[play.player_id]['minutes'] = ''
-                topPlayer[play.player_id]['games'] = ''
-                topPlayer[play.player_id]['date'] = '00-00-0000'
-                topPlayer[play.player_id]['nationality'] = ''
-                topPlayer[play.player_id]['player_country_flag'] = ''
-                topPlayer[play.player_id]['categoryName'] = ''
-              }
-            }
-          }
-        })
-        sortTopTeam.push(...Object.values(topTeam))
-        sortTopPlayer.push(...Object.values(topPlayer))
-        sortTopTeam = this.sortAndSlice(Object.values(topTeam), 60)
-        //sortTopPlayer = this.sortAndSlice(Object.values(topPlayer), 60)
-        //sortTopPlayer.sort(this.compareObjects).reverse();
-        sortTopPlayer = sortTopPlayer.sort(this.compareObjectsMinutes).slice(0, 60)
-        sortTopPlayer = sortTopPlayer.map((player, index) => {
-          player.top = index < 9 ? '0' + (index + 1) : '' + (index + 1)
-          return player
-        })
-        sortTopTeam = sortTopTeam.map((team, index) => {
-          team.top = index < 9 ? '0' + (index + 1) : '' + (index + 1)
-          return team
-        })
-        if (this.filterTeam !== 0 && !this.isTeam) {
-          sortTopPlayerFilterTeam = sortTopPlayer.filter(
-            (player) => player.teamid === this.filterTeam,
-          )
-        }
-        this.changeStateLoading(false)
-        if (this.isTeam) {
-          return this.formatArrayPaginate(sortTopTeam)
-        } else {
-          if (this.filterTeam != 0) {
-            return this.formatArrayPaginate(sortTopPlayerFilterTeam)
-          } else {
-            return this.formatArrayPaginate(sortTopPlayer)
-          }
-        }
-      } else {
-        this.changeStateLoading(false)
-        return []
-      }
-    },
-  },
-  data: () => ({
-    url: 'https://8grl16o77j.execute-api.us-west-2.amazonaws.com/prod/live/tops',
-    urlPrematch:
-      'https://8grl16o77j.execute-api.us-west-2.amazonaws.com/prod/topsBySeasonAndCategory/',
-    data_headers: [
-      'team_id',
-      'player_id',
-      'playing_as',
-      'match_result',
-      'section',
-      'total',
-      'origen',
-      'destino',
-    ],
-    token:
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MCwibmFtZSI6IlVzdWFyaW8gRnJlZSIsInVzZXJuYW1lIjoiZnJlZUBnb2xzdGF0cy5jb20iLCJlbWFpbCI6ImZyZWVAZ29sc3RhdHMuY29tIiwiaWF0IjoxNjA2NzU4Nzk1LCJleHAiOjE2MzgyOTQ3OTV9.kPNmP7yDtk38cAXrUyc7OHRh6J25VFqy-XUNzbK-4YE',
-    mapPlayers: new Map(),
-    setNationalityIds: new Set(),
-    arrayAgeRange: [0, 0],
-    arePlaysEmpty: false,
-    teamInfo: {},
-    formatFilterStats: [],
-    formatStats: [],
-    playersInfo: {},
-    isloading: true,
-    statsData: {},
-    updateSlider: 0,
-    intervalIdtops: null,
-    filterEmitAux: {},
-    filtersSelect: {
-      playingAs: [],
-      matchResult: [],
-      sections: [],
-      zone: [],
-      typeZone: [],
-    },
-    filtersValues: {
-      type: 1,
-      sections: [1, 2, 3, 4, 5, 6],
-      matchResult: [1, 2, 3],
-      playingAs: [1, 2],
-      zone: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
-      typeZone: 1,
-      arrayAgeRange: [1, 60],
-      setNationalitiesIds: [],
-      setPositionsIds: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-    },
-    expand: false,
-    playerexpand: 0,
-    positions: [
-      {
-        name: 'Portero',
-        fullname: 'POR',
-      },
-      {
-        name: 'Defensa central',
-        fullname: 'DFC',
-      },
-      {
-        name: 'Lateral por izquierda',
-        fullname: 'LI',
-      },
-      {
-        name: 'Lateral por derecha',
-        fullname: 'LD',
-      },
-      {
-        name: 'Volante por izquierda',
-        fullname: 'VI',
-      },
-      {
-        name: 'Volante por derecha',
-        fullname: 'VD',
-      },
-      {
-        name: 'Volante defensivo',
-        fullname: 'VDF',
-      },
-      {
-        name: 'Volante ofensivo',
-        fullname: 'VO',
-      },
-      {
-        name: 'Delantero',
-        fullname: 'DEL',
-      },
-      {
-        name: 'Desconocida',
-        fullname: 'Desc',
-      },
-    ],
-    categories: [
-      {
-        id: 1,
-        name: 'Goles',
-      },
-      /*{
-        id: 2,
-        name: 'Pases acertados'
-      },
-      {
-        id: 3,
-        name: 'Balones recuperados en disputa'
-      },
-      {
-        id: 4,
-        name: 'Asistencias'
-      },
-      {
-        id: 5,
-        name: 'Participaciones en gol'
-      },
-      {
-        id: 6,
-        name: 'Tiros a gol'
-      },
-      {
-        id: 7,
-        name: 'Tiros a gol que llegaron a la portería'
-      },
-      {
-        id: 8
-      },
-      {
-        id: 9,
-        name: 'Cabeceos en área propia'
-      },
-      {
-        id: 10,
-        name: 'Centros'
-      },
-      {
-        id: 11,
-        name: 'Centros acertados'
-      },
-      {
-        id: 12,
-        name: '1vs1 exitosos ofensivos'
-      },
-      {
-        id: 13,
-        name: '1vs1 exitosos ofensivos que terminaron en gol'
-      },
-      {
-        id: 14,
-        name: '1vs1 defensivos exitoso'
-      },
-      {
-        id: 15,
-        name: 'Rechaces'
-      },
-      {
-        id: 16,
-        name: 'Balones ganados en área propia'
-      },
-      {
-        id: 17,
-        name: 'Balones ganados en área rival'
-      },
-      {
-        id: 18,
-        name: 'Faltas cometidas'
-      },
-      {
-        id: 19,
-        name: 'Faltas recibidas'
-      },
-      {
-        id: 20,
-        name: 'Tarjetas amarillas'
-      },
-      {
-        id: 21,
-        name: 'Tarjetas rojas'
-      },
-      {
-        id: 22,
-        name: 'Atajadas'
-      },
-      {
-        id: 23,
-        name: 'Tiros de Esquina'
-      }*/
-    ],
-  }),
-  methods: {
-    getButtonFontSize() {
-      // Ajustar el tamaño de la fuente según el ancho del componente
-      if (this.elementSize.width > 500) {
-        return '14px'
-      } else if (this.elementSize.width > 400) {
-        return '13px'
-      } else if (this.elementSize.width > 300) {
-        return '12px'
-      } else if (this.elementSize.width > 200) {
-        return '11px'
-      } else {
-        return '10px'
-      }
-    },
-    changeStateLoading(value) {
-      this.isloading = value
-    },
-    compareObjectsMinutes(obj1, obj2) {
-      if (obj1.total > obj2.total) {
-        return -1
-      } else if (obj1.total < obj2.total) {
-        return 1
-      } else {
-        // En caso de empate en 'total', desempatar por 'minutes_played'
-        if (obj1.minutes < obj2.minutes) {
-          return -1
-        } else if (obj1.minutes > obj2.minutes) {
-          return 1
-        } else {
-          return 0
-        }
-      }
-    },
-
-    sonConjuntosDistintos(set1, set2) {
-      // Convertir sets a arrays
-      const array1 = Array.from(set1)
-      const array2 = Array.from(set2)
-
-      // Verificar si los arrays son iguales
-      if (array1.length !== array2.length) {
-        return true // Distintos si tienen diferentes longitudes
-      }
-
-      for (let i = 0; i < array1.length; i++) {
-        if (!set2.has(array1[i])) {
-          return true // Distintos si un elemento no está en el otro conjunto
-        }
-      }
-
-      return false // Son iguales
-    },
-    getnameshort(namePlayerShort) {
-      var NameArrayHomeBench = namePlayerShort.split(',')
-      var lastArrayNameBench = NameArrayHomeBench[0].split(' ')
-      var ArrayNameBench = NameArrayHomeBench[1].trim().split(' ')
-      var lastNameHomeBench = ''
-      if (lastArrayNameBench.length == 2 || lastArrayNameBench.length == 1) {
-        if (lastArrayNameBench[0].length < 4) {
-          lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
-        } else {
-          lastNameHomeBench = lastArrayNameBench[0]
-        }
-      } else {
-        if (lastArrayNameBench.length == 3) {
-          lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
-        } else {
-          if (lastArrayNameBench.length == 4) {
-            lastNameHomeBench =
-              lastArrayNameBench[1] + ' ' + lastArrayNameBench[2] + ' ' + lastArrayNameBench[3]
-          }
-        }
-      }
-      var nameHomeBench =
-        ArrayNameBench[ArrayNameBench.length - 1] != ''
-          ? ArrayNameBench[ArrayNameBench.length - 1].charAt(0)
-          : ArrayNameBench[ArrayNameBench.length - 2]
-            ? ArrayNameBench[ArrayNameBench.length - 2].charAt(0)
-            : ''
-      lastNameHomeBench = lastNameHomeBench.replace(',', '')
-      return nameHomeBench + '. ' + lastNameHomeBench
-    },
-    changeCarrousel() {
-      this.expand = false
-      this.playerexpand = 0
-    },
-    compareObjects(obj1, obj2) {
-      // Compare by 'name' first
-      if (obj1.total < obj2.total) return -1
-      if (obj1.total > obj2.total) return 1
-
-      // If names are equal, compare by 'age'
-      if (obj1.name < obj2.name) return -1
-      if (obj1.name > obj2.name) return 1
-
-      // If both 'name' and 'age' are equal, return 0
-      return 0
-    },
-    sortAndSlice(array, limit) {
-      return array
-        .sort((a, b) => (a.name < b.name ? 1 : -1) && (a.total < b.total ? 1 : -1))
-        .slice(0, limit)
-    },
-    getCategoryName(category) {
-      let ret = ''
-      for (let i = 0; i < this.categories.length; i++) {
-        if (category == this.categories[i].id) ret = this.categories[i].name
-      }
-      return ret
-    },
-    translateTopCategories(topCategoryId) {
-      const translator = {
-        1: [12, 55, '35_r', '54_r'],
-        2: [2, 20],
-        3: [485, 486, 487, 488],
-        4: [10, 324],
-        5: [27, 323],
-        6: [510],
-        7: [537, 540, 544, 547],
-        8: [328],
-        9: [231, 238, 280, 287, 294, 406],
-        10: [13, 25],
-        11: [98, 101, 104, 105, 109, 112, 115, 116],
-        12: [4],
-        13: [88],
-        14: [5],
-        15: [34],
-        16: [23],
-        17: [11],
-        18: [17, 50],
-        19: [18, 49],
-        20: [14, 52],
-        21: [15, 53],
-        22: [39],
-        23: [31, 32],
-      }
-      return translator[topCategoryId] || []
-    },
-
-    getCoordinatePointPerCategory(topCategoryId) {
-      const origin = 1
-      const middleOrigin = 2
-      const destiny = 3
-      const coordinatePoints = {
-        1: middleOrigin,
-        2: destiny,
-        3: origin,
-        4: middleOrigin,
-        5: origin,
-        6: middleOrigin,
-        7: middleOrigin,
-        8: origin,
-        9: origin,
-        10: middleOrigin,
-        11: middleOrigin,
-        12: origin,
-        13: origin,
-        14: origin,
-        15: origin,
-        16: origin,
-        17: origin,
-        18: destiny,
-        19: destiny,
-        20: destiny,
-        21: destiny,
-        22: origin,
-        23: origin,
-      }
-      return coordinatePoints[topCategoryId] || 0
-    },
-
-    emitEventMedia(data, category, categoryName) {
-      let matchResult = this.filtersValues.matchResult
-      let playingAs = this.filtersValues.playingAs
-      let sections = this.filtersValues.sections
-      let zone = this.filtersValues.zone
-      let categoryIds = this.translateTopCategories(category)
-
-      if (Object.keys(this.filterEmitAux).length > 0) {
-        matchResult = this.filterEmitAux.matchResult
-        playingAs = this.filterEmitAux.playingAs
-        sections = this.filterEmitAux.sections
-        zone = this.filterEmitAux.zone
-      }
-      const videoPlayerSection = 1
-      const playerType = 2
-      const teamType = 3
-      const playListType = this.isTeam ? teamType : playerType
-      const topLeaderId = data.player_id //for team id or player id
-      let playerIds = []
-      let teamId = this.isTeam ? data.id : this.filterTeam
-
-      if (topLeaderId) {
-        if (this.isTeam) {
-          teamId = topLeaderId
-        } else {
-          playerIds = [topLeaderId]
-        }
-      } else if (this.isTeam) {
-        teamId = data.id
-      } else {
-        playerIds = [data.id]
-      }
-      const jsonConfig = {
-        auxwidget:
-          this.canPlayVideos ||
-          (this.game.awayTeam.team_id == this.teamWidget && this.typeData != 1)
-            ? true
-            : false,
-        seasonId: this.game.is_live == 1 ? this.season : this.game.regularSeasonId,
-        isFeaturedPlayers: false,
-        mainSectionType: videoPlayerSection,
-        playListType: playListType,
-        gameIds: null,
-        playerIds: playerIds,
-        goalkeeperIds: [],
-        categoryIds: this.translateTopCategories(category),
-        teamId: teamId || 0,
-        matchResult: matchResult,
-        categorySingleName: '',
-        isRivalSubject: false,
-        avoidCategorySingleName: false,
-        currentPlayIndex: 0,
-        playData: null,
-        lastClashedGameId: null,
-        tournamentsLastClashes: null,
-        advancedFilter: {
-          playListTitle: categoryName,
-          playingAs: playingAs,
-          timeSections: sections,
-          fieldSections: zone,
-          coordinatePoint: this.getCoordinatePointPerCategory(category),
-        },
-      }
-      this.$emit('setopenmedia', jsonConfig)
-    },
-
-    emitEventMediaFullTable(data, category, categoryName) {
-      let matchResult = this.filtersValues.matchResult
-      let playingAs = this.filtersValues.playingAs
-      let sections = this.filtersValues.sections
-      let zone = this.filtersValues.zone
-      let categoryIds = this.translateTopCategories(category)
-
-      if (Object.keys(this.filterEmitAux).length > 0) {
-        matchResult = this.filterEmitAux.matchResult
-        playingAs = this.filterEmitAux.playingAs
-        sections = this.filterEmitAux.sections
-        zone = this.filterEmitAux.zone
-      }
-      const videoPlayerSection = 1
-      const playerType = 2
-      const teamType = 3
-      const playListType = this.isTeam ? teamType : playerType
-      let playerIds = []
-      let teamId = this.isTeam ? data.id : this.filterTeam
-      if (this.isTeam) {
-        teamId = data.id
-      } else {
-        playerIds = [data.id]
-      }
-
-      const jsonConfig = {
-        seasonId: this.season,
-        isFeaturedPlayers: false,
-        mainSectionType: videoPlayerSection,
-        playListType: playListType,
-        gameIds: null,
-        playerIds: playerIds,
-        goalkeeperIds: [],
-        categoryIds,
-        teamId: teamId || 0,
-        matchResult: matchResult,
-        categorySingleName: '',
-        isRivalSubject: false,
-        avoidCategorySingleName: false,
-        currentPlayIndex: 0,
-        playData: null,
-        lastClashedGameId: null,
-        tournamentsLastClashes: null,
-        advancedFilter: {
-          playListTitle: categoryName,
-          playingAs: playingAs,
-          timeSections: sections,
-          fieldSections: zone,
-          coordinatePoint: this.getCoordinatePointPerCategory(category),
-        },
-      }
-      this.$emit('setopenmedia', jsonConfig)
-    },
-
-    replaceImgPlayer(img) {
-      const imgNew = img.replace(
-        'https://golstatsimages.blob.core.windows.net/players-profile/',
-        'https://golstatsimages.blob.core.windows.net/players-profile-no-bg/',
-      )
-      return imgNew
-    },
-    abrevName(name) {
-      var NameArrayHome = name.split(',')
-      var lastArrayName = NameArrayHome[0].split(' ')
-      var ArrayName = NameArrayHome[1].trim().split(' ')
-      var lastNameHome = ''
-      if (lastArrayName.length == 2 || lastArrayName.length == 1) {
-        if (lastArrayName[0].length < 4) {
-          lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
-        } else {
-          lastNameHome = lastArrayName[0]
-        }
-      } else {
-        if (lastArrayName.length == 3) {
-          lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
-        } else {
-          if (lastArrayName.length == 4) {
-            lastNameHome = lastArrayName[1] + ' ' + lastArrayName[2] + ' ' + lastArrayName[3]
-          }
-        }
-      }
-      var nameHome =
-        ArrayName[ArrayName.length - 1] != ''
-          ? ArrayName[ArrayName.length - 1].charAt(0)
-          : ArrayName[ArrayName.length - 2]
-            ? ArrayName[ArrayName.length - 2].charAt(0)
-            : ''
-      lastNameHome = lastNameHome.replace(',', '')
-      var abrevNamePlayerHome = nameHome + '. ' + lastNameHome
-      return abrevNamePlayerHome
-    },
-    clickMore(category) {
-      this.$emit('more', { category: category, categoryName: this.categoryName })
-    },
-    morestats() {
-      this.$emit('more', this.category)
-    },
-    viewprofile(id, teamId) {
-      this.$emit('clickprofile', { id, teamId, isTeam: this.isTeam })
-    },
-    clickexpand(expandobject) {
-      this.expand = expandobject.expand
-      this.playerexpand = expandobject.id
-    },
-    async getCategoryStats(season) {
-      console.log('llego aqui; ', season)
-      this.mapPlayers = new Map()
-      try {
-        if (!season) return
-        let catPlays = []
-        let teamData = {}
-        let playersData = {}
-        let seasonGet = this.season
-        if (this.seasonSelected?.related_seasons?.some((s) => s.id === this.season)) {
-          seasonGet = this.seasonSelected.id
-        }
-        this.arePlaysEmpty = false
-        const axiosInstance = axios.create({
-          headers: {
-            Authorization: `${this.token}`,
-          },
-        })
-        this.isloading = true
-        let data = {}
-        console.log('this.typeData:::: ', this.typeData)
-
-        console.log('this.game, ', this.game)
-        if (this.game.game_status === 1) {
-          data = await axiosInstance.get(this.url + '/' + this.gameId + '/' + this.category)
-        } else {
-          data = await axiosInstance.get(
-            this.urlPrematch +
-              seasonGet +
-              '/' +
-              this.category +
-              '?t=' +
-              this.game.home_team +
-              '&t=' +
-              this.game.visiting_team,
-          )
-        }
-        if (data && data.data && data.data.data && data.data.data.length > 0) {
-          catPlays = data.data.data.map((play) => {
-            return this.formatStatsData(play)
-          })
-          data.data.teams.forEach((data) => {
-            teamData[data[0]] = {}
-            teamData[data[0]]['id'] = data[0]
-            teamData[data[0]]['name'] = data[1]
-            teamData[data[0]]['abrv'] = data[2]
-            teamData[data[0]]['img'] = data[3]
-            teamData[data[0]]['effectiveness'] = data[4]
-            teamData[data[0]]['games_played'] = data[5]
-            teamData[data[0]]['games_played_lastseason'] = data[6]
-            teamData[data[0]]['positiontable'] = data[7]
-            teamData[data[0]]['goals'] = data[8]
-            teamData[data[0]]['goalsrecived'] = data[9]
-            teamData[data[0]]['xg'] = data[10]
-            teamData[data[0]]['frecuency'] = data[11]
-            teamData[data[0]]['game_avg'] = data[12]
-            teamData[data[0]]['game_avg_last_season'] = data[13]
-          })
-          const setNationalityIds = new Set()
-          data.data.players.forEach((data) => {
-            const objectPlayer = this.getObjectPlayer(data)
-            this.mapPlayers.set(objectPlayer.numberId, objectPlayer)
-            const numberPlayerAge = objectPlayer.numberAge
-            const team = objectPlayer.teamName.length > 0 ? objectPlayer.teamName[0].acronym : ''
-            const teamname =
-              objectPlayer.teamName.length > 0
-                ? teamData[objectPlayer.teamName[0].team_id].name
-                : ''
-            const team_id = objectPlayer.teamName.length > 0 ? objectPlayer.teamName[0].team_id : ''
-            const positionname = this.positions[objectPlayer.numberPositionId - 1].fullname
-            const positionnamefull = this.positions[objectPlayer.numberPositionId - 1].name
-            const country =
-              objectPlayer.countryId.length > 0 ? objectPlayer.countryId[0].nationality_id : ''
-            const effectiveness = objectPlayer.effectiveness
-            const minutes = objectPlayer.min
-            const games_played = objectPlayer.games
-            const dateOfBirth = objectPlayer.date
-            objectPlayer.arrayNationalities.forEach((objectNationality) => {
-              setNationalityIds.add(objectNationality.numberId)
-            })
-            playersData[data[0]] = {
-              id: data[0],
-              name: data[1],
-              img: data[2],
-              age: numberPlayerAge,
-              team: team,
-              teamname: teamname,
-              teamid: team_id,
-              position: positionname,
-              positionfull: positionnamefull,
-              effectiveness: effectiveness,
-              country: country,
-              games_played: games_played,
-              minutes_played: minutes,
-              date: dateOfBirth,
-              nationality: objectPlayer.stringNationalityName,
-              player_country_flag: objectPlayer.player_country_flag,
-              positionId: objectPlayer.numberPositionId,
-            }
-          })
-          this.setNationalityIds = setNationalityIds
-          this.arrayAgeRange = [data.data.min_age, data.data.max_age]
-        } else {
-          this.arePlaysEmpty = true
-        }
-        this.teamInfo = teamData
-        this.playersInfo = playersData
-        this.formatStats = catPlays
-        this.formatFilterStats = this.filterRecords(this.filtersSelect)
-        this.statsData = data
-      } catch (e) {
-        return Promise.reject(e)
-      }
-    },
-    filterRecords(filtersEmit) {
-      if (this.formatStats.length > 0) {
-        return this.formatStats.filter((play) => {
-          const playingAs = filtersEmit.playingAs.includes(play.playing_as)
-          const matchResult = filtersEmit.matchResult.includes(play.match_result)
-          const matchLapse = filtersEmit.sections.includes(play.section)
-          const matchZone =
-            (filtersEmit.typeZone === 1 && filtersEmit.zone.includes(play.origen)) ||
-            (filtersEmit.typeZone === 2 && filtersEmit.zone.includes(play.destino))
-          if (
-            filtersEmit.setPositionsIds &&
-            filtersEmit.setNationalitiesIds &&
-            filtersEmit.arrayAgeRange &&
-            filtersEmit.setYear &&
-            !this.isTeam
-          ) {
-            const objectPlayer = this.mapPlayers.get(play.player_id)
-            if (!objectPlayer) {
-              return false
-            }
-            if (filtersEmit.booleanAreNationalTeamsVisible) {
-              // national team validation
-              if (filtersEmit.setAvailableNationalTeamsPlayersIds.size > 0) {
-                if (!filtersEmit.setAvailableNationalTeamsPlayersIds.has(play.player_id)) {
-                  return false
-                }
-              }
-            } else {
-              // nationality validation
-              let booleanHasNationality = false
-              for (const numberNationalityId of objectPlayer.arrayNationalitiesIds) {
-                if (filtersEmit.setNationalitiesIds.has(numberNationalityId)) {
-                  booleanHasNationality = true
-                  break
-                }
-              }
-              if (!booleanHasNationality) {
-                return false
-              }
-            }
-            if (
-              objectPlayer.numberAge < filtersEmit.arrayAgeRange[0] ||
-              objectPlayer.numberAge > filtersEmit.arrayAgeRange[1]
-            ) {
-              return false
-            }
-            if (objectPlayer.date < filtersEmit.setYear) {
-              return false
-            }
-            if (!filtersEmit.setPositionsIds.includes(objectPlayer.numberPositionId)) {
-              return false
-            }
-          }
-
-          //this.isloading = true
-          return (
-            (filtersEmit.playingAs.length === 0 || playingAs) &&
-            (filtersEmit.matchResult.length === 0 || matchResult) &&
-            (filtersEmit.sections.length === 0 || matchLapse) &&
-            (filtersEmit.zone.length === 0 || matchZone)
-          )
-        })
-      } else {
-        return []
-      }
-    },
-    updateSliderF() {
-      this.updateSlider += 1
-    },
-    formatStatsData(play) {
-      const formattedPlay = {}
-
-      // Switch values for play[2]
-      if (play[1] === 0 && (play[2] === 1 || play[2] === 2)) {
-        play[2] = 3 - play[2]
-      }
-
-      // Switch values for play[3]
-      if (play[1] === 0 && (play[3] === 1 || play[3] === 2)) {
-        play[3] = 3 - play[3]
-      }
-
-      this.data_headers.forEach((header, index) => {
-        formattedPlay[header] = play[index]
-      })
-
-      return formattedPlay
-    },
-    getObjectPlayer(arrayPlayerData) {
-      const arrayNationalitiesIds = []
-      const arrayNationalities = arrayPlayerData[7].map((objectNationality) => {
-        arrayNationalitiesIds.push(objectNationality.nationality_id)
-        return {
-          stringName: objectNationality.nationality,
-          numberId: objectNationality.nationality_id,
-        }
-      })
-      const arrayPlayerDateOfBirth = arrayPlayerData[9].split('-')
-      return {
-        numberId: arrayPlayerData[0] !== undefined ? arrayPlayerData[0] : '',
-        stringFullName: arrayPlayerData[1] !== undefined ? arrayPlayerData[1] : '',
-        stringImageUrl: arrayPlayerData[2] !== undefined ? arrayPlayerData[2] : '',
-        numberTeamId: arrayPlayerData[3] !== undefined ? arrayPlayerData[3] : '',
-        player_country_flag:
-          'https://golstatsimages.blob.core.windows.net/flags/' + arrayPlayerData[3] + '.jpg',
-        stringNationalityName: nationalitiesCatalog[arrayPlayerData[3]],
-        numberAge: arrayPlayerData[5] !== undefined ? arrayPlayerData[5] : '',
-        numberPositionId: arrayPlayerData[6] !== undefined ? arrayPlayerData[6] : '',
-        countryId: arrayPlayerData[7] !== undefined ? arrayPlayerData[7] : '',
-        teamName: arrayPlayerData[10] !== undefined ? arrayPlayerData[10] : '',
-        effectiveness: arrayPlayerData[11] !== undefined ? arrayPlayerData[11] : '',
-        min: arrayPlayerData[13] !== undefined ? arrayPlayerData[13] : '',
-        games: arrayPlayerData[12] !== undefined ? arrayPlayerData[12] : '',
-        date: arrayPlayerDateOfBirth.length > 0 ? Number(arrayPlayerDateOfBirth[0]) : 0,
-        arrayNationalities,
-        category: this.categoryName,
-        arrayNationalitiesIds,
-      }
-    },
-    formatArrayPaginate(arrayData) {
-      // Solo mostrar la primera página
-      return [arrayData.slice(0, this.numRows)]
-    },
-    createIntervalTops() {
-      this.intervalIdtops = setInterval(async () => {
-        await this.getCategoryStats(this.season)
-      }, this.timeLiveComparativeAvanced) //300000
-    },
-    clearTopsInterval() {
-      if (this.intervalIdtops) {
-        clearInterval(this.intervalIdtops)
-        this.intervalIdtops = null
-      }
-    },
-  },
-  beforeUnmount() {
-    this.clearTopsInterval()
-  },
-}
-</script>
-<style lang="scss" scoped>
-@import '/css/fonts.css';
-.overlay-loading-top {
-  position: absolute; /* Sit on top of the page content */
-  display: flex; /* Hidden by default */
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%; /* Full width (cover the whole page) */
-  height: 100%; /* Full height (cover the whole page) */
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
-
-  &__spinner {
-    height: 70px;
-    -webkit-animation: spin 2s linear infinite; /* Safari */
-    animation: spin 2s linear infinite;
-
-    & > img {
-      height: 70px;
-      object-fit: contain;
-    }
-  }
-
-  &__text {
-    font-size: 1.4rem;
-    margin-top: 0.8em;
-    color: white;
-    font-family: 'Poppins-Regular';
-  }
-}
-.groupsLeague {
-  position: relative;
-  line-height: 20px;
-  font-weight: 500;
-  font-family: 'Poppins-Regular';
-  font-size: 12px;
-  color: '#FFFFFF';
-  max-width: 182px;
-  line-height: 14px;
-  text-align: left;
-}
-
-@media screen and (max-width: 1125px) {
-  .groupsLeague {
-    max-width: 150px;
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .groupsLeague {
-    max-width: 160px;
-  }
-}
-@media screen and (max-width: 380px) {
-  .groupsLeague {
-    font-size: 11px;
-    max-width: 140px;
-  }
-}
-.text {
-  display: flex;
-  flex-direction: row;
-  padding: 0px 16px;
-  align-items: center;
-  justify-content: center;
-}
-.btnViewFullList {
-  margin: 0 !important;
-
-  position: absolute;
-  right: 8px;
-  width: fit-content;
-  border-bottom: 1px solid rgb(203, 238, 107);
-
-  padding: 0px 0px 2px;
-  align-items: center;
-  justify-content: flex-end;
-  text-align: center;
-  font-size: 11px;
-  font-family: Montserrat-SemiBold;
-  height: 33px;
-  display: flex;
-  align-items: flex-end;
-  color: white;
-}
-
-.hidden {
-  display: none;
-}
-.gsc-top {
-  width: 100%;
-  max-width: 100%;
-  position: relative;
-  height: auto;
-  min-height: 460px;
-  margin: 0;
-  padding-bottom: 30px;
-  border-radius: v-bind(borderRadius);
-  border-style: solid;
-  border-width: v-bind(borderWidth);
-  border-color: v-bind(borderColor);
-  box-sizing: border-box;
-}
-
-.gsc-top-full {
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-  background: rgb(13, 29, 41);
-  margin-top: 20px;
-  box-sizing: border-box;
-}
-
-.row-table-carrousel {
-  width: 100%;
-  height: auto;
-  /*  min-height: 480px; */
-  display: inline-block;
-  margin-top: 45px;
-}
-.container-no-search-result {
-  width: 100%;
-  height: 480px;
-  margin-top: 5px;
-  border: 1px solid rgba(149, 149, 149, 0.4);
-  position: relative;
-}
-.container-no-search-result-subtitle {
-  font-family: 'Poppins-Regular';
-  font-size: 14px;
-  color: rgb(172, 172, 172);
-  text-align: center;
-  line-height: 18px;
-  margin-top: 10px;
-}
-.container-no-search-result-title {
-  font-family: 'Poppins-SemiBold';
-  font-size: 17px;
-  color: rgb(225, 225, 225);
-  text-align: center;
-  margin-top: 170px;
-}
-</style>
+<template>
+  <div :class="type == 0 ? 'gsc-top' : 'gsc-top-full'">
+    <div ref="myDivRef">
+      <template v-if="type == 0">
+        <template v-if="topData.length > 0">
+          <!-- Título de la categoría con línea verde -->
+          <div class="btnViewFullList">
+            <div class="text">{{ categoryName }}</div>
+          </div>
+          <div class="row-table-carrousel">
+            <template v-for="(player, index) in topData[0]" :key="index">
+              <template v-if="player.top == 1">
+                <GSCLeaders
+                  @mediadata="emitEventMedia($event, category, categoryName)"
+                  :type="typeTable"
+                  :type-data="typeData"
+                  :game="game"
+                  :arrow="arrow"
+                  :team-widget="teamWidget"
+                  :can-play-videos="canPlayVideos"
+                  :is-expanded="playerexpand == player.id && expand"
+                  ref="GSCLeaders"
+                  :data="
+                    typeTable == 0
+                      ? {
+                          top: '01',
+                          photo: player.img,
+                          logo:
+                            player.img && player.img.includes('player-shadow')
+                              ? 'https://golstatsimages.blob.core.windows.net/images-library/logo-team@2x.png'
+                              : 'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                                player.teamid +
+                                '.png',
+                          name: player.name,
+                          player_short: player.name_short,
+                          player_id: player.id,
+                          categoryId: category,
+                          total: player.total,
+                        }
+                      : {
+                          top: '01',
+                          logo: player.img,
+                          total: player.total,
+                          name_team: player.name,
+                          player_id: player.id,
+                        }
+                  "
+                  :category-name="categoryName"
+                  :buttonMaxWidth="
+                    typeTable != 0
+                      ? elementSize.width > 360
+                        ? '210px'
+                        : '130px'
+                      : elementSize.width > 360
+                        ? '180px'
+                        : '110px'
+                  "
+                  :buttonFontSize="getButtonFontSize()"
+                  iconSize="11px"
+                  @expand="clickexpand"
+                  @more="morestats"
+                />
+              </template>
+              <template v-else>
+                <GSCRowTable
+                  :type-data="typeData"
+                  :team-widget="teamWidget"
+                  :game="game"
+                  :type="typeTable"
+                  :type-view="type"
+                  :arrow="arrow"
+                  :is-expanded="playerexpand == player.id && expand"
+                  @mediadata="emitEventMedia($event, category, categoryName)"
+                  :data="
+                    typeTable == 0
+                      ? {
+                          position: player.top,
+                          player_name: player.name,
+                          player_short: player.name_short,
+                          player_photo: player.img,
+                          total: player.total,
+                          id: player.id,
+                          player_age: player.age,
+                          team_abrev: player.team,
+                          team_logo:
+                            player.img && player.img.includes('player-shadow')
+                              ? 'https://golstatsimages.blob.core.windows.net/images-library/logo-team@2x.png'
+                              : 'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                                player.teamid +
+                                '.png',
+                          player_position: player.position,
+                          player_country_flag:
+                            'https://golstatsimages.blob.core.windows.net/flags/' +
+                            player.country +
+                            '.jpg',
+                          player_games: player.minutes,
+                          player_min: player.games,
+                          league_name:
+                            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Liga MX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
+                        }
+                      : {
+                          position: player.top,
+                          team_logo: player.img,
+                          team_abrev: player.name,
+                          frequency: player.frecuency,
+                          promthistournament: player.game_avg,
+                          promlasttournament: player.game_avg_last_season,
+                          teams_games: '-',
+                          category: category,
+                          total: player.total,
+                          id: player.id,
+                        }
+                  "
+                  height="71px"
+                  :can-play-videos="canPlayVideos"
+                  :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
+                  @expand="clickexpand"
+                />
+              </template>
+              <template v-if="expand && playerexpand == player.id">
+                <GSCExpandedInfo
+                  :type="typeTable"
+                  :is-live="game.is_live"
+                  :view-effectiveness="player.positionId === 1 ? false : true"
+                  :data="
+                    typeTable == 0
+                      ? {
+                          teams: player.teamname,
+                          age: player.age,
+                          dataofbirth: player.date,
+                          nationality: player.nationality,
+                          countryFlag: player.player_country_flag,
+                          position: player.position,
+                          games: player.games,
+                          min: player.minutes,
+                          goals: player.total,
+                          effectiveness: player.effectiveness,
+                          category: categoryName,
+                          id: player.id,
+                        }
+                      : {
+                          position: player.positiontable,
+                          goals: player.goals,
+                          goals_received: player.goalsrecived,
+                          games_played: player.games_played,
+                          category: categoryName,
+                          effectiveness: player.effectiveness,
+                          xg: player.xg,
+                          total: player.total,
+                          attendance: '-',
+                          id: player.id,
+                        }
+                  "
+                  @viewprofile="viewprofile($event, player.teamid)"
+                  :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
+                />
+              </template>
+            </template>
+          </div>
+        </template>
+        <template v-else>
+          <div class="container-no-search-result">
+            <template v-if="isloading">
+              <div class="overlay-loading-top">
+                <div class="overlay-loading-top__spinner">
+                  <img
+                    src="https://golstatsimages.blob.core.windows.net/images-library/balon_liga.png"
+                    alt=""
+                  />
+                </div>
+                <div class="overlay-loading-top__text">Loading...</div>
+              </div>
+            </template>
+            <template v-else>
+              <div class="container-no-search-result-title">No existen resultados</div>
+              <div class="container-no-search-result-subtitle">
+                No existen resultados para este tipo de<br />
+                jugada, considerando el torneo y otros<br />
+                filtros que has seleccionado.
+              </div>
+            </template>
+          </div>
+        </template>
+      </template>
+      <template v-else>
+        <GSCTableHeader background="#183143" :type="typeTable" />
+        <template v-for="(page, index2) in topData" :key="index2">
+          <template v-for="(player, index) in page.slice(0, numRows)" :key="index">
+            <GSCRowTable
+              :type-data="typeData"
+              :team-widget="teamWidget"
+              :game="game"
+              :arrow="arrow"
+              :type="typeTable"
+              :type-view="type"
+              :can-play-videos="canPlayVideos"
+              :is-expanded="playerexpand == player.id && expand"
+              @mediadata="emitEventMediaFullTable($event, category, categoryName)"
+              :data="
+                typeTable == 0
+                  ? {
+                      position: player.top,
+                      player_name: player.name,
+                      player_short: player.name_short,
+                      player_photo: player.img,
+                      total: player.total,
+                      id: player.id,
+                      player_age: player.age,
+                      team_abrev: player.team,
+                      team_logo:
+                        'https://golstatsimages.blob.core.windows.net/teams-80/' +
+                        player.teamid +
+                        '.png',
+                      player_position: player.position,
+                      player_country_flag:
+                        'https://golstatsimages.blob.core.windows.net/flags/' +
+                        player.country +
+                        '.jpg',
+                      player_games: player.games,
+                      player_min: player.minutes,
+                      league_name:
+                        '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Liga MX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
+                    }
+                  : {
+                      position: player.positiontable,
+                      team_logo: player.img,
+                      team_abrev: player.name,
+                      frequency: player.frecuency,
+                      promthistournament: player.game_avg,
+                      promlasttournament: player.game_avg_last_season,
+                      category: category,
+                      team_games: player.games_played,
+                      total: player.total,
+                      id: player.id,
+                    }
+              "
+              height="71px"
+              :background="((index2 + 1) * 5 + index) % 2 === 0 ? backgroundOdd : backgroundEven"
+              @expand="clickexpand"
+            />
+            <template v-if="expand && playerexpand == player.id">
+              <GSCExpandedInfo
+                :type="typeTable"
+                :is-live="game.is_live"
+                :additionalClass="'fullTable'"
+                :view-effectiveness="player.positionId === 1 ? false : true"
+                :data="
+                  typeTable == 0
+                    ? {
+                        teams: player.teamname,
+                        age: player.age,
+                        dataofbirth: player.date,
+                        nationality: player.nationality,
+                        countryFlag: player.player_country_flag,
+                        position: player.positionfull,
+                        positionfull: player.positionfull,
+                        games: player.games,
+                        min: player.minutes,
+                        goals: player.total,
+                        effectiveness: player.effectiveness,
+                        category: getCategoryName(category),
+                        id: player.id,
+                      }
+                    : {
+                        position: player.positiontable,
+                        goals: player.goals,
+                        goals_received: player.goalsrecived,
+                        games_played: player.games_played,
+                        category: categoryName,
+                        effectiveness: player.effectiveness,
+                        xg: player.xg,
+                        total: player.total,
+                        category: getCategoryName(category),
+                        attendance: '-',
+                        id: player.id,
+                      }
+                "
+                @viewprofile="viewprofile($event, player.teamid)"
+                :background="index % 2 === 0 ? backgroundEven : backgroundOdd"
+              />
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { ref } from 'vue'
+import useElementSize from './useElementSize'
+import GSCLeaders from './gsc-header-tops.vue'
+import GSCRowTable from './gsc-row.vue'
+import GSCTableHeader from './gsc-head-titles.vue'
+import GSCExpandedInfo from './gsc-expanded-info-player.vue'
+
+import nationalitiesCatalog from '@/components/comparative/nationalities-catalog.js'
+
+export default {
+  components: {
+    GSCLeaders,
+    GSCRowTable,
+    GSCTableHeader,
+    GSCExpandedInfo,
+  },
+  props: {
+    isTeam: {
+      type: Boolean,
+      default: false,
+    },
+    typeTable: {
+      type: Number,
+      default: 0,
+    },
+    carrousel: {
+      type: Boolean,
+      default: false,
+    },
+    arrow: {
+      type: Boolean,
+      default: false,
+    },
+    typeData: {
+      type: Number,
+      default: 0,
+    },
+    gameId: {
+      type: Number,
+      default: 0,
+    },
+    filtersProp: {
+      type: [Object, String],
+      default: () => {},
+    },
+    game: {
+      type: Object,
+      default: () => ({}),
+    },
+    isWidget: {
+      type: Boolean,
+      default: false,
+    },
+    teamWidget: {
+      type: Number,
+      default: 0,
+    },
+    canPlayVideos: {
+      type: Boolean,
+      default: false,
+    },
+    filterTeam: {
+      type: Number,
+      default: 0,
+    },
+    timeLiveComparativeAvanced: {
+      type: Number,
+      default: 60000,
+    },
+    category: {
+      type: Number,
+      default: 1,
+    },
+    categoryName: {
+      type: String,
+      default: 'Goles',
+    },
+    seasonSelected: {
+      type: Object,
+      default: () => ({}),
+    },
+    season: {
+      type: Number,
+      default: 1772,
+    },
+    type: {
+      type: Number,
+      default: 0,
+    },
+    borderRadius: { type: String, default: '8px' },
+    borderWidth: { type: [String, Number], default: '2px' },
+    borderColor: { type: String, default: '#cfcfcf' },
+    backgroundOdd: { type: String, default: '#172531' },
+    backgroundEven: { type: String, default: '#0d1d29' },
+    numRows: { type: Number, default: 5 },
+    dummyData: {
+      type: Array,
+      default: null,
+    },
+  },
+  setup() {
+    const myDivRef = ref('myDivRef')
+    const { elementSize } = useElementSize(myDivRef)
+    return {
+      myDivRef,
+      elementSize,
+    }
+  },
+  watch: {
+    game: {
+      immediate: true,
+      deep: true,
+      async handler(newValue) {
+        if (!newValue) return
+        this.playersInfo = {}
+        this.teamInfo = {}
+        this.isloading = true
+        this.formatFilterStats = []
+        await this.getCategoryStats(this.season)
+        if (this.game.is_live) {
+          this.createIntervalTops()
+          this.$emit('intervalidtops', this.intervalIdtops)
+        }
+      },
+    },
+    typeData: {
+      immediate: true,
+      async handler(newValue) {
+        await this.getCategoryStats(this.season)
+        if (newValue === 1 && this.game.is_live) {
+          this.createIntervalTops()
+          this.$emit('intervalidtops', this.intervalIdtops)
+        } else {
+          clearInterval(this.intervalIdtops)
+        }
+      },
+    },
+    filtersProp: {
+      immediate: false,
+      deep: true,
+      async handler(newValue, oldValue) {
+        if (!newValue) return
+        if (
+          JSON.stringify(newValue) !== JSON.stringify(oldValue) ||
+          this.sonConjuntosDistintos(newValue.setNationalitiesIds, oldValue.setNationalitiesIds)
+        ) {
+          this.isloading = true
+          this.filterEmitAux = newValue
+          const categoryZone1 = [1, 23, 3, 4, 5, 7, 6, 9, 8, 11, 10, 12, 13, 15, 14, 17, 16, 22]
+          if (categoryZone1.includes(this.category)) {
+            this.filterEmitAux.typeZone = 1
+          } else {
+            this.filterEmitAux.typeZone = 2
+          }
+          this.formatFilterStats = await this.filterRecords(this.filterEmitAux)
+        }
+      },
+    },
+  },
+  computed: {
+    topData() {
+      // Si hay dummyData, úsala directamente
+      if (this.dummyData) {
+        return [this.dummyData]
+      }
+      this.changeStateLoading(true)
+      if (Object.entries(this.statsData).length > 0 && this.formatFilterStats.length > 0) {
+        var topTeam = {}
+        var topPlayer = {}
+        var sortTopTeam = []
+        var sortMinutes = []
+        var sortTopPlayer = []
+        var sortTopPlayerFilterTeam = []
+
+        this.formatFilterStats.map((play) => {
+          if (topTeam[play.team_id]) {
+            topTeam[play.team_id]['total'] = topTeam[play.team_id]['total'] + play.total
+          } else {
+            sortMinutes
+            topTeam[play.team_id] = {}
+            topTeam[play.team_id]['total'] = play.total
+            topTeam[play.team_id]['id'] = this.teamInfo[play.team_id].id
+            topTeam[play.team_id]['name'] = this.teamInfo[play.team_id].name.replace(' Femenil', '')
+            topTeam[play.team_id]['img'] =
+              'https://golstatsimages.blob.core.windows.net/teams-80/' + play.team_id + '.png'
+            topTeam[play.team_id]['effectiveness'] = this.teamInfo[play.team_id].effectiveness
+            topTeam[play.team_id]['frecuency'] = this.teamInfo[play.team_id].frecuency
+            topTeam[play.team_id]['game_avg'] = this.teamInfo[play.team_id].game_avg
+            topTeam[play.team_id]['game_avg_last_season'] =
+              this.teamInfo[play.team_id].game_avg_last_season
+            topTeam[play.team_id]['games_played_lastseason'] =
+              this.teamInfo[play.team_id].games_played_lastseason
+            topTeam[play.team_id]['games_played'] = this.teamInfo[play.team_id].games_played
+            topTeam[play.team_id]['positiontable'] = this.teamInfo[play.team_id].positiontable
+            topTeam[play.team_id]['goals'] = this.teamInfo[play.team_id].goals
+            topTeam[play.team_id]['goalsrecived'] = this.teamInfo[play.team_id].goalsrecived
+            topTeam[play.team_id]['xg'] = this.teamInfo[play.team_id].xg
+          }
+          if (topPlayer[play.player_id]) {
+            if (play.player_id != 0 && play.player_id != 62117) {
+              topPlayer[play.player_id]['total'] = topPlayer[play.player_id]['total'] + play.total
+            }
+          } else {
+            if (play.player_id != 0 && play.player_id != 62117) {
+              topPlayer[play.player_id] = {}
+              topPlayer[play.player_id]['total'] = play.total
+              if (play.player_id && this.playersInfo[play.player_id]) {
+                topPlayer[play.player_id]['name'] = this.playersInfo[play.player_id].name
+                topPlayer[play.player_id]['name_short'] = this.getnameshort(
+                  this.playersInfo[play.player_id].name,
+                )
+                topPlayer[play.player_id]['img'] = this.playersInfo[play.player_id].img
+                topPlayer[play.player_id]['id'] = this.playersInfo[play.player_id].id
+                topPlayer[play.player_id]['age'] = this.playersInfo[play.player_id].age
+                topPlayer[play.player_id]['team'] = this.playersInfo[play.player_id].team
+                topPlayer[play.player_id]['teamname'] = this.playersInfo[play.player_id].teamname
+                topPlayer[play.player_id]['teamid'] = this.playersInfo[play.player_id].teamid
+                topPlayer[play.player_id]['position'] = this.playersInfo[play.player_id].position
+                topPlayer[play.player_id]['positionId'] =
+                  this.playersInfo[play.player_id].positionId
+                topPlayer[play.player_id]['positionfull'] =
+                  this.playersInfo[play.player_id].positionfull
+                topPlayer[play.player_id]['country'] = this.playersInfo[play.player_id].country
+                topPlayer[play.player_id]['effectiveness'] =
+                  this.playersInfo[play.player_id].effectiveness
+                topPlayer[play.player_id]['minutes'] =
+                  this.playersInfo[play.player_id].minutes_played
+                topPlayer[play.player_id]['games'] = this.playersInfo[play.player_id].games_played
+                topPlayer[play.player_id]['date'] = this.playersInfo[play.player_id].date
+                topPlayer[play.player_id]['nationality'] =
+                  this.playersInfo[play.player_id].nationality
+                topPlayer[play.player_id]['player_country_flag'] =
+                  this.playersInfo[play.player_id].player_country_flag
+                topPlayer[play.player_id]['categoryName'] = this.categoryName
+              } else {
+                topPlayer[play.player_id]['id'] = play.player_id
+                topPlayer[play.player_id]['name'] = play.player_id
+                topPlayer[play.player_id]['img'] = 'SIN IMAGEN'
+                topPlayer[play.player_id]['age'] = ''
+                topPlayer[play.player_id]['teamname'] = ''
+                topPlayer[play.player_id]['team'] = ''
+                topPlayer[play.player_id]['teamid'] = 0
+                topPlayer[play.player_id]['position'] = ''
+                topPlayer[play.player_id]['positionId'] = 0
+                topPlayer[play.player_id]['positionfull'] = ''
+                topPlayer[play.player_id]['country'] = ''
+                topPlayer[play.player_id]['effectiveness'] = ''
+                topPlayer[play.player_id]['minutes'] = ''
+                topPlayer[play.player_id]['games'] = ''
+                topPlayer[play.player_id]['date'] = '00-00-0000'
+                topPlayer[play.player_id]['nationality'] = ''
+                topPlayer[play.player_id]['player_country_flag'] = ''
+                topPlayer[play.player_id]['categoryName'] = ''
+              }
+            }
+          }
+        })
+        sortTopTeam.push(...Object.values(topTeam))
+        sortTopPlayer.push(...Object.values(topPlayer))
+        sortTopTeam = this.sortAndSlice(Object.values(topTeam), 60)
+        //sortTopPlayer = this.sortAndSlice(Object.values(topPlayer), 60)
+        //sortTopPlayer.sort(this.compareObjects).reverse();
+        sortTopPlayer = sortTopPlayer.sort(this.compareObjectsMinutes).slice(0, 60)
+        sortTopPlayer = sortTopPlayer.map((player, index) => {
+          player.top = index < 9 ? '0' + (index + 1) : '' + (index + 1)
+          return player
+        })
+        sortTopTeam = sortTopTeam.map((team, index) => {
+          team.top = index < 9 ? '0' + (index + 1) : '' + (index + 1)
+          return team
+        })
+        if (this.filterTeam !== 0 && !this.isTeam) {
+          sortTopPlayerFilterTeam = sortTopPlayer.filter(
+            (player) => player.teamid === this.filterTeam,
+          )
+        }
+        this.changeStateLoading(false)
+        if (this.isTeam) {
+          return this.formatArrayPaginate(sortTopTeam)
+        } else {
+          if (this.filterTeam != 0) {
+            return this.formatArrayPaginate(sortTopPlayerFilterTeam)
+          } else {
+            return this.formatArrayPaginate(sortTopPlayer)
+          }
+        }
+      } else {
+        this.changeStateLoading(false)
+        return []
+      }
+    },
+  },
+  data: () => ({
+    url: 'https://8grl16o77j.execute-api.us-west-2.amazonaws.com/prod/live/tops',
+    urlPrematch:
+      'https://8grl16o77j.execute-api.us-west-2.amazonaws.com/prod/topsBySeasonAndCategory/',
+    data_headers: [
+      'team_id',
+      'player_id',
+      'playing_as',
+      'match_result',
+      'section',
+      'total',
+      'origen',
+      'destino',
+    ],
+    token:
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MCwibmFtZSI6IlVzdWFyaW8gRnJlZSIsInVzZXJuYW1lIjoiZnJlZUBnb2xzdGF0cy5jb20iLCJlbWFpbCI6ImZyZWVAZ29sc3RhdHMuY29tIiwiaWF0IjoxNjA2NzU4Nzk1LCJleHAiOjE2MzgyOTQ3OTV9.kPNmP7yDtk38cAXrUyc7OHRh6J25VFqy-XUNzbK-4YE',
+    mapPlayers: new Map(),
+    setNationalityIds: new Set(),
+    arrayAgeRange: [0, 0],
+    arePlaysEmpty: false,
+    teamInfo: {},
+    formatFilterStats: [],
+    formatStats: [],
+    playersInfo: {},
+    isloading: true,
+    statsData: {},
+    updateSlider: 0,
+    intervalIdtops: null,
+    filterEmitAux: {},
+    filtersSelect: {
+      playingAs: [],
+      matchResult: [],
+      sections: [],
+      zone: [],
+      typeZone: [],
+    },
+    filtersValues: {
+      type: 1,
+      sections: [1, 2, 3, 4, 5, 6],
+      matchResult: [1, 2, 3],
+      playingAs: [1, 2],
+      zone: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      typeZone: 1,
+      arrayAgeRange: [1, 60],
+      setNationalitiesIds: [],
+      setPositionsIds: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+    },
+    expand: false,
+    playerexpand: 0,
+    positions: [
+      {
+        name: 'Portero',
+        fullname: 'POR',
+      },
+      {
+        name: 'Defensa central',
+        fullname: 'DFC',
+      },
+      {
+        name: 'Lateral por izquierda',
+        fullname: 'LI',
+      },
+      {
+        name: 'Lateral por derecha',
+        fullname: 'LD',
+      },
+      {
+        name: 'Volante por izquierda',
+        fullname: 'VI',
+      },
+      {
+        name: 'Volante por derecha',
+        fullname: 'VD',
+      },
+      {
+        name: 'Volante defensivo',
+        fullname: 'VDF',
+      },
+      {
+        name: 'Volante ofensivo',
+        fullname: 'VO',
+      },
+      {
+        name: 'Delantero',
+        fullname: 'DEL',
+      },
+      {
+        name: 'Desconocida',
+        fullname: 'Desc',
+      },
+    ],
+    categories: [
+      {
+        id: 1,
+        name: 'Goles',
+      },
+      /*{
+        id: 2,
+        name: 'Pases acertados'
+      },
+      {
+        id: 3,
+        name: 'Balones recuperados en disputa'
+      },
+      {
+        id: 4,
+        name: 'Asistencias'
+      },
+      {
+        id: 5,
+        name: 'Participaciones en gol'
+      },
+      {
+        id: 6,
+        name: 'Tiros a gol'
+      },
+      {
+        id: 7,
+        name: 'Tiros a gol que llegaron a la portería'
+      },
+      {
+        id: 8
+      },
+      {
+        id: 9,
+        name: 'Cabeceos en área propia'
+      },
+      {
+        id: 10,
+        name: 'Centros'
+      },
+      {
+        id: 11,
+        name: 'Centros acertados'
+      },
+      {
+        id: 12,
+        name: '1vs1 exitosos ofensivos'
+      },
+      {
+        id: 13,
+        name: '1vs1 exitosos ofensivos que terminaron en gol'
+      },
+      {
+        id: 14,
+        name: '1vs1 defensivos exitoso'
+      },
+      {
+        id: 15,
+        name: 'Rechaces'
+      },
+      {
+        id: 16,
+        name: 'Balones ganados en área propia'
+      },
+      {
+        id: 17,
+        name: 'Balones ganados en área rival'
+      },
+      {
+        id: 18,
+        name: 'Faltas cometidas'
+      },
+      {
+        id: 19,
+        name: 'Faltas recibidas'
+      },
+      {
+        id: 20,
+        name: 'Tarjetas amarillas'
+      },
+      {
+        id: 21,
+        name: 'Tarjetas rojas'
+      },
+      {
+        id: 22,
+        name: 'Atajadas'
+      },
+      {
+        id: 23,
+        name: 'Tiros de Esquina'
+      }*/
+    ],
+  }),
+  methods: {
+    getButtonFontSize() {
+      // Ajustar el tamaño de la fuente según el ancho del componente
+      if (this.elementSize.width > 500) {
+        return '14px'
+      } else if (this.elementSize.width > 400) {
+        return '13px'
+      } else if (this.elementSize.width > 300) {
+        return '12px'
+      } else if (this.elementSize.width > 200) {
+        return '11px'
+      } else {
+        return '10px'
+      }
+    },
+    changeStateLoading(value) {
+      this.isloading = value
+    },
+    compareObjectsMinutes(obj1, obj2) {
+      if (obj1.total > obj2.total) {
+        return -1
+      } else if (obj1.total < obj2.total) {
+        return 1
+      } else {
+        // En caso de empate en 'total', desempatar por 'minutes_played'
+        if (obj1.minutes < obj2.minutes) {
+          return -1
+        } else if (obj1.minutes > obj2.minutes) {
+          return 1
+        } else {
+          return 0
+        }
+      }
+    },
+
+    sonConjuntosDistintos(set1, set2) {
+      // Convertir sets a arrays
+      const array1 = Array.from(set1)
+      const array2 = Array.from(set2)
+
+      // Verificar si los arrays son iguales
+      if (array1.length !== array2.length) {
+        return true // Distintos si tienen diferentes longitudes
+      }
+
+      for (let i = 0; i < array1.length; i++) {
+        if (!set2.has(array1[i])) {
+          return true // Distintos si un elemento no está en el otro conjunto
+        }
+      }
+
+      return false // Son iguales
+    },
+    getnameshort(namePlayerShort) {
+      var NameArrayHomeBench = namePlayerShort.split(',')
+      var lastArrayNameBench = NameArrayHomeBench[0].split(' ')
+      var ArrayNameBench = NameArrayHomeBench[1].trim().split(' ')
+      var lastNameHomeBench = ''
+      if (lastArrayNameBench.length == 2 || lastArrayNameBench.length == 1) {
+        if (lastArrayNameBench[0].length < 4) {
+          lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+        } else {
+          lastNameHomeBench = lastArrayNameBench[0]
+        }
+      } else {
+        if (lastArrayNameBench.length == 3) {
+          lastNameHomeBench = lastArrayNameBench[0] + ' ' + lastArrayNameBench[1]
+        } else {
+          if (lastArrayNameBench.length == 4) {
+            lastNameHomeBench =
+              lastArrayNameBench[1] + ' ' + lastArrayNameBench[2] + ' ' + lastArrayNameBench[3]
+          }
+        }
+      }
+      var nameHomeBench =
+        ArrayNameBench[ArrayNameBench.length - 1] != ''
+          ? ArrayNameBench[ArrayNameBench.length - 1].charAt(0)
+          : ArrayNameBench[ArrayNameBench.length - 2]
+            ? ArrayNameBench[ArrayNameBench.length - 2].charAt(0)
+            : ''
+      lastNameHomeBench = lastNameHomeBench.replace(',', '')
+      return nameHomeBench + '. ' + lastNameHomeBench
+    },
+    changeCarrousel() {
+      this.expand = false
+      this.playerexpand = 0
+    },
+    compareObjects(obj1, obj2) {
+      // Compare by 'name' first
+      if (obj1.total < obj2.total) return -1
+      if (obj1.total > obj2.total) return 1
+
+      // If names are equal, compare by 'age'
+      if (obj1.name < obj2.name) return -1
+      if (obj1.name > obj2.name) return 1
+
+      // If both 'name' and 'age' are equal, return 0
+      return 0
+    },
+    sortAndSlice(array, limit) {
+      return array
+        .sort((a, b) => (a.name < b.name ? 1 : -1) && (a.total < b.total ? 1 : -1))
+        .slice(0, limit)
+    },
+    getCategoryName(category) {
+      let ret = ''
+      for (let i = 0; i < this.categories.length; i++) {
+        if (category == this.categories[i].id) ret = this.categories[i].name
+      }
+      return ret
+    },
+    translateTopCategories(topCategoryId) {
+      const translator = {
+        1: [12, 55, '35_r', '54_r'],
+        2: [2, 20],
+        3: [485, 486, 487, 488],
+        4: [10, 324],
+        5: [27, 323],
+        6: [510],
+        7: [537, 540, 544, 547],
+        8: [328],
+        9: [231, 238, 280, 287, 294, 406],
+        10: [13, 25],
+        11: [98, 101, 104, 105, 109, 112, 115, 116],
+        12: [4],
+        13: [88],
+        14: [5],
+        15: [34],
+        16: [23],
+        17: [11],
+        18: [17, 50],
+        19: [18, 49],
+        20: [14, 52],
+        21: [15, 53],
+        22: [39],
+        23: [31, 32],
+      }
+      return translator[topCategoryId] || []
+    },
+
+    getCoordinatePointPerCategory(topCategoryId) {
+      const origin = 1
+      const middleOrigin = 2
+      const destiny = 3
+      const coordinatePoints = {
+        1: middleOrigin,
+        2: destiny,
+        3: origin,
+        4: middleOrigin,
+        5: origin,
+        6: middleOrigin,
+        7: middleOrigin,
+        8: origin,
+        9: origin,
+        10: middleOrigin,
+        11: middleOrigin,
+        12: origin,
+        13: origin,
+        14: origin,
+        15: origin,
+        16: origin,
+        17: origin,
+        18: destiny,
+        19: destiny,
+        20: destiny,
+        21: destiny,
+        22: origin,
+        23: origin,
+      }
+      return coordinatePoints[topCategoryId] || 0
+    },
+
+    emitEventMedia(data, category, categoryName) {
+      let matchResult = this.filtersValues.matchResult
+      let playingAs = this.filtersValues.playingAs
+      let sections = this.filtersValues.sections
+      let zone = this.filtersValues.zone
+      let categoryIds = this.translateTopCategories(category)
+
+      if (Object.keys(this.filterEmitAux).length > 0) {
+        matchResult = this.filterEmitAux.matchResult
+        playingAs = this.filterEmitAux.playingAs
+        sections = this.filterEmitAux.sections
+        zone = this.filterEmitAux.zone
+      }
+      const videoPlayerSection = 1
+      const playerType = 2
+      const teamType = 3
+      const playListType = this.isTeam ? teamType : playerType
+      const topLeaderId = data.player_id //for team id or player id
+      let playerIds = []
+      let teamId = this.isTeam ? data.id : this.filterTeam
+
+      if (topLeaderId) {
+        if (this.isTeam) {
+          teamId = topLeaderId
+        } else {
+          playerIds = [topLeaderId]
+        }
+      } else if (this.isTeam) {
+        teamId = data.id
+      } else {
+        playerIds = [data.id]
+      }
+      const jsonConfig = {
+        auxwidget:
+          this.canPlayVideos ||
+          (this.game.awayTeam.team_id == this.teamWidget && this.typeData != 1)
+            ? true
+            : false,
+        seasonId: this.game.is_live == 1 ? this.season : this.game.regularSeasonId,
+        isFeaturedPlayers: false,
+        mainSectionType: videoPlayerSection,
+        playListType: playListType,
+        gameIds: null,
+        playerIds: playerIds,
+        goalkeeperIds: [],
+        categoryIds: this.translateTopCategories(category),
+        teamId: teamId || 0,
+        matchResult: matchResult,
+        categorySingleName: '',
+        isRivalSubject: false,
+        avoidCategorySingleName: false,
+        currentPlayIndex: 0,
+        playData: null,
+        lastClashedGameId: null,
+        tournamentsLastClashes: null,
+        advancedFilter: {
+          playListTitle: categoryName,
+          playingAs: playingAs,
+          timeSections: sections,
+          fieldSections: zone,
+          coordinatePoint: this.getCoordinatePointPerCategory(category),
+        },
+      }
+      this.$emit('setopenmedia', jsonConfig)
+    },
+
+    emitEventMediaFullTable(data, category, categoryName) {
+      let matchResult = this.filtersValues.matchResult
+      let playingAs = this.filtersValues.playingAs
+      let sections = this.filtersValues.sections
+      let zone = this.filtersValues.zone
+      let categoryIds = this.translateTopCategories(category)
+
+      if (Object.keys(this.filterEmitAux).length > 0) {
+        matchResult = this.filterEmitAux.matchResult
+        playingAs = this.filterEmitAux.playingAs
+        sections = this.filterEmitAux.sections
+        zone = this.filterEmitAux.zone
+      }
+      const videoPlayerSection = 1
+      const playerType = 2
+      const teamType = 3
+      const playListType = this.isTeam ? teamType : playerType
+      let playerIds = []
+      let teamId = this.isTeam ? data.id : this.filterTeam
+      if (this.isTeam) {
+        teamId = data.id
+      } else {
+        playerIds = [data.id]
+      }
+
+      const jsonConfig = {
+        seasonId: this.season,
+        isFeaturedPlayers: false,
+        mainSectionType: videoPlayerSection,
+        playListType: playListType,
+        gameIds: null,
+        playerIds: playerIds,
+        goalkeeperIds: [],
+        categoryIds,
+        teamId: teamId || 0,
+        matchResult: matchResult,
+        categorySingleName: '',
+        isRivalSubject: false,
+        avoidCategorySingleName: false,
+        currentPlayIndex: 0,
+        playData: null,
+        lastClashedGameId: null,
+        tournamentsLastClashes: null,
+        advancedFilter: {
+          playListTitle: categoryName,
+          playingAs: playingAs,
+          timeSections: sections,
+          fieldSections: zone,
+          coordinatePoint: this.getCoordinatePointPerCategory(category),
+        },
+      }
+      this.$emit('setopenmedia', jsonConfig)
+    },
+
+    replaceImgPlayer(img) {
+      const imgNew = img.replace(
+        'https://golstatsimages.blob.core.windows.net/players-profile/',
+        'https://golstatsimages.blob.core.windows.net/players-profile-no-bg/',
+      )
+      return imgNew
+    },
+    abrevName(name) {
+      var NameArrayHome = name.split(',')
+      var lastArrayName = NameArrayHome[0].split(' ')
+      var ArrayName = NameArrayHome[1].trim().split(' ')
+      var lastNameHome = ''
+      if (lastArrayName.length == 2 || lastArrayName.length == 1) {
+        if (lastArrayName[0].length < 4) {
+          lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+        } else {
+          lastNameHome = lastArrayName[0]
+        }
+      } else {
+        if (lastArrayName.length == 3) {
+          lastNameHome = lastArrayName[0] + ' ' + lastArrayName[1]
+        } else {
+          if (lastArrayName.length == 4) {
+            lastNameHome = lastArrayName[1] + ' ' + lastArrayName[2] + ' ' + lastArrayName[3]
+          }
+        }
+      }
+      var nameHome =
+        ArrayName[ArrayName.length - 1] != ''
+          ? ArrayName[ArrayName.length - 1].charAt(0)
+          : ArrayName[ArrayName.length - 2]
+            ? ArrayName[ArrayName.length - 2].charAt(0)
+            : ''
+      lastNameHome = lastNameHome.replace(',', '')
+      var abrevNamePlayerHome = nameHome + '. ' + lastNameHome
+      return abrevNamePlayerHome
+    },
+    clickMore(category) {
+      this.$emit('more', { category: category, categoryName: this.categoryName })
+    },
+    morestats() {
+      this.$emit('more', this.category)
+    },
+    viewprofile(id, teamId) {
+      this.$emit('clickprofile', { id, teamId, isTeam: this.isTeam })
+    },
+    clickexpand(expandobject) {
+      this.expand = expandobject.expand
+      this.playerexpand = expandobject.id
+    },
+    async getCategoryStats(season) {
+      console.log('llego aqui; ', season)
+      this.mapPlayers = new Map()
+      try {
+        if (!season) return
+        let catPlays = []
+        let teamData = {}
+        let playersData = {}
+        let seasonGet = this.season
+        if (this.seasonSelected?.related_seasons?.some((s) => s.id === this.season)) {
+          seasonGet = this.seasonSelected.id
+        }
+        this.arePlaysEmpty = false
+        const axiosInstance = axios.create({
+          headers: {
+            Authorization: `${this.token}`,
+          },
+        })
+        this.isloading = true
+        let data = {}
+        console.log('this.typeData:::: ', this.typeData)
+
+        console.log('this.game, ', this.game)
+        if (this.game.game_status === 1) {
+          data = await axiosInstance.get(this.url + '/' + this.gameId + '/' + this.category)
+        } else {
+          data = await axiosInstance.get(
+            this.urlPrematch +
+              seasonGet +
+              '/' +
+              this.category +
+              '?t=' +
+              this.game.home_team +
+              '&t=' +
+              this.game.visiting_team,
+          )
+        }
+        if (data && data.data && data.data.data && data.data.data.length > 0) {
+          catPlays = data.data.data.map((play) => {
+            return this.formatStatsData(play)
+          })
+          data.data.teams.forEach((data) => {
+            teamData[data[0]] = {}
+            teamData[data[0]]['id'] = data[0]
+            teamData[data[0]]['name'] = data[1]
+            teamData[data[0]]['abrv'] = data[2]
+            teamData[data[0]]['img'] = data[3]
+            teamData[data[0]]['effectiveness'] = data[4]
+            teamData[data[0]]['games_played'] = data[5]
+            teamData[data[0]]['games_played_lastseason'] = data[6]
+            teamData[data[0]]['positiontable'] = data[7]
+            teamData[data[0]]['goals'] = data[8]
+            teamData[data[0]]['goalsrecived'] = data[9]
+            teamData[data[0]]['xg'] = data[10]
+            teamData[data[0]]['frecuency'] = data[11]
+            teamData[data[0]]['game_avg'] = data[12]
+            teamData[data[0]]['game_avg_last_season'] = data[13]
+          })
+          const setNationalityIds = new Set()
+          data.data.players.forEach((data) => {
+            const objectPlayer = this.getObjectPlayer(data)
+            this.mapPlayers.set(objectPlayer.numberId, objectPlayer)
+            const numberPlayerAge = objectPlayer.numberAge
+            const team = objectPlayer.teamName.length > 0 ? objectPlayer.teamName[0].acronym : ''
+            const teamname =
+              objectPlayer.teamName.length > 0
+                ? teamData[objectPlayer.teamName[0].team_id].name
+                : ''
+            const team_id = objectPlayer.teamName.length > 0 ? objectPlayer.teamName[0].team_id : ''
+            const positionname = this.positions[objectPlayer.numberPositionId - 1].fullname
+            const positionnamefull = this.positions[objectPlayer.numberPositionId - 1].name
+            const country =
+              objectPlayer.countryId.length > 0 ? objectPlayer.countryId[0].nationality_id : ''
+            const effectiveness = objectPlayer.effectiveness
+            const minutes = objectPlayer.min
+            const games_played = objectPlayer.games
+            const dateOfBirth = objectPlayer.date
+            objectPlayer.arrayNationalities.forEach((objectNationality) => {
+              setNationalityIds.add(objectNationality.numberId)
+            })
+            playersData[data[0]] = {
+              id: data[0],
+              name: data[1],
+              img: data[2],
+              age: numberPlayerAge,
+              team: team,
+              teamname: teamname,
+              teamid: team_id,
+              position: positionname,
+              positionfull: positionnamefull,
+              effectiveness: effectiveness,
+              country: country,
+              games_played: games_played,
+              minutes_played: minutes,
+              date: dateOfBirth,
+              nationality: objectPlayer.stringNationalityName,
+              player_country_flag: objectPlayer.player_country_flag,
+              positionId: objectPlayer.numberPositionId,
+            }
+          })
+          this.setNationalityIds = setNationalityIds
+          this.arrayAgeRange = [data.data.min_age, data.data.max_age]
+        } else {
+          this.arePlaysEmpty = true
+        }
+        this.teamInfo = teamData
+        this.playersInfo = playersData
+        this.formatStats = catPlays
+        this.formatFilterStats = this.filterRecords(this.filtersSelect)
+        this.statsData = data
+      } catch (e) {
+        return Promise.reject(e)
+      }
+    },
+    filterRecords(filtersEmit) {
+      if (this.formatStats.length > 0) {
+        return this.formatStats.filter((play) => {
+          const playingAs = filtersEmit.playingAs.includes(play.playing_as)
+          const matchResult = filtersEmit.matchResult.includes(play.match_result)
+          const matchLapse = filtersEmit.sections.includes(play.section)
+          const matchZone =
+            (filtersEmit.typeZone === 1 && filtersEmit.zone.includes(play.origen)) ||
+            (filtersEmit.typeZone === 2 && filtersEmit.zone.includes(play.destino))
+          if (
+            filtersEmit.setPositionsIds &&
+            filtersEmit.setNationalitiesIds &&
+            filtersEmit.arrayAgeRange &&
+            filtersEmit.setYear &&
+            !this.isTeam
+          ) {
+            const objectPlayer = this.mapPlayers.get(play.player_id)
+            if (!objectPlayer) {
+              return false
+            }
+            if (filtersEmit.booleanAreNationalTeamsVisible) {
+              // national team validation
+              if (filtersEmit.setAvailableNationalTeamsPlayersIds.size > 0) {
+                if (!filtersEmit.setAvailableNationalTeamsPlayersIds.has(play.player_id)) {
+                  return false
+                }
+              }
+            } else {
+              // nationality validation
+              let booleanHasNationality = false
+              for (const numberNationalityId of objectPlayer.arrayNationalitiesIds) {
+                if (filtersEmit.setNationalitiesIds.has(numberNationalityId)) {
+                  booleanHasNationality = true
+                  break
+                }
+              }
+              if (!booleanHasNationality) {
+                return false
+              }
+            }
+            if (
+              objectPlayer.numberAge < filtersEmit.arrayAgeRange[0] ||
+              objectPlayer.numberAge > filtersEmit.arrayAgeRange[1]
+            ) {
+              return false
+            }
+            if (objectPlayer.date < filtersEmit.setYear) {
+              return false
+            }
+            if (!filtersEmit.setPositionsIds.includes(objectPlayer.numberPositionId)) {
+              return false
+            }
+          }
+
+          //this.isloading = true
+          return (
+            (filtersEmit.playingAs.length === 0 || playingAs) &&
+            (filtersEmit.matchResult.length === 0 || matchResult) &&
+            (filtersEmit.sections.length === 0 || matchLapse) &&
+            (filtersEmit.zone.length === 0 || matchZone)
+          )
+        })
+      } else {
+        return []
+      }
+    },
+    updateSliderF() {
+      this.updateSlider += 1
+    },
+    formatStatsData(play) {
+      const formattedPlay = {}
+
+      // Switch values for play[2]
+      if (play[1] === 0 && (play[2] === 1 || play[2] === 2)) {
+        play[2] = 3 - play[2]
+      }
+
+      // Switch values for play[3]
+      if (play[1] === 0 && (play[3] === 1 || play[3] === 2)) {
+        play[3] = 3 - play[3]
+      }
+
+      this.data_headers.forEach((header, index) => {
+        formattedPlay[header] = play[index]
+      })
+
+      return formattedPlay
+    },
+    getObjectPlayer(arrayPlayerData) {
+      const arrayNationalitiesIds = []
+      const arrayNationalities = arrayPlayerData[7].map((objectNationality) => {
+        arrayNationalitiesIds.push(objectNationality.nationality_id)
+        return {
+          stringName: objectNationality.nationality,
+          numberId: objectNationality.nationality_id,
+        }
+      })
+      const arrayPlayerDateOfBirth = arrayPlayerData[9].split('-')
+      return {
+        numberId: arrayPlayerData[0] !== undefined ? arrayPlayerData[0] : '',
+        stringFullName: arrayPlayerData[1] !== undefined ? arrayPlayerData[1] : '',
+        stringImageUrl: arrayPlayerData[2] !== undefined ? arrayPlayerData[2] : '',
+        numberTeamId: arrayPlayerData[3] !== undefined ? arrayPlayerData[3] : '',
+        player_country_flag:
+          'https://golstatsimages.blob.core.windows.net/flags/' + arrayPlayerData[3] + '.jpg',
+        stringNationalityName: nationalitiesCatalog[arrayPlayerData[3]],
+        numberAge: arrayPlayerData[5] !== undefined ? arrayPlayerData[5] : '',
+        numberPositionId: arrayPlayerData[6] !== undefined ? arrayPlayerData[6] : '',
+        countryId: arrayPlayerData[7] !== undefined ? arrayPlayerData[7] : '',
+        teamName: arrayPlayerData[10] !== undefined ? arrayPlayerData[10] : '',
+        effectiveness: arrayPlayerData[11] !== undefined ? arrayPlayerData[11] : '',
+        min: arrayPlayerData[13] !== undefined ? arrayPlayerData[13] : '',
+        games: arrayPlayerData[12] !== undefined ? arrayPlayerData[12] : '',
+        date: arrayPlayerDateOfBirth.length > 0 ? Number(arrayPlayerDateOfBirth[0]) : 0,
+        arrayNationalities,
+        category: this.categoryName,
+        arrayNationalitiesIds,
+      }
+    },
+    formatArrayPaginate(arrayData) {
+      // Solo mostrar la primera página
+      return [arrayData.slice(0, this.numRows)]
+    },
+    createIntervalTops() {
+      this.intervalIdtops = setInterval(async () => {
+        await this.getCategoryStats(this.season)
+      }, this.timeLiveComparativeAvanced) //300000
+    },
+    clearTopsInterval() {
+      if (this.intervalIdtops) {
+        clearInterval(this.intervalIdtops)
+        this.intervalIdtops = null
+      }
+    },
+  },
+  beforeUnmount() {
+    this.clearTopsInterval()
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import '/css/fonts.css';
+.overlay-loading-top {
+  position: absolute; /* Sit on top of the page content */
+  display: flex; /* Hidden by default */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+
+  &__spinner {
+    height: 70px;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+
+    & > img {
+      height: 70px;
+      object-fit: contain;
+    }
+  }
+
+  &__text {
+    font-size: 1.4rem;
+    margin-top: 0.8em;
+    color: white;
+    font-family: 'Poppins-Regular';
+  }
+}
+.groupsLeague {
+  position: relative;
+  line-height: 20px;
+  font-weight: 500;
+  font-family: 'Poppins-Regular';
+  font-size: 12px;
+  color: '#FFFFFF';
+  max-width: 182px;
+  line-height: 14px;
+  text-align: left;
+}
+
+@media screen and (max-width: 1125px) {
+  .groupsLeague {
+    max-width: 150px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .groupsLeague {
+    max-width: 160px;
+  }
+}
+@media screen and (max-width: 380px) {
+  .groupsLeague {
+    font-size: 11px;
+    max-width: 140px;
+  }
+}
+.text {
+  display: flex;
+  flex-direction: row;
+  padding: 0px 16px;
+  align-items: center;
+  justify-content: center;
+}
+.btnViewFullList {
+  margin: 0 !important;
+
+  position: absolute;
+  right: 8px;
+  width: fit-content;
+  border-bottom: 1px solid rgb(203, 238, 107);
+
+  padding: 0px 0px 2px;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: center;
+  font-size: 11px;
+  font-family: Montserrat-SemiBold;
+  height: 33px;
+  display: flex;
+  align-items: flex-end;
+  color: white;
+}
+
+.hidden {
+  display: none;
+}
+.gsc-top {
+  width: 100%;
+  max-width: 100%;
+  position: relative;
+  height: auto;
+  min-height: 460px;
+  margin: 0;
+  padding-bottom: 30px;
+  border-radius: v-bind(borderRadius);
+  border-style: solid;
+  border-width: v-bind(borderWidth);
+  border-color: v-bind(borderColor);
+  box-sizing: border-box;
+}
+
+.gsc-top-full {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+  background: rgb(13, 29, 41);
+  margin-top: 20px;
+  box-sizing: border-box;
+}
+
+.row-table-carrousel {
+  width: 100%;
+  height: auto;
+  /*  min-height: 480px; */
+  display: inline-block;
+  margin-top: 45px;
+}
+.container-no-search-result {
+  width: 100%;
+  height: 480px;
+  margin-top: 5px;
+  border: 1px solid rgba(149, 149, 149, 0.4);
+  position: relative;
+}
+.container-no-search-result-subtitle {
+  font-family: 'Poppins-Regular';
+  font-size: 14px;
+  color: rgb(172, 172, 172);
+  text-align: center;
+  line-height: 18px;
+  margin-top: 10px;
+}
+.container-no-search-result-title {
+  font-family: 'Poppins-SemiBold';
+  font-size: 17px;
+  color: rgb(225, 225, 225);
+  text-align: center;
+  margin-top: 170px;
+}
+</style>