<template>
  <div>
    <table_prepod
      v-for="(value, key) in dayNames"
      :key="key"
      ref="table_prepod"
      :dayName="value"
      :dayData="daysData[key]"
      @save="onSave($event, key)"
      @remove="onRemove($event, key)"
    />
  </div>
</template>

<script>
import table_prepod from "./table_prepod";

const dayNames = {
  Monday: 'Понедельник',
  Tuesday: 'Вторник' // и т.д.
}

export default {
  components:{
  table_prepod
  },
  data() {
    return {
      dayNames,
      id_prepod: 0, fio_prepod: "", name_predmet: "", id_user: "", now_time: new Date(""),
      daysData: {
        Monday: [
          [1, "2021-02-01 08:15:00", "21-Э-95", "Проектирование баз данных", "Тема", 1, "Д.З."],
          [1, "2021-02-01 09:55:00", "11-А-96", "Проектирование баз данных", "Тема", 2, "Д.З."],
          [1, "2021-02-01 11:35:00", "13-С-94", "Проектирование баз данных", "Тема", 3, "Д.З."]
        ],
        Tuesday:[],
        Wednesday:[],
        Thursday:[],
        Friday:[]
      }
    }
  },
  methods: {
    // async
    onSave(data, dayName) {
      console.log('onSave::data', data.model)
      console.log('onSave::dayName', dayName)
      // await saving
      this.daysData[dayName] = data.model
      // then
      data.cb()
    },
    // async
    onRemove(data, dayName) {
      console.log('onDelete::data', data.rowsIndex)
      console.log('onDelete::dayName', dayName)
      // await saving
      this.daysData[dayName] = this.daysData[dayName].filter((_, i) => !data.rowsIndex.includes(i))
      // then
      data.cb()
    }
  }
}
</script>

<template>
  <div>
    <p class="p_table1">{{ dayName }}</p>
    <table cellspacing="0">
      <tr>
        <th>Время</th>
        <th>Группа</th>
        <th>Название предмета</th>
        <th>Тема</th>
        <th>Аудитория</th>
        <th>Д.З.</th>
      </tr>
      <tr v-for="(row, rowIndex) in model" :key="row[1]">
        <td
          v-for="(field, index) in row.filter((_, i) => (i !== 0))"
          :key="`${field}-${index}`"
        >
          <input
            v-model="row[index]"
            @input="onInputField(rowIndex, index, $event.target.value)"
          />
        </td>
      </tr>
    </table>

    <div v-if="changedRowsIndex.length">
      <button v-on:click="save()">Сохранить изменения</button>
      <button v-on:click="remove()">Удалить изменённые записи</button>
      <button v-on:click="back()">Отмена изменений</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dayName: {
      type: String,
      default: "",
    },
    dayData: {
      type: Array,
    },
  },

  data() {
    return {
      model: [],
      changedRowsIndex: []
    };
  },

  watch: {
    dayData: {
      immediate: true,
      deep: true,
      handler(to) {
        this.setModel();
      },
    },
  },

  methods: {
    setModel() {
      this.model = this.dayData.map((x) => x.map((y) => y));
    },
    back() {
      this.setModel();
      this.changedRowsIndex = []
    },
    onInputField(rowIndex, fieldIndex, value) {
      if (this.dayData[rowIndex][fieldIndex] !== value) {
        if (this.changedRowsIndex.indexOf(rowIndex) === -1) {
          this.changedRowsIndex.push(rowIndex)
        }
      } else {
        const isRowChanged = this.dayData[rowIndex].map((x, i) => x === this.model[rowIndex][i]).some((x) => !x)
        if (!isRowChanged) {
          this.changedRowsIndex = this.changedRowsIndex.filter((i) => i !== rowIndex)
        }
      }
    },
    clearChanges() {
      this.changedRowsIndex = []
    },
    save() {
      // если нужно - выкидываем наверх
      this.$emit("save", {
        model: this.model,
        cb: () => this.clearChanges()
      });
      // либо из этого компонента отправляем - тогда затем this.clearChanges()
    },
    remove() {
      // если нужно - выкидываем наверх
      this.$emit('remove', {
        rowsIndex: this.changedRowsIndex,
        cb: () => this.clearChanges()
      })
      // либо из этого компонента отправляем - тогда затем this.clearChanges()
    }
  },
};
</script>