<i18n>
{
  "en": {
    "SuccessfulForm": {
      "title": "Process has finished correctly",
      "finish": "Finish"
    }
  },
  "ru": {
    "SuccessfulForm": {
      "title": "Процесс успешно завершен",
      "finish": "Завершить"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div v-if="title" class="text-h6">
      {{ title }}
    </div>
    <div v-else class="text-h6">
      {{ $t('SuccessfulForm.title') }}
    </div>
    <p>
      {{ description }}
    </p>
    <ul v-if="dependences.length">
      <li v-for="(dependence, i) in dependences" :key="`dependence-${i}`">
        {{ dependence }}
      </li>
    </ul>
    <q-btn color="primary" type="submit" :label="$t('SuccessfulForm.finish')" />
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      dependences: [],
      description: '',
      title: '',
    };
  },
  computed: {
    outputData() {
      return {};
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          this.dependences = val.dependences || [];
          this.description = this.$t(val.description, val);
          this.title = this.$t(val.title);
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
  },
};
</script>
