<template>
  <div class="viewer">
    <slot />
  </div>
</template>

<script>
import {useI18n} from 'vue-i18n'
export default {
  setup: () => {
    const {t} = useI18n()

    return {t}
  },
  provide: function () {
    return {
      getViewerFieldValue: this.getViewerFieldValue,
      getViewerFieldDefinition: this.getViewerFieldDefinition,
      getLabelClass: this.getLabelClass,
      getValueClass: this.getValueClass,
      getViewerFieldTranslation: this.getViewerFieldTranslation
    }
  },
  props: {
    definition: {
      type: Object,
      required: true
    },
    row: {
      type: Object,
      required: true
    },
    labelSize: {
      type: Number,
      default: 4
    }
  },
  created: function () {

  },
  methods: {
    getViewerFieldValue: function (name) {
      let result = typeof this.row[name] === 'object' && this.row[name] !== null ? this.row[name].node_description : this.row[name]

      if (this.definition.fields[name] && this.definition.fields[name].choices) {
        result = this.t(['models', this.definition.model, 'fields', name, 'choices', result].join('.'))
      }

      return result
    },
    getViewerFieldDefinition: function (name) {
      return this.definition.fields[name]
    },
    getViewerFieldTranslation: function (name) {
      return this.t(['models', this.definition.model, 'fields', name, 'name'].join('.'))
    },
    getLabelClass: function () {
      return 'col-sm-' + this.labelSize
    },
    getValueClass: function () {
      return 'col-sm-' + (12 - this.labelSize)
    }
  }
}
</script>
