<template>
  <div class="setAcsessDayContainer">
    <style>
      :root {
        --columnCount: {{ columnCount}};
      }
    </style>
    <div class="setAcsessDayPageContent">
      <h1 class="primaryText">
        Таблица
      </h1>
      <MounthPicker @mounthChanged="mounthChanged" />
      <div class="dayTable">
        <SelectWorkDayComponent
          v-for="person of stuff"
          :fio="person.fio"
          :days="person.days"
          :key="person.id"
          :hkey="person.id"
          :cssClass="person.cssClass"
          @daySelected="daySelected"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { loadStuffByDepartment } from "../dataservices/stuff"; // сервис по получению информации о сотрудниках(строки в таблице)
import SelectWorkDayComponent from "../components/selectWorkDayComponent";//Компонент, представляющий собой одну строку таблицы
import MounthPicker from "../components/MounthPicker";//компонент выбора месяца, от которого изменяется количество столбцов

export default {
  transition: "layout",
  async asyncData() {
    const stuffResponse = await loadStuffByDepartment({ departmentID: "d1111" });
    return {
      stuff: stuffResponse.bodyResponse.stuff,
      days: []//количество дней-столбцов
    };
  },
  computed: {
    columnCount: function() {
      return ++this.days.length;
    }
  },
  methods: {
    mounthChanged(days) {
   //выбрали другой месяц, соответственно нужно поменять количество столбцов
      if (!this.stuff) {
        return;
      }
      this.stuff.forEach(person => {
        person.days = days;
        person.cssClass = "primaryText chip";
      });
      this.days = days;
    },
    daySelected(day) {
       //сюда приходит информация о том на каком дне "кликнули"

      const person = this.stuff.find(f => f.id === day.personID);
      if (person) {
        person.cssClass = "primaryText chip selected";
      }
    }
  },
  components: {
    SelectWorkDayComponent,
    MounthPicker
  }
};
</script>
<style scoped>
.setAcsessDayContainer {
  height: 100vh;
}
.setAcsessDayPageContent {
  width: 100%;
  text-align: center;
}
.dayTable {
  display: grid;
  grid-template-columns: repeat(var(--columnCount), 1fr);
  grid-gap: 1em;
}

.personItem {
  background: lawngreen;
  opacity: 0.6;
  height: 100px;
}
</style>

    <div>FIO</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
   ///
   <div>Последний день месяца</div>

<script>
export default {
  functional: true,
  render: function(createElement, { props, listeners }) {
    const tagArr = [];
    tagArr.push(createElement("div", { class: "primaryText" }, props.fio));
    let dayArr = [];

    if (props.days) {
      dayArr = props.days.map(f => {
        return createElement(
          "div",
          {
            class: props.cssClass,
            on: {
              click: event => {
                const emit_event = listeners.daySelected;

                emit_event({ personID: props.hkey, day: f });
              }
            }
          },
          f
        );
      });
    }
    return [...tagArr, ...dayArr];
  },

  props: {
    cssClass: { type: String },
    hkey: { type: String },
    fio: {
      type: String,
      default: "Неизвестный сотрудник"
    },
    days: {
      type: Array
    }
  }
};
</script>

<style scoped>
.chip {
  padding: 10px;
  border-radius: 25px;
  background-color: transparent;
  border: 1px solid;
  transition: transform 0.2s ease, color 0.2s ease;
}

.selected {
  background: blueviolet;
}
.chip:hover {
  border-color: #30d5c8;
}
</style>