<template>
  <div>
    <gz-data-table
      form-key="adm-report-templates"
      data-list-key="ReportDataList"
      :show-select="false"
      :single-select="false"
      :reload="reload"
      @selection-change="handleSelected"
      data-cy="reportTemplatesTable"
    >
    </gz-data-table>
    <v-file-input
      v-model="uploadFiles"
      :label="$ay.t('Import')"
      accept=".ayrt"
      prepend-icon="$ayiFileUpload"
      multiple
      chips
    ></v-file-input>
    <v-btn
      v-if="uploadFiles.length > 0"
      :loading="uploading"
      color="primary"
      text
      @click="upload"
      >{{ $ay.t("Upload") }}</v-btn
    >
  </div>
</template>

<script>
const FORM_KEY = "adm-report-templates";
export default {
  async created() {
    this.rights = window.$gz.role.getRights(window.$gz.type.Report);
    window.$gz.eventBus.$on("menu-click", clickHandler);
    //await fetchTranslatedText(this);
    generateMenu(this);
  },
  beforeDestroy() {
    window.$gz.eventBus.$off("menu-click", clickHandler);
  },
  data() {
    return {
      uploadFiles: [],
      rights: window.$gz.role.defaultRightsObject(),
      reload: false,
      uploading: false
    };
  },
  methods: {
    async upload() {
      //similar code in wiki-control
      let vm = this;
      let fileData = [];
      for (let i = 0; i < vm.uploadFiles.length; i++) {
        let f = vm.uploadFiles[i];
        fileData.push({ name: f.name, lastModified: f.lastModified });
      }
      let at = {
        // ayaId: vm.ayaId,
        // ayaType: vm.ayaType,
        files: vm.uploadFiles,
        fileData: JSON.stringify(fileData)
      };
      try {
        vm.uploading = true;
        let res = await window.$gz.api.upload("report/upload", at);
        if (res.error) {
          window.$gz.errorHandler.handleFormError(res.error);
        } else {
          vm.uploadFiles = [];

          this.reload = !this.reload;
        }
      } catch (error) {
        window.$gz.errorHandler.handleFormError(error);
      } finally {
        vm.uploading = false;
      }
    },
    handleSelected(selectedItems) {
      console.log(selectedItems);
    }
  }
};

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  let m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == FORM_KEY && !m.disabled) {
    switch (m.key) {
      // case "new":
      //   m.vm.$router.push({
      //     name: "adm-translation",
      //     params: { recordid: 0 }
      //   });
      //   break;
      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          FORM_KEY + "::context click: [" + m.key + "]"
        );
    }
  }
}

//////////////////////
//
//
function generateMenu(vm) {
  let menuOptions = {
    isMain: true,
    icon: "$ayiDraftingCompass",
    title: "ReportList",
    helpUrl: "adm-report-templates",
    menuItems: [],
    formData: {
      ayaType: window.$gz.type.Report
    }
  };

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

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