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

<template>
  <view
      :style="{
      'min-height': configInfo.height + 'px',
      textAlign: configInfo.config && configInfo.config[0].value,
      fontSize: configInfo.config && configInfo.config[1].value + 'px',
    }"
      class="description-style"
  >
    {{inputComponentValue}}
  </view>
</template>

<style scoped lang="scss">
.description-style {
  //border: 1px solid #ebeef5;
  margin: 10px 0;
  word-wrap: break-word;
  padding: 10px;
}
</style>