<template lang="pug">
  .div
    .contest
      .contest__loader
        dot-loader(:loading="loading", :size="size", :color="color")
    hero-contest(v-show="!loading")
    section.contest(v-if="!!item && !loading")
      .contest__inner.wrapper

        h2.heading.contest__heading {{ item.nameFullRus }}

        .contest__grid
          .contest__content#contsetInfo
            .contest__head
              .contest__type-game
                .contest__name
                  .label(:style=`{ backgroundColor: '#' + item.sport.color }`, v-if="item.sport") {{ item.sport.nameRus }}
                .contest__range
                  .contest__range-item(v-for="(dist, i) in item.distances", :key="i") {{ dist.distanceType.nameRus }}
              .contest__tabs
                .tabs-component
                  ul.tabs-component-tabs
                    li.tabs-component-tab(:class="{'is-active': tabOutter === 0}")
                      a.tabs-component-tab-a(@click="changeTab(0)") О соревновании
                    li.tabs-component-tab(:class="{'is-active': tabOutter === 1}",v-if="!finished")
                      a.tabs-component-tab-a(@click="changeTab(1)") Список участников
                    li.tabs-component-tab(:class="{'is-active': tabOutter === 2}",v-if="finished")
                      a.tabs-component-tab-a(@click="changeTab(2)") Результаты
                    //-li.tabs-component-tab(:class="{'is-active': tabOutter === 3}",v-if="finished")
                      a.tabs-component-tab-a(@click="changeTab(3)") Фото
                  .tabs-component-panels
                    section.tabs-component-panel(v-show="tabOutter === 0")
                      .contest__info
                        .contest__desc
                          vue-markdown(:source="item.descriptionRus" v-if="!!item.descriptionRus")
                            //-regulations

                      .about
                        .about__inner
                          //-about-city(:city="item.city", v-if="!!item.city")
                          about-track(:distances="item.distances",:map="item.tracksMap",v-if="!!item.tracksMap")
                          about-corporate(:rus="item.corporateDescriptionRus", :eng="item.corporateDescriptionEng", v-if="!!item.corporateDescriptionRus")
                          about-timerkids(:rus="item.childrenDescriptionRus", :eng="item.childrenDescriptionEng", v-if="!!item.childrenDescriptionRus")
                          about-schedule(:schedule="item.schedulePeriods",:scheduleNew="item.schedule", v-if="!!item.schedule")
                          about-conditions(:conditions="item.participationConditionRus",:whereget="item.whereget",v-if="!!item.participationConditionRus")
                          section.about__section.about__partners#partners(v-if="!!item.partners")
                            h3.heading.about__heading.about__heading--mb_lg Партнеры
                            .partners
                              .partners__inner
                                  .partners__item
                                    vue-markdown(v-if="item.partners", :source="item.partners")
                          //- about-partners(:partners="item.partners", v-if="item.partners.length !== 0")
                    section.tabs-component-panel(v-show="tabOutter === 1")
                      .contest__info
                        .contest__desc
                          vue-markdown(:source="item.descriptionRus" v-if="!!item.descriptionRus")
                        //-regulations

                      event-participants
                    section.tabs-component-panel(v-show="tabOutter === 2",v-if="finished")
                      .contest__info
                        .contest__desc
                          vue-markdown(:source="item.descriptionRus" v-if="!!item.descriptionRus")
                        //-regulations

                      event-results
                    section.tabs-component-panel(v-show="tabOutter === 3",v-if="finished")
                      .contest__info
                        .contest__desc
                          vue-markdown(:source="item.descriptionRus" v-if="!!item.descriptionRus")
                        //-regulations
                      carousel-gallery
                      gallery

          sidebar-contest(v-if="tabOutter === 0", :item="item")
</template>

<script>
import VueMarkdown from 'vue-markdown';
import SidebarContest from "@/components/blocks/sidebarContest";
//import AboutCity from "@/components/section/about/AboutCity";
import AboutTrack from "@/components/section/about/AboutTrack";
import AboutCorporate from "@/components/section/about/AboutCorporate";
import AboutTimerkids from "@/components/section/about/AboutTimerkids";
import AboutSchedule from "@/components/section/about/AboutSchedule";
import AboutConditions from "@/components/section/about/AboutConditions";
import AboutPartners from "@/components/section/about/AboutPartners";
import HeroContest from "@/components/section/heroContest";
import EventParticipants from "@/components/section/event-participants";
import Regulations from '@/components/file_regulations';
import Search from "@/components/blocks/search";
import ParticipantsTable from "@/components/section/tables/participants";
import EventResults from "../components/section/event-results";
import Gallery from "../components/section/gallery";
import CarouselGallery from "../components/section/carouselGallery";
import Loader from '@/mixins/loader'
export default {
  name: "contests",
  mixins: [Loader],
  components: {
      EventResults,
      HeroContest,
      AboutPartners,
      AboutConditions,
      AboutSchedule,
      AboutTimerkids,
      AboutCorporate,
      AboutTrack,
      //AboutCity,
      SidebarContest,
      Regulations,
      EventParticipants,
      Search,
      Gallery,
      CarouselGallery,
      VueMarkdown,
  },
  data () {
      return {
        filter: 0,
        tabOutter: 0,
        errorFetch: false,
        loading: false,
      }
  },
  computed: {
      id() {
        return this.$route.params.id
      },
      item() {
        return this.$store.getters.event
      },
      finished () {
        return new Date() > new Date(this.item.date)
      },
  },
  watch: {
      '$route'() {
        this.handleTabOutter()
      },
  },
  created() {
      this.handleTabOutter()

      this.loading = true
      this.$store.dispatch('getEvent', this.id).then(() => {
        this.loading = false;
        this.fetchParticipants();
        this.fetchResults();
      })
      .catch((error) => {
        this.loading = false;
        this.$router.push({ name: "participant" });
      })
  },
  methods: {
      changeTab (val) {
        this.tabOutter = val
        let tabOutter = val === 0 ? 'about' : val === 1 ? 'participants' : val === 2 ? 'results' : 'photo'
        this.$router.push({ name: 'event-info', query: { tabOutter: tabOutter } })
      },
      fetchParticipants() {
        this.$store.dispatch('getParticipantOnEventGroupByDistance', this.id);
      },
      handleTabOutter() {
        let tabOutter = this.$route.query.tabOutter
        if (tabOutter === undefined) {
          tabOutter = 'about'
          this.$router.push({ name: 'event-info', query: { tabOutter: tabOutter } })
        }
        if (tabOutter === 'about')
          this.tabOutter = 0;
        if (tabOutter === 'participants')
          this.tabOutter = 1;
        if (tabOutter === 'results')
          this.tabOutter = 2;
        if (tabOutter === 'photo')
          this.tabOutter = 3;
      },
      fetchResults() {
        this.$store.dispatch('getParticipantsResultsOnEventGroupByDistance', this.id)
      }
  }
}
</script>

<style scoped>

</style>