<template>
  <div v-if="selfType !== 'view' ">
    <el-input-number v-if="element.render === 'number'" v-model="modelData[element.mapper]" style="width: 100%"
                     v-bind="element.props" :style="selfStyle" controls-position="right" @change="dispatchEvent('change')" />

    <el-input v-else-if="element.render === 'password'" show-password v-model="modelData[element.mapper]"
              v-bind="element.props" :style="selfStyle"  @change="dispatchEvent('change')" />

    <el-input v-else-if="element.render === 'textarea'" type="textarea" v-model="modelData[element.mapper]"
              v-bind="element.props" :style="selfStyle" @change="dispatchEvent('change')"  />

    <el-input v-else v-model="modelData[element.mapper]" v-bind="element.props" :style="selfStyle"
              @change="dispatchEvent('change')"
              @focus="dispatchEvent('focus')"
              @click="dispatchEvent('click')"
    />
  </div>
  <div v-else :style="selfStyle">
    {{ modelData[element.mapper] }}
  </div>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabEvent from "../../mixins/LabEvent";

export default {
  name: "LabInput",
  mixins: [LabBase,LabEvent],
  created() {
    this.$LabRender.autoFill(this.element, this)
  }
}
</script>

<style scoped>

</style>
