<template>
  <div class="form-sort">
    <div class="container-fluid">
      <div class="row">
        <div class="" id="accordion">
          <div class="card" v-for="(listItem, j) in workList" :key="j">
            <div class="card-header" :id="'heading' + j">
              <button
                @click="getDetailsDay(listItem, j)"
                class="btn d-flex justify-content-between collapsed w-100 pr-0"
                type="button"
                data-toggle="collapse"
                :data-target="'#collapse' + j"
                :aria-controls="'collapse' + j"
              >
                <span class="card-header_titles text-1 col-3"
                  >{{ getDayOfWeekFromTimestamp(listItem.taskDate) }}
                </span>
                <span class="card-header_titles text-2 col-3">{{
                  listItem.oldDate
                }}</span>
                <span class="card-header_titles text-3 col-3">
                  {{ listItem.minuteDay }}</span
                >
                <span class="card-header_titles text-4 col-2">
                  {{ listItem.noWork }}</span
                >
                <span class="card-header_titles col-1 text-5 rotate-icon">
                  <i
                    class="card-header_titles rotate-icon tavasi tavasi-Component-25--1"
                  ></i
                ></span>
              </button>
            </div>
            <div
              :id="'collapse' + j"
              class="collapse"
              :class="{ show: 'collapse' + j == 'collapse0' }"
              :aria-labelledby="'heading' + j"
              data-parent="#accordion"
            >
              <div
                v-for="(taskItem, k) in listItem.tasks"
                :key="k"
                class="card-body d-flex justify-content-between align-items-center"
              >
                <span class="card-body_items item-1"
                  >{{ taskItem.category }}
                </span>
                <span class="card-body_items item-2">{{ taskItem.title }}</span>
                <span class="card-body_items item-3">{{
                  taskItem.duration
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import taskApi from "~/apis/taskApi";
export default {
  props: {
    workList: [],
    userId: "",
  },
  
  beforeMount() {
    this.httpService = new HttpService(
      import.meta.env.VITE_BASE_URL + taskUrl()
    );
  },
  
  computed: {
    taskUrl() {
      return import.meta.env.VITE_TASK;
    },
  },
  methods: {
    getDayOfWeekFromTimestamp(timestamp) {
      let m = timestamp * 1000;
      let d = new Date(m);

      let options = { weekday: "long" };
      let dayOfWeek = new Intl.DateTimeFormat("fa-IR", options).format(d);

      return dayOfWeek;
    },
    getDetailsDay(hourItem) {
      this.hoursForms = [];
      let payload = {
        user_id: this.userId,
        taskDate: hourItem.oldDate,
      };
      const url = taskApi.workingHours.day;

      this.httpService
        .postRequest(url, payload)
        .then((res) => {
          this.$set(hourItem, "tasks", res.data);
          //   this.sortForms = res.data;
        })
        
    },
  },
};
</script>

<style scoped lang="scss">
// .form-group {
//   max-width: 44em !important;
//   height: 4em;
//   overflow: auto;
//   border: 1px rgb(223 223 223) solid;
//   border-radius: 0.25em;
//   margin-top: 0;
//   margin-bottom: 0;
//   font-size: 0.8rem;
// }
#accordion {
  width: 100% !important;
  // min-width: 36em !important;
  height: calc(100vh - 11em);
  overflow: auto;
}
.card-header,
.card {
  border-radius: 0.25em !important;
  // min-width: 35em !important;
}
.table-responsive {
  height: calc(100vh + -13em) !important;
}
.card-body {
  border-bottom: 1px rgb(223 223 223) solid;
  font-size: 0.9rem;
}
</style>
