<template>
  <div :class="[componentClass, getFormatTypeClass]">
    <div
      class="label label-left"
      v-if="isLabelVisible && labelLocation === 'left'"
      :style="{ width: getLabelWidth }"
    >{{labelText}}</div>
    <div class="value">{{value}}</div>
    <div
      class="label suffix-label label-right"
      v-if="isSuffixLabelVisible"
      :style="{ width: getSuffixLabelWidth }"
    >{{suffixLabelText}}</div>
    <div
      class="label label-right"
      v-if="isLabelVisible && labelLocation === 'right'"
      :style="{ width: getLabelWidth }"
    >{{labelText}}</div>
  </div>
</template>

<script>
const props = {
  text: {
    type: String,
    default: null
  },
  dataFieldIdent: {
    type: String,
    default: null
  },
  formatType: {
    type: String,
    default: "none"
  },
  showLabel: {
    type: Boolean,
    default: true
  },
  labelLocation: {
    type: String,
    default: 'left'
  },
  label: {
    type: String,
    default: null
  },
  dataFieldIdent4Label: {
    type: String,
    default: null
  },
  labelWidth: {
    type: String,
    default: '150px'
  },
  suffixLabel: {
    type: String,
    default: null
  },
  dataFieldIdent4SuffixLabel: {
    type: String,
    default: null
  },
  suffixLabelWidth: {
    type: String,
    default: '20px'
  },
}
import controlUtils from '../classes/controlUtils'
import base from './c-base'
import { mapGetters } from 'vuex'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-textblock'
    }
  },
  props,
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getDataSetRowsFieldValue'
    ]),
    getFormatTypeClass: function () {
      return this.getFormatType !== "none" ? controlUtils.checkFormatType(this.getFormatType).formatTypeClass : null
    },
    getFormatType: function() {
      return this.formatType !== 'none' ? this.formatType : this.fieldsIdentsDataField.formatType
    },
    value: function () {
      if (this.text !== null) {
        return this.text
      }
      return this.formatValue(this.dataFieldValue, this.getFormatType)
    },
    isLabelVisible: function() {
      return this.showLabel && this.labelText != null
    },
    isSuffixLabelVisible: function() {
      return this.suffixLabelText != null
    },
    labelText: function() {
      if (this.labelLocation === 'none') return null
      if (this.label != null) return this.label
      if (this.dataFieldIdent4Label != null)
        return this.getDataSetRowsFieldValue(
          this.dataSet,
          this.dataFieldIdent4Label,
          this.contextRow
        )
      switch (this.sourceKind) {
        case 'where':
          return this.whereFieldsIdentsDataField?.dataFieldLabTranslatedDesc || null
        case 'rows':
          return this.fieldsIdentsDataField?.dataFieldLabTranslatedDesc || null
        default: 
          return null
      }
    },
    suffixLabelText: function() {
      if (this.suffixLabel != null) return this.suffixLabel
      if (this.dataFieldIdent4SuffixLabel == null) return null
      return this.getDataSetRowsFieldValue(
          this.dataSet,
          this.dataFieldIdent4SuffixLabel,
          this.contextRow
        )
    },
    getLabelWidth: function() {
      return this.labelWidth.includes('px') ? this.labelWidth : this.labelWidth + 'px'
    },
    getSuffixLabelWidth: function() {
      return this.suffixLabelWidth.includes('px') ? this.suffixLabelWidth : this.suffixLabelWidth + 'px'
    },
  }
}</script>