<template lang="pug">
    section.participants.contest__table-content
        div.participants__inner
            div.participants__filters.filters
                div.btn-group.js-radio-button-group
                  button.btn.btn--filter(:class="{'is-checked': i === chosenDistance }", v-for="(distan, i) in distances", :key="i", @click="chooseDistance(i)") {{ distan.distanceType.nameRus }}
            div.participants__search
                .search
                  form.search__form
                      fieldset.search__wrap
                          legend.search__legend.screen-reader Поиск спортсменов
                          label.search__label
                              span.search__wrap-field
                                  input.search__field(type='text', v-model="search" placeholder='Введите имя, номер спортсмена или название мероприятия...')
                      .search__action
                          button.btn.btn--main.btn--size-lg.search__btn(type='button')
                              span Поиск
            div.participants__selects
                div.filters__group
                    fieldset.filters__group
                        div.filters__table-wrap
                            div.filters__amount-row
                              div.filters__amount-name Количество строк
                              div.filters__field
                                select.filters__select(name='amount-row', v-model="rows")
                                  option(:value='20') 20
                                  option(:value='30') 30
                                  option(:value='40') 40
                                  option(:value='50') 50
                                  option(:value='100') 100
            //- v-if="distances.participationTypeId == 1"
            table.table-responsive(v-if="distances != [] ? distances[chosenDistance].participationTypeId == 0 : false")
              thead
                  tr
                      th(class="sorted" @click="sortByPosition()") Позиция
                      th Фамилия Имя
                      th Стартовый номер
                      th Абсолютное время
                      th Чистое время
                      th(class="sorted" @click="sortByClear()") Место в категории
                      th(class="sorted" @click="sortByCategory()") Абс. место в категории
                      th Сертификат
              tbody
                  tr(v-for="(part, i) in props ", :key="i")
                      td(data-label='') {{part.Status}}
                      td(data-label='Фамилия Имя') {{ part.LastName }} {{ part.FirstName }}
                      td(data-label='Номер') {{ part.StartingNumber }}
                      td(data-label='') {{part.AbsTime == 'null'? '': part.AbsTime}}
                      td(data-label='') {{part.Time == 'null'? '': part.Time}}
                      td(data-label='') {{ part.CategoryPosition}}
                      td(data-label='') {{part.CategoryAbsPosition == 0 ? '' : part.CategoryAbsPosition}}

                      //-td(class="sorted" data-label='' @click="sertif(part.Sertificate)")
                        v-icon icon-diploma
                      //-td(data-label='Медиа')
                        a.table__link.isDisabled 0 Фото
                      //-td(data-label='')
                        a.table__link(:href="part.video", target="_blank", :class="{ 'isDisabled' : part.video === null }")
                          i.material-icons.table__icon video_library
                      td(data-label='')
                        a.table__link(:href="'https://media.russiarunning.com/diploma.preview?raceId='+distances[chosenDistance].raceId+'&participantId='+part.Sertificate", target="_blank", :class="{ 'isDisabled' : part.protocol === null }")
                          icon-diploma
            table.table-responsive( v-if="distances != [] ? distances[chosenDistance].participationTypeId == 0 : false")
              thead
                  tr
                      th(class="sorted"  @click="sortByAbsolute()") Абсолютное место
                      th Название команды
                      th Фамилия Имя
                      th Стартовый номер
                      th Абсолютное групповое время
                      th(class="sorted" @click="sortByCategory()") Чистое время
                      th(class="sorted" @click="sortByAbsolute()") Место в категории
              tbody
                  //-tr(v-for="(part, i) in props ", :key="i")
                      td(data-label='') {{part.Position}}
                      td(data-label='Фамилия Имя') {{ part.LastName }} {{ part.FirstName }}
                      td(data-label='Номер') {{ part.StartNumber }}
                      td(data-label='') {{part.Status == null? msToTime(part.AbsoluteTimeResult) : ''}}
                      td(data-label='') {{part.Status == null? msToTime(part.IndividualTimeResult) : ''}}
                      td(data-label="") {{part.Status == null? part.AgeNominationPosition : part.Status }}


            div.participants__pagination
                div.pagination
                    a.pagination__nav.pagination__prev(@click="prevPage")
                        arrow-left
                    .pagination__items
                      a.link.pagination__item.cursor(v-if="search == ''") {{ currentPage + 1 }}
                    a.pagination__nav.pagination__next(@click="nextPage")
                        arrow-right
