const template = html`
  <span>
    <h4>
      Repairs Queue:
      <span class="badge badge-info ng-binding">{{data.length}}</span>
      <jsontable
        :header="header"
        :data="data"
        :popoverHeader="popoverHeader"
      ></jsontable>
    </h4>
  </span>
`;
import jsontable from "../../generic/jsontable.js";

export default {
  data: function() {
    return {
      data: [],
      header: {
        ID: "id",
        Title: "title",
        client: "cname",
        "Pre-book": "prebook_indicator",
        Priority: "priority_name",
        "booked in": "created_at"
      },
      popoverHeader: {
        "Booked by": "t",
        Status: "test",
        prebook: "prebook",
        "booked in": "created_at",
        problem: "problem"
      },
      tags: []
    };
  },
  components: {
    jsontable
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      const raw = await fetch(
        "/api/v1/tasks/repairs?results=unassigned&client=true"
      );
      const json = await raw.json();
      const cl = [];
      this.data = json.data.map(el => {
        let cname = "";
        if (el.prebook == 1) {
          el.tag = "prebook-note";
        }
        if (el.client) {
          el.cname = el.client.name;
        }
        // Add prebook indicator with tick mark
        if (el.prebook == 1) {
          el.prebook_indicator = "✓";
        } else {
          el.prebook_indicator = "";
        }
        // Add priority name for display
        if (el.severity) {
          el.priority_name = el.severity.name;
        } else {
          el.priority_name = "Normal";
        }
        el.created_at = moment(el.created_at).fromNow();
        if (el.prebook) {
          cl.push("prebook-note");
          el.prebook = el.prebook_date;
        } else {
          el.prebook = "";
        }
        return el;
      });
      this.tags.push(cl.join(" "));
    }
  },
  template
};
