<template>
  <div v-if="pvm != null">
    <!-- implement the "four states" here -->
    <!--  HIDDEN(already taken care of, just three I guess), EMPTY, SINGLE, MULTIPLE  -->

    <!-- Title and menu -->
    <v-col cols="12">
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <div class="text-subtitle-1">
            <v-icon color="primary">$ayiUserClock</v-icon>
            {{ $ay.t("WorkOrderItemScheduledUserList") }}
            <v-btn large icon v-bind="attrs" v-on="on">
              <v-icon small color="primary">$ayiEllipsisV</v-icon>
            </v-btn>
          </div>
        </template>
        <v-list>
          <v-list-item v-if="canAdd" @click="newItem">
            <v-list-item-icon>
              <v-icon>$ayiPlus</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{ $ay.t("New") }}</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="canDelete" @click="deleteItem">
            <v-list-item-icon>
              <v-icon>$ayiTrashAlt</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{ $ay.t("Delete") }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-col>
    <!-- 
    <span class="text-caption"
      >[selected su_index: {{ pvm.selectedScheduledUserItemIndex }}]</span
    > -->
    <template v-if="pvm.scheduledUserItemCount > 1">
      <!-- ################################ SCHEDULED USERS TABLE ############################### -->
      <v-col cols="12">
        <v-data-table
          :headers="headerList"
          :items="itemList"
          v-model="selectedRow"
          class="elevation-1"
          disable-pagination
          disable-filtering
          disable-sort
          hide-default-footer
          data-cy="scheduledUsersTable"
          dense
          :item-class="itemRowClasses"
          item-key="id"
          @click:row="selectItem"
          :show-select="$vuetify.breakpoint.xs"
          single-select
        >
          <!-- <template v-slot:[`item.actions`]="{ item }">
            <v-btn icon @click="selectItem(item)">
              <v-icon :class="itemRowClasses(item)">
                $ayiEdit
              </v-icon>
            </v-btn>
          </template> -->
        </v-data-table>
      </v-col>
    </template>
    <template v-if="pvm.hasSelectedScheduledUserItem">
      <v-col cols="12" sm="6" lg="4" xl="3">
        <gz-decimal
          v-model="
            value.items[pvm.selectedItemIndex].scheduledUsers[
              pvm.selectedScheduledUserItemIndex
            ].estimatedQuantity
          "
          :readonly="formState.readOnly"
          :label="$ay.t('WorkOrderItemScheduledUserEstimatedQuantity')"
          ref="scheduledUsers.EstimatedQuantity"
          data-cy="scheduledUsers.EstimatedQuantity"
          :error-messages="
            form().serverErrors(
              this,
              `Items[${pvm.selectedItemIndex}].scheduledUsers[
              ${pvm.selectedScheduledUserItemIndex}
            ].estimatedQuantity`
            )
          "
          :rules="[
            form().decimalValid(this, 'scheduledUsers.EstimatedQuantity'),
            form().required(this, 'scheduledUsers.EstimatedQuantity')
          ]"
          @input="
            fieldValueChanged(`Items[${pvm.selectedItemIndex}].scheduledUsers[
              ${pvm.selectedScheduledUserItemIndex}
            ].estimatedQuantity`)
          "
        ></gz-decimal>
      </v-col>
    </template>

    <!-- public long? UserId { get; set; }
        public decimal EstimatedQuantity { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? StopDate { get; set; }
        public long? ServiceRateId { get; set; } -->
    <!-- <h5 class="ml-12">WorkOrderItemScheduledUsers</h5>
    <div v-if="pvm.hasSelectedWoItem">
      {{ value.items[pvm.selectedItemIndex].scheduledUsers }}
    </div> -->
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

export default {
  data() {
    return { selectedRow: [] };
  },

  props: {
    value: {
      default: null,
      type: Object
    },
    pvm: {
      default: null,
      type: Object
    }
  },

  methods: {
    newItem() {
      console.log("STUB: NEW scheduserITEM");
    },
    deleteItem() {
      console.log(`STUB: DELETE scheduserITEM id:${this.selectedRow[0].id}`);
    },
    selectItem: function(item) {
      this.selectedRow = [item];
      this.pvm.selectedScheduledUserItemIndex = item.index;
    },
    form() {
      return window.$gz.form;
    },
    fieldValueChanged(ref) {
      if (!this.formState.loading && !this.formState.readonly) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    },
    itemRowClasses: function(item) {
      if (this.form().childRowHasError(this, "ScheduledUsers", item.index)) {
        return "font-weight-black font-italic error--text";
      }
    }
  },
  computed: {
    headerList: function() {
      /*
            public long? UserId { get; set; }
        public decimal EstimatedQuantity { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? StopDate { get; set; }
        public long? ServiceRateId { get; set; }


IN ORDER: start, stop, quantity, user, rate




  If the column is a text, left-align it
  If the column is a number or number + unit, (or date) right-align it (like excel)
  */
      let headers = [];

      if (
        this.form().showMe(
          this,
          "ScheduledUsers.WorkOrderItemScheduledUserStartDate"
        )
      ) {
        headers.push({
          text: this.$ay.t("WorkOrderItemScheduledUserStartDate"),
          align: "right",
          value: "startDate"
        });
      }

      if (
        this.form().showMe(
          this,
          "ScheduledUsers.WorkOrderItemScheduledUserStopDate"
        )
      ) {
        headers.push({
          text: this.$ay.t("WorkOrderItemScheduledUserStopDate"),
          align: "right",
          value: "stopDate"
        });
      }

      if (
        this.form().showMe(
          this,
          "ScheduledUsers.WorkOrderItemScheduledUserEstimatedQuantity"
        )
      ) {
        headers.push({
          text: this.$ay.t("WorkOrderItemScheduledUserEstimatedQuantity"),
          align: "right",
          value: "estimatedQuantity"
        });
      }

      headers.push({
        text: this.$ay.t("WorkOrderItemScheduledUserUserID"),
        align: "left",
        value: "userViz"
      });

      headers.push({
        text: this.$ay.t("WorkOrderItemScheduledUserServiceRateID"),
        align: "left",
        value: "rateViz"
      });
      // headers.push({ text: "", value: "actions" });

      return headers;
    },
    itemList: function() {
      return this.value.items[this.pvm.selectedItemIndex].scheduledUsers.map(
        (x, i) => {
          return {
            index: i,
            id: x.id,
            startDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
              x.startDate,
              this.pvm.timeZoneName,
              this.pvm.languageName,
              this.pvm.hour12
            ),
            stopDate: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
              x.stopDate,
              this.pvm.timeZoneName,
              this.pvm.languageName,
              this.pvm.hour12
            ),
            estimatedQuantity: window.$gz.locale.decimalLocalized(
              x.estimatedQuantity,
              this.pvm.languageName
            ),
            userViz: x.userViz,
            rateViz: x.rateViz
          };
        }
      );
    },
    formState: function() {
      return this.pvm.formState;
    },
    formCustomTemplateKey: function() {
      return this.pvm.formCustomTemplateKey;
    },
    canAdd: function() {
      return (
        !this.value.isLockedAtServer &&
        this.pvm.rights.change &&
        this.pvm.subRights.scheduledUsers.create
      );
    },
    canDelete: function() {
      return (
        this.pvm.hasSelectedScheduledUserItem &&
        !this.value.isLockedAtServer &&
        this.pvm.rights.change &&
        this.pvm.subRights.scheduledUsers.delete
      );
    }
  }
};
</script>
