<template>
  <FieldWrapper
      :class="{'hidden': hidden, 'w-full': fullWidth}"
      v-if="field.visible"
    >
      <div
        v-html="field.html"
        :class="classes"
      />
    </FieldWrapper>
</template>

<script>
export default {
  props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],

    /*
     * Set the initial, internal value for the field.
     */
    setInitialValue() {
      this.fullWidth = this.field.fullWidth || true;
      this.value = this.field.value || ''
      this.html = this.field.html || ''
      this.alert_message = this.field.alert_message || null
      this.hidden = this.field.hidden || false
    },

      computed: {
        classes: () => [
          'remove-last-margin-bottom',
          'leading-normal',
          'w-full',
          'py-4',
          'px-8',
        ],
      },

    mounted() {
        if (this.alert_message) {
            alert(this.alert_message)
        }
    }
}
</script>
