<template>
  <div class="q-gutter-y-md">
    <div class="row items-center">
      <div class="col-2 text-grey-9 q-pl-md">clazz</div>
      <div class="text-primary">{{ parentInteragency.clazz }}</div>
    </div>
    <q-form ref="formRef">
      <q-input
        v-model="form.requestName"
        :label="$t('base.table.name')"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.description"
        :label="$t('base.table.description')"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.version"
        :label="$t('base.table.version')"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.class"
        label="class"
        filled
        :rules="[noEmptyValueRule]"
      />

      <q-input
        v-model="form.provider"
        :label="$t('interagencies.owner')"
        filled
        :rules="[noEmptyValueRule]"
      />
    </q-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { noEmptyValueRule } from '@utils/field-validation/basic';

@Component
export default class CommonTab extends Vue {
  noEmptyValueRule = noEmptyValueRule;
  form = {
    requestName: '',
    description: '',
    version: '',
    class: '',
    provider: '',
  };

  @Watch('form', { deep: true })
  onFormChange(v: any) {
    this.$emit('input', v);
  }

  get parentInteragency() {
    return this.$store.getters[
      'registryService/interagencies/getParentInteragency'
    ];
  }

  validate() {
    return new Promise((resolve, reject) => {
      // @ts-ignore
      this.$refs.formRef.validate().then((success: boolean) => {
        resolve(success);
      });
    });
  }
}
</script>

<style scoped></style>