<template>
  <div>
    <gz-report-selector ref="reportSelector"></gz-report-selector>
    <div v-if="formState.ready">
      <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
      <v-form ref="form">
        <v-row>
          <h1>UNDER CONSTRUCTION</h1>
          <h2>
            Copied from inv part assembly and not implemented as customer work
            order yet. Backend customer rights check in conjunction with this
          </h2>
          {{ $store.state.customerRights }}
        </v-row>
      </v-form>
    </div>
    <template v-if="!formState.ready">
      <v-progress-circular
        indeterminate
        color="primary"
        :size="60"
      ></v-progress-circular>
    </template>
  </div>
</template>

<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  Xeslint-disable    */
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////
//THIS FORM IS CREATE ONLY
//no delete, no duplicate, no fetch, just create or leave
//
const FORM_KEY = "customer-workorder";
//const API_BASE_URL = "part-inventory/";

export default {
  async created() {
    let vm = this;

    try {
      await initForm();
      vm.formState.readOnly = true;
      window.$gz.eventBus.$on("menu-click", clickHandler);

      window.$gz.form.setFormState({
        vm: vm,
        loading: false,
        dirty: false,
        valid: true
      });

      generateMenu(vm);
    } catch (error) {
      window.$gz.errorHandler.handleFormError(error, vm);
    } finally {
      vm.formState.ready = true;
    }
  },
  beforeDestroy() {
    window.$gz.eventBus.$off("menu-click", clickHandler);
  },
  data() {
    return {
      obj: {
        id: 0,
        concurrency: 0
      },
      formState: {
        ready: false,
        dirty: false,
        valid: true,
        readOnly: true,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      },
      rights: window.$gz.role.readOnlyRightsObject(),
      ayaType: window.$gz.type.WorkOrder
    };
  },

  methods: {
    ayaTypes: function() {
      return window.$gz.type;
    },
    form() {
      return window.$gz.form;
    }
    //end methods
  }
};

/////////////////////////////
//
//
async function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  let m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == FORM_KEY && !m.disabled) {
    switch (m.key) {
      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          FORM_KEY + "::context click: [" + m.key + "]"
        );
    }
  }
}

//////////////////////
//
//
function generateMenu(vm) {
  let menuOptions = {
    isMain: false,
    readOnly: vm.formState.readOnly,
    icon: "$ayiTools",
    title: "WorkOrder",
    helpUrl: "customer-workorders",
    formData: {
      ayaType: window.$gz.type.WorkOrder,
      recordId: vm.$route.params.recordid,
      recordName: vm.obj.name
    },
    menuItems: []
  };

  menuOptions.menuItems.push({ divider: true, inset: false });

  window.$gz.eventBus.$emit("menu-change", menuOptions);
}

/////////////////////////////////
//
//
async function initForm() {
  await fetchTranslatedText();
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
async function fetchTranslatedText() {
  await window.$gz.translation.cacheTranslations([]);
}
</script>
