<i18n>
{
  "en": {
    "DocumentEdit": {
      "nameTemplate": "Name template",
      "templateVariable": "Variable link"
    }
  },
  "ru": {
    "DocumentEdit": {
      "nameTemplate": "Шаблон наименования файла",
      "templateVariable": "Ссылка на переменное значение"
    }
  }
}
</i18n>

<template>
  <div class="row justify-between">
    <q-input
      v-model="model"
      :label="$t('DocumentEdit.nameTemplate')"
      :rules="rules"
      class="q-pb-none col-6 col-md-8"
      filled
    />
    <q-btn icon="arrow_left" flat @click="addSource(sourcePath)" />
    <q-input
      v-model="sourcePath"
      :label="$t('DocumentEdit.templateVariable')"
      class="q-pb-none col-3"
      filled
    />
  </div>
</template>
<script lang="ts">
import { Vue, PropSync, Component, Prop } from 'vue-property-decorator';
import { ServiceFileNameFactory } from '@utils/file/ServiceFileNameFactory';

@Component
export default class FileTemplateInput extends Vue {
  @PropSync('value') model!: string;
  @Prop() rules: unknown[];
  sourcePath = '';

  addSource(payload: string): void {
    this.model += `${ServiceFileNameFactory.fileNameBoundaries.start}${payload}${ServiceFileNameFactory.fileNameBoundaries.end}`;
    this.clearSourcePath();
  }

  clearSourcePath(): void {
    this.sourcePath = '';
  }
}
</script>
