<template>
  <div class="contest-works">
    <div class="contest-works__works">
      <div class="contest-works__column">
        <contest-work v-for="contestWork in columns[0]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
      </div>
      <div class="contest-works__column">
        <contest-work v-for="contestWork in columns[1]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
      </div>
      <div class="contest-works__column">
        <contest-work v-for="contestWork in columns[2]" :key="contestWork.id" :contest-work="contestWork"></contest-work>
      </div>
    </div>
    <div v-show="loading" class="contest-works__loader"><div class="loading-loader"></div></div>
    <div v-if="loaded && !contestWorks.length"  class="contest-works__no-works">Здесь вы сможете увидеть работы участников после их добавления</div>
  </div>
</template>

<script>
  import {api} from "../js/modules/api";
  import $ from 'jquery';
  import ContestWork from "./blocks/ContestWork.vue";

  export default {
    name: "contest-works",
    props: ['contestId', 'autoload'],
    data(){
      return {
        page: 1,
        lastPage: null,
        loading: false,
        loaded: false,
        contestWorks: [],
      };
    },
    mounted() {
      this.load();
      if(this.autoload) {
        $(window).scroll(() => {
          const pos = $(this.$el).offset().top + this.$el.clientHeight - 100;
          if($(window).scrollTop() + $(window).height() >= pos
              && !this.loading && !this.lastPage) {
            this.page += 1;
            this.load();
          }
        });
      }
    },
    computed: {
      columns() {
        const first = [];
        const second = [];
        const third = [];
        for(let i=0; i < this.contestWorks.length; i++) {
          const work = this.contestWorks[i];
          [first, second, third][i % 3].push(work);
        }
        return [first, second, third];
      }
    },
    methods: {
      load() {
        this.loading = true;
        api.get(`/api/v1/contest-works/?contest=${this.contestId}&page=${this.page}`)
          .then((response) => {
            this.loading = false;
            this.loaded = true;
            if(this.page > 1){
              this.contestWorks = this.contestWorks.concat(response.data.results);
            }
            else{
              this.contestWorks = response.data.results;
            }
          })
          .catch((response) => {
            this.loading = false;
            this.loaded = true;
            if(response.response.status == 404){
              this.lastPage = this.page;
            }
          });
      }
    },
    components: {ContestWork},
  }
</script>

<style>
    .contest-works {
      width: 100%;
    }
    .contest-works__works {
      text-align: left;
      display: flex;
    }
    .contest-works__column {
      display: flex;
      flex-direction: column;
      margin-right: 20px;
    }
    .contest-works__loader {
      width: 100%;
      height: 30px;
      position: relative;
    }
    .contest-works__no-works {
      text-align: center;
      width: 100%;
    }
</style>