</template>

<script>
import Аxios from "axios";
import ArrowLeft from "../blocks/arrow-left";
import ArrowRight from "../blocks/arrow-right";
import IconDiploma from "../blocks/icon-diploma";
//import TriathlonResults from "./tables/triathlon-results";
import ageCategories from "@/data/age-categories";
import { idFilter, filterByAgeCategory, stringFilter } from "@/filters";
export default {
  name: "event-results",
  components: {  ArrowRight, ArrowLeft, IconDiploma },//TriathlonResults,
  data() {
    return {
      poVozr: 0,
      //poVozr: false,
      chosenDistance: 0,
      rows: 20,
      sortType: "pos",
      currentPage: 0,
      chosenSportClub: 0,
      chosenCity: 0,
      chosenGender: 0,
      chosenAgeCategory: 0,
      ageCategories,
      search: "",
      props: [],
      distances: [],
      dist: []
    };
  },
  computed: {
    cities() {
      return this.$store.getters.cities;
    },
    sportClubs() {
      return this.$store.getters["part/sportClubs"];
    },
    sports() {
      return this.$store.getters["sports"];
    },
    //distances() {
    //  return this.$store.getters.event.distances.sort(this.compare);
    //},
    paginatedData(val) {
      this.props = this.getDistanceResults(val);
      return this.props;
    }
  },
  watch: {
    search() {
      if (this.search == "") {
        this.sortType = "pos";
      }
      this.currentPage = 0;
      this.getDistanceResults();
    },
    rows() {
      this.currentPage = 0;
      this.getDistanceResults();
    }
  },
  methods: {
    sertif(val){
      console.log("sdfs")
    },
    sortByClear() {
      if (this.sortType == "cat") {
        this.poVozr = this.poVozr == 1 ? 0 : 1;
        //this.poVozr = !this.poVozr;
      } else {
        this.poVozr = 0;
        //this.poVozr = false;
      }
      this.sortType = "cat";
      this.getDistanceResults();
      this.currentPage = 0;
    },
    sortByPosition() {
      if (this.sortType == "pos") {
        this.poVozr = this.poVozr == 1 ? 0 : 1;
        //this.poVozr = !this.poVozr
      } else {
        this.poVozr = 0;
        //this.poVozr = false
      }
      this.sortType = "pos";
      this.getDistanceResults();
      this.currentPage = 0;
    },
    sortByCategory() {
      if (this.sortType == "catAbs") {
        this.poVozr = this.poVozr == 1 ? 0 : 1;
        //this.poVozr = !this.poVozr
      } else {
        this.poVozr = 0;
        //this.poVozr = false
      }
      this.sortType = "catAbs";
      this.getDistanceResults();
      this.currentPage = 0;
    },
    compare(a, b) {
      return a.distanceType.nameRus > b.distanceType.nameRus ? 1 : -1;
    },
    msToTime(duration) {
      var milliseconds = parseInt((duration % 1000) / 100),
        seconds = Math.floor((duration / 1000) % 60),
        minutes = Math.floor((duration / (1000 * 60)) % 60),
        hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
    },
    chooseDistance(val) {
      this.chosenDistance = val;
      this.getDistanceResults(this.distances[val]);
    },
    nextPage() {
      if (this.props.length == this.rows) {
        this.currentPage++;
        this.getDistanceResults();
      }
    },
    prevPage() {
      if (this.currentPage === 0) return;
      this.currentPage--;
      this.getDistanceResults();
    },
    setPage(val) {
      this.currentPage = val;
    },
    setFilteredPage(val) {
      this.currentPage = val;
    },
    async getDistanceResults(val) {
      if (val == null) {
        val = this.distances[this.chosenDistance];
      }
      if (this.search != "") {
        this.sortType = "search";
      }
      let body = {
        eventId: this.$store.getters.event.id,
        distanceId: this.distances[this.chosenDistance].id,
        page: this.currentPage,
        rows: this.rows,
        sortType: this.sortType,
        isDescending: this.poVozr,
        word: this.search
      };

      Аxios
        .post("/api/v1/distances/result", body)
        .then(response => (this.props = response.data));
      //props = JSON.parse(response.data)));
    }
  },
  mounted() {
    this.distances = this.$store.getters.event.distances.sort(this.compare);
    this.getDistanceResults(this.distances[this.chosenDistance].id);
  }
};
</script>

<style scoped>
.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}
.sorted {
  cursor: pointer;
}
</style>