const template = html`
  <tbody>
    <tr v-on:click="setopen">
      <td>{{index}}</td>
      <td>{{day | weekDayName}}</td>
      <td>{{day| date}}</td>
      <td></td>
      <td></td>
      <td>{{hours}}</td>
      <td>{{amount}}</td>
    </tr>
    <tr v-for="timeLog,index in timeLogs" v-if="open">
      <td></td>
      <td>{{day | weekDayName}}</td>
      <td>{{day| date}}</td>
      <td v-if="timeLog.start_time">{{timeLog.start_time | time}}</td>
      <td v-else="">
        <!-- <newTime :time="day" :userId="userId" type="in"></newTime> -->
      </td>
      <td v-if="timeLog.end_time">{{timeLog.end_time | time}}</td>
      <td v-else="">
        <!-- <newTime :time="day" :userId="userId" type="out"></newTime> -->
      </td>
      <td>{{timeLog.hours}}</td>
      <td>{{timeLog.amount}}</td>
    </tr>
    <tr v-if="open">
      <td></td>
      <td></td>
      <td></td>
      <!-- <td><newTime :time="day" :userId="userId" type="in"></newTime></td> -->
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
`;
import apiV2 from "../../apiV2.js";
import newTime from "./newTime.js";
export default {
  props: ["day", "userId", "index"],
  data: function() {
    return {
      timeLogs: [],
      pay: 8,
      hours: 0,
      open: false,
      test: "test"
    };
  },
  components: {
    newTime
  },
  filters: {
    date(date) {
      if (!date) return;
      return moment(date).format("DD/MM/YYYY");
    },
    weekDayName(date) {
      if (!date) return;
      return moment(date).format("dddd");
    },
    time(date) {
      if (!date) return;
      return moment(date).format("HH:mm:ss");
    }
  },
  mounted() {
    this.test = this.day
      .clone()
      .add("days", this.index - 1)
      .format();
  },
  watch: {
    userId(val, oldVal) {
      state.sub(`hr/timeLog/${this.userId}`, (key, value) => {
        ;
      });
    },
    index(val, oldVal) {
      ;
      console.log(
        "memememememememememememememememememememememememememememememememememememe"
      );

      this.load();
    }
  },
  methods: {
    setopen() {
      this.open = !this.open;
    },
    async load() {
      //   state.sub(`hr/timeLog/${this.userId}/`, (key, value) => {
      //     ;
      //   });
      //   // const userId = 1; // this.userId;
      //   // const day = this.day.format("YYYY/MM/DD");
      //   // const key = `hr/timeLog/${userId}/${day}`;
      //   // state.sub(key, value => this.save(key, value));
      //   // const timeLogs = await apiV2.get["hr/time-log"]({
      //   //   userId,
      //   //   day
      //   // });
      //   // state.set(key, timeLogs);
      // },
      // save(key, value) {
      //   value = value.map(el => {
      //     if (!el.end_time || !el.start_time) return el;
      //     const end = moment(el.end_time);
      //     const start = moment(el.start_time);
      //     el.hours = moment.duration(end.diff(start)).asHours();
      //     el.amount = el.hours * this.pay;
      //     return el;
      //   });
      //   this.hours = value.reduce((c, el) => {
      //     if (!el.hours) return 0;
      //     return el.hours + c;
      //   }, 0);
      //   this.amount = value.reduce((c, el) => {
      //     if (!el.amount) return 0;
      //     return el.amount + c;
      //   }, 0);
      //   this.timeLogs = value;
    }
  },
  template: "<div>{{test}}</div>"
};
