<i18n>
{
  "en": {
    "RegistryCreation": {
      "title": "View scheme creation"
    }
  },
  "ru": {
    "RegistryCreation": {
      "title": "Создание схемы"
    }
  }
}
</i18n>

<template>
  <q-dialog v-model="dialogOpen" @hide="clearModel">
    <q-card class="full-width no-shadow" style="max-width: 800px">
      <q-card-section>
        <div class="text-h6">
          {{ $t('RegistryCreation.title') }}
        </div>
      </q-card-section>

      <BaseTable
        :columns="columns"
        :data="resultDocs"
        :pagination.sync="pagination"
        title="Выберите документы для включения в реестр"
        :selected.sync="selected"
        selection="multiple"
      >
        <template #body-item-actions="{ row }"></template>
      </BaseTable>

      <q-card-actions align="right">
        <q-btn
          v-if="generated"
          label="Скачать схему"
          unelevated
          color="primary"
          @click="download"
        />

        <q-btn
          label="Сгенерировать схему"
          unelevated
          color="primary"
          @click="generate"
        />

        <q-btn
          label="Закрыть"
          color="white"
          text-color="primary"
          outline
          @click="dialogOpen = false"
        />
      </q-card-actions>

      <q-card-section v-if="generated" class="q-pa-none">
        <v-json-editor
          ref="jsoneditor"
          v-model="rawJSON"
          height="500px"
          :options="{
            mode: 'code',
            mainMenuBar: false,
          }"
        />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>
<script lang="ts">
// @ts-nocheck
// @ts-ignore
import VJsonEditor from 'v-jsoneditor';

import { exportFile } from 'quasar';
import createView from '@utils/registry-view-generator';

export default {
  name: 'RegistryCreationDialog',
  components: {
    VJsonEditor,
  },
  props: ['common', 'model'],
  data() {
    return {
      dialogOpen: false,
      rawJSON: '',
      generated: false,
      pagination: {
        rowsNumber: 0,
        page: 1,
        rowsPerPage: 10,
      },
      selected: [],
    };
  },

  computed: {
    columns() {
      return [
        {
          align: 'left',
          field: (val) => val.code || val.id,
          label: 'Код',
          name: 'code',
          style: 'white-space: normal',
          sortable: true,
        },
        {
          align: 'left',
          field: (val) => val.name || val.description,
          label: 'Наименование',
          name: 'name',
          style: 'white-space: normal',
          sortable: true,
        },
        {
          align: 'left',
          name: 'actions',
          style: 'white-space: normal; width: 150px',
          sortable: true,
        },
      ];
    },

    resultDocs() {
      const card = this.$store.getters['registryService/services/servicesCard'];
      return (card.documents || []).filter((i) => i.source === 'result');
    },
  },

  watch: {
    'common.models.RegistryCreationDialog': {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.dialogOpen = true;
          this.generated = false;
        }
      },
    },
  },

  destroyed() {
    this.clearModel();
  },

  methods: {
    generate() {
      this.rawJSON = createView(this.selected);
      this.generated = true;
    },

    clearModel() {
      this.$emit('commonModels', {
        RegistryCreationDialog: null,
      });
    },

    download() {
      const schemaBlob = new Blob([JSON.stringify(this.rawJSON, null, 2)], {
        type: 'application/json',
      });

      exportFile('view.json', schemaBlob, 'application/json');
    },
  },
};
</script>
