<template>
  <div v-if="pvm != null">
    <h2>WorkOrder items</h2>

    <!-- items:{{ value.items }}<br /> -->
    <span class="text-caption"
      >[selected index: {{ pvm.selectedItemIndex }}]</span
    >
    <template v-if="pvm.woItemCount > 1">
      <!-- Workorder item table here -->
    </template>
    <template v-if="pvm.hasSelectedWoItem">
      <!-- grid with edit form below in each collection section.  Edit form Has controls to navigate to other collection items so no need to go up and click on table if don't want to or it's huge -->
      <!-- Want to support the case that when it's a single woitem workorder then user can just scroll down and enter shit and doesn't need to open or go anywhere to enter things all the way down
        so a single workorderitem workorder would have all fields exposed and if any grandchildren those are entered in a single form too until the user has more than one 
        
        in v7 it's three clicks to go to a grandchild items specific field from the top header, woitem click -> left nav button row selection of area click -> grid row column click
        in v8 it would be one more click then if it was a multi record grandchild but if it was a single record all teh way down then all would be exposed and visible at hand could go directly to the field in question
            so in this concept every level exposes an edit form below a grid of one or more items, but grid doesn't show if there is one item so it's very clean.
            if there is no record at that collection then just a click to add button as unobtrusive but clearly marked as possible (if user has selected to hide that section then doesn't even show and some users don't see at all)
            if multiple at that level then a grid to select the active row to edit below it showing as much data as possible in each row to help user see at a glance while editing a sibling item
            When select in grid it highlights that row very well so that user knows for sure which row they are editing (plus it will live update I bet so clear to see)
            This gives the user as much as possible at hand immediately to view and edit and the option of adding and selecting more items
            It also ensures a clean interface more like a piece of paper with only stuff added showing

            So every level and collection including woitem and down is shown as a control with 4 major states (may have sub states or alternates):
                HIDDEN, EMPTY, SINGLE, MULTIPLE
                =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                Customized to not show at all or not allowed: is just not visible at all, doesn't render doesn't affect anything
                None entered: it's exposed as a clean and not too intrusive "Section title" control affordance with a title so "Scheduled users +" taking up very little vertical space 
                    but distinct enough and large enough to quickly find visually on the page (this is always visible)
                1 entered: it's exposed as a edit form below the Title control (no grid)
                More than 1 entered: it's exposed as a grid below the title control which is used to select a row and an edit form below the grid that is displayed ONLY when a row is selected in the grid
                    so if they just open the form and haven't picked a row yet then no edit form shows to save vertical space and be cleaner

            Visually each section is separated by a distinctive title and whitespace around it, no lines or boxes or other ugly shit.  It should look as much as possible like a clean sheet of paper and be minimalist.
            Roles and rights
                some controls may have an alternative format for differing roles and rights users, so if it's a subcontractor then they may see an alternate view


        e.g. 
        # single all the way down:
        WOHEADER
            singlewoitem record form with all fields showing for edit here
                schedusers is just an add button until there is one then it's an exposed form until there's two then it's a grid only with click to open and edit each record

        # two all the way down
        WOHEADER
            woitemgrid, click to select second item (first automatically selected when opened?), after click it shows immediately below the woitemheader fields and below that the grandchild collections as grids or add button or whole form if one
                schedusers shows as a grid, click on it to open the form below it, not popup??
                    Showing the form below the grid of all the other items is actually a handy affordance because you can see what was entered and refer to it in the companion same group items
                    so if you forgot if you entered a particular user or not in the midst of entry you can see it just above
        

        todo: need an editable control at every level for proper test of partical update
        todo: need the state control at least enough to test as it's a critical part
        todo: need dirty tracking stuff for each level to set / check so top level save can know what to update
        -->

      <GzWoItemScheduledUsers
        v-if="pvm.subRights.scheduledUsers.visible"
        v-model="value"
        :pvm="pvm"
        data-cy="woItemScheduledUsers"
      />
    </template>
    <template v-else>
      <h5>select a woitem to view the form</h5>
    </template>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////
import GzWoItemScheduledUsers from "../components/work-order-item-scheduled-users.vue";

export default {
  components: {
    GzWoItemScheduledUsers
  },
  data() {
    return {};
  },
  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    }
  },

  methods: {
    form() {
      return window.$gz.form;
    },
    fieldValueChanged(ref) {
      if (!this.formState.loading && !this.formState.readonly) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  },
  computed: {
    formState: function() {
      return this.pvm.formState;
    },
    formCustomTemplateKey: function() {
      return this.pvm.formCustomTemplateKey;
    }
  }
};
</script>
