const template = html`
  <div class="col-lg-10">
    <div class="row">
      <div class="col-lg-12  col-md-10">
        <div class="card">
          <h2>Holiday</h2>
          <userholiday :userId="me.id"></userholiday>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12  col-md-10">
        <div class="card">
          <h2>pending requests</h2>
          <requestpending :userId="me.id"></requestpending>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-7  col-md-10">
        <div class="card">
          <h2>Times</h2>
          <usertimetable :userId="me.id"></usertimetable>
        </div>
      </div>

      <div class=" col-lg-5  col-md-10">
        <div class="card">
          <h2>User Details</h2>
          <userinfocard :userId="me.id"></userinfocard>
        </div>
      </div>
    </div>
  </div>
`;
import state from "../../state/main.js";
import api from "../../api.js";
import userinfocard from "./userinfocard.js";
import userholiday from "./userholiday.js";
import usertimetable from "./usertimetable.js";
import requestpending from "./requestpending.js";

export default {
  data: function() {
    return {
      me: {}
    };
  },

  components: {
    userinfocard,
    userholiday,
    usertimetable,
    requestpending
  },

  async created() {
    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has("id") && permission.hasPermission("access_hr")) {
      this.me.id = Number(urlParams.get("id"));
    } else {
      this.loadMe();
    }
  },

  methods: {
    async loadMe() {
      
      state.sub("me", value => (this.me = value));
      const data = await api.get.me();
      state.set("me", data);
    }
  },

  template
};
