<i18n>
{
  "en": {
    "statements": {
      "LinkedObjectsDialog": {
        "title": "Select the required document or type of information",
        "missing": "File is missing",
        "date": "Modify date"
      }
    }
  },
  "ru": {
    "statements": {
      "LinkedObjectsDialog": {
        "title": "Выберите необходимый документ или вид сведений",
        "missing": "Файл отсутсвует",
        "date": "Дата модификации"
      }
    }
  }
}
</i18n>

<template>
  <div>
    <q-dialog v-model="dialog" @hide="clearModel">
      <q-card class="full-width no-shadow" style="max-width: 800px">
        <q-card-section>
          <div class="text-h6">
            {{ $t('statements.LinkedObjectsDialog.title') }}
          </div>
        </q-card-section>
        <q-card-section>
          <q-table
            v-if="linkedObjects"
            v-bind="$attrs"
            :columns="cols"
            :data="dataCast"
            class="no-shadow text-grey-9 overflow-hidden"
            separator="cell"
            wrap-cells
            style="border-radius: 0"
            hide-bottom
            v-on="$listeners"
          >
            <template #body="props">
              <q-tr
                class="cursor-pointer"
                :props="props"
                @click="
                  handler({
                    type: props.row.type,
                    uuid: props.row.uuid,
                    empty: props.row.empty,
                  })
                "
              >
                <q-td key="doc" :props="props">
                  {{ props.row.doc }}
                </q-td>
                <q-td key="date" :props="props">
                  {{ props.row.date }}
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { convertDateFromTimestamp } from '@utils/format-date';
import get from 'lodash/get';

export default {
  props: ['common', 'model', 'user-task'],
  data() {
    return {
      dialog: false,
      linkedObjects: null,
    };
  },
  computed: {
    cols() {
      return [
        {
          align: 'left',
          field: 'doc',
          name: 'doc',
          sortable: false,
          label: this.linkedObjects.head,
          headerStyle: 'font-size: 14px;',
        },
        {
          align: 'left',
          field: 'date',
          name: 'date',
          sortable: false,
          label: this.$t('statements.LinkedObjectsDialog.date'),
          headerStyle: 'font-size: 14px;',
        },
      ];
    },
    dataCast() {
      const rows = [];
      if (get(this.linkedObjects, 'objects', []).length) {
        this.linkedObjects.objects.forEach((item) => {
          rows.push({
            doc:
              item.title || this.$t('statements.LinkedObjectsDialog.missing'),
            date: convertDateFromTimestamp(item.modified),
            uuid: item.uuid,
            type: item.type,
            empty: !item.title,
          });
        });
      }
      return rows;
    },
  },
  watch: {
    'common.models.linkedObjectsDialog.data': {
      handler: function (val) {
        if (val) {
          this.dialog = true;
          this.linkedObjects = val;
        }
      },
    },
  },
  destroyed() {
    this.clearModel();
  },
  methods: {
    handler(object) {
      if (!object.empty) {
        switch (object.type) {
          case 'document':
            this.goToDocument(object.uuid);
            break;
          case 'mvz':
            this.goToMvz(object.uuid);
            break;
        }
      }
    },
    clearModel() {
      this.$emit('commonModels', {
        linkedObjectsDialog: {
          data: null,
        },
      });
    },
    goToDocument(docId) {
      const route = this.$route;
      this.$router.push({
        name: route.name || '',
        params: route.params || {},
        query: {
          ...route.query,
          active: 'documents',
          markeredDocuments: docId,
        },
      });
    },
    goToMvz(mvzId) {
      this.$router.push({
        name: 'cards',
        params: {
          id: mvzId,
          path: 'inter_requests',
        },
        query: {
          components: this.$store.getters[
            'cardComponents/interRequests/components'
          ],
          active: 'response',
          statement: this.$store.getters['utils/cards/models'].statements.id,
        },
      });
    },
  },
};
</script>
