<script>
export default {
  name: "InputComponents",
  props:{
    index: {
      type: Number,
      default: -1
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.$store.state.template.templateJson.components[this.index].config[0].value
      },
    },
    configInfo: {
      get() {
        return this.$store.state.template.templateJson.components[this.index]
      }
    },
    placeholderValue: {
      get() {
        return this.$store.state.template.templateJson.components[this.index].config[0].placeholderValue
      }
    }
  }
}
</script>

<template>
  <view
      :style="{
   'min-height': configInfo.height + 'px',
   'line-height': configInfo.height + 'px',
 }"
      class="init-style"
  >
  <span>
    {{inputValue}}
  </span>
  </view>
</template>

<style scoped lang="scss">
:deep(.el-input--small .el-input__inner) {
  height: 100%;
}
:deep(.el-input--small) {
  font-size: 14px;
}
.init-style{
  margin: 10px 0;
  padding: 0 10px;
  border: 1px solid #ebeef5;
  word-wrap: break-word;
}
</style>