<template>
  <span class="onestop-font" :class="[onestopType, onstopColor, onestopBgColor]" :style="[onestopLine, onestopLineHeight, onestopStyle]">
    <slot>{{content}}</slot>
  </span>
</template>

<script>
export default {
  name: 'OnestopFont',
  props: {
    content: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'font-size-m-sm'
    },
    color: {
      type: String,
      default: 'default'
    },
    bgColor: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    lineHeight: {
      type: Number,
      default: 1.5
    },
    fontSize: {
      type: String,
      default: ''
    },
    fontColor: {
      type: String,
      default: ''
    },
    fontWeight: {
      type: String,
      default: ''
    },
    textDecoration: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      prefiex: 'onestop-',
      colorPrefiex: 'onestop-font-color-',
      bgColorPrefiex: 'onestop-font-bg-color-'
    }
  },
  computed: {
    onestopType () {
      return this.prefiex + this.type
    },
    onstopColor () {
      return this.colorPrefiex + this.color
    },
    onestopBgColor () {
      return this.bgColor ? this.bgColorPrefiex + this.bgColor : ''
    },
    onestopLine () {
      const textProps = this.line == 1 ? 'underline' : this.line == 2 ?'line-through' : ''
      return textProps ? { 'text-decoration': textProps } : {}
    },
    onestopLineHeight () {
      return { 'line-height': this.lineHeight}
    },
    onestopStyle () {
      const fontSize = this.fontSize ? {'font-size': this.fontSize + '!important'} : {}
      const color = this.color ? {'color': this.fontColor + '!important'} : {}
      const fontWeight = this.fontWeight ? {'font-weight': this.fontWeight + '!important'} : {}
      const textDecoration = this.textDecoration ? {'text-decoration': this.textDecoration + '!important'} : {}
      return {...fontSize, ...color, ...fontWeight, ...textDecoration}
    }
  }
};
</script>
