<template>
  <div
    class="component_HeadLine"
    :style="styleCss"
  >{{ item.value }}</div>
</template>

<script>
export default {
  name: 'HeadLine',
  props: {
    item: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    styleCss () {
      return {
        height: `${this.item.style.height}px`,
        lineHeight: `${this.item.style.height}px`,
        fontSize: `${this.item.style.fontSize}px`,
        fontWeight: this.item.style.fontWeight,
        textAlign: this.item.style.textAlign,
        color: this.item.style.color,
        backgroundColor: this.item.style.backgroundColor,
        padding: `0px ${this.item.style.indent}px`
      }
    }
  },
  watch: {
    'item.style.height' () {
      if (this.item.style.height === undefined) {
        this.item.style.height = 30
      }
    },
    'item.style.fontSize' () {
      if (this.item.style.fontSize === undefined) {
        this.item.style.fontSize = 12
      }
    },
    'item.style.indent' () {
      if (this.item.style.indent === undefined) {
        this.item.style.indent = 0
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.component_HeadLine {
  overflow: hidden;
}
</style>
