<template>
  <v-layout row wrap>
    <v-flex :class="fieldClass">
      <b>{{ name }}</b>
    </v-flex>

    <v-flex :class="contentClass">
      <v-input
        class="static-field"
        prepend-icon="edit">
        <slot :value="displayedValue">
          {{ displayedValue }}
        </slot>
      </v-input>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  name: 'BaseStaticField',
  props: {
    name: String,
    model: Object,
    field: String,
    format: {
      type: String,
      default: ''
    },
    template: {
      type: String,
      default: '%'
    },
    voidTemplate: {
      type: String,
      default: '-'
    },
    size: {
      type: String,
      default: 'large',
      validator: value => ['small', 'large'].includes(value)
    }
  },
  computed: {
    displayedValue () {
      let value = this.$get(this.model, this.field, '', this.format)
      return value && value !== '-'
        ? this.template.replace('%', value)
        : this.voidTemplate.replace('%', value)
    },
    fieldClass () {
      return this.size === 'large' ? 'md2' : 'md4'
    },
    contentClass () {
      return this.size === 'large' ? 'md10' : 'md8'
    }
  },
  methods: {
    show (value) {

    }
  }
}
</script>

<style lang="scss">
.edit-icon {
  font-size: 16px;
  margin: 0;
  height: 16px;
}
.static-field.v-input {
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 12px;
  margin: 0;
  margin-left: -30px;
  margin-right: 16px;
  input {
    padding: 0px;
  }
  .v-icon {
    font-size: 20px;
    margin-top: -15px;
    margin-right: -15px;
    color: transparent;
  }
}
</style>
