<template>
    <component
        :is="component"
        :docfield="docfield"
        :value="value"
        :onlyInput="onlyInput"
        @change="$emit('change', $event)"
    />
</template>
<script>
import Base from './Base';
import Autocomplete from './Autocomplete';
import Check from './Check';
import Code from './Code';
import Currency from './Currency';
import Data from './Data';
import Date from './Date';
import DynamicLink from './DynamicLink';
import File from './File';
import Float from './Float';
import Int from './Int';
import Link from './Link';
import Password from './Password';
import Select from './Select';
import Table from './Table';
import Text from './Text';

export default {
    props: ['docfield', 'value', 'onlyInput'],
    computed: {
        component() {
            if (this.docfield.template) {
                // for controls with their own template
                // create a vue object for it
                return {
                    extends: Base,
                    render: null,
                    template: this.docfield.template()
                }
            }

            return {
                Autocomplete,
                Check,
                Code,
                Currency,
                Data,
                Date,
                DynamicLink,
                File,
                Float,
                Int,
                Link,
                Password,
                Select,
                Table,
                Text,
            }[this.docfield.fieldtype];
        }
    }
}
</script>
<style scoped>
.form-group {
  position: relative;
}
</style>
