<template>
  <div :style="styleObject">
    <span>{{this.textValue}}</span>
  </div>
</template>

<script>
  export default {
    name: "lcdtext",
    props: {
      attr: {
        type: Object
      }
    },
    data() {
      return {
        navigationAddressCombo: [],
        textValue: this.attr.text.value.value
      }
    },
    computed: {
      styleObject: function () {
        let styleObject = {};
        
        /** 
         * the following common-properties in DesignerCompnent
         * layout, background, border, shadow
         */

        // currentState 값을 입력하면 각 state 에 맞는 font 색상 표시
        let currentState = this.attr.state.currentState.value;
        if( currentState ) {
          let currentColor = '';
          if( currentState == this.attr.state.state01.value.value ) {
            currentColor = this.attr.state.state01.color.value;
          } else if( currentState == this.attr.state.state02.value.value ) {
            currentColor = this.attr.state.state02.color.value;
          } else if( currentState == this.attr.state.state03.value.value ) {
            currentColor = this.attr.state.state03.color.value;
          } else if( currentState == this.attr.state.state04.value.value ) {
            currentColor = this.attr.state.state04.color.value;
          } else if( currentState == this.attr.state.state05.value.value ) {
            currentColor = this.attr.state.state05.color.value;
          }
          if( currentColor ) {
            styleObject.color = currentColor;
          }
        }
        return styleObject;
      }
    },
    methods: {
      propertyValueChanged(propGroupName, propName) {
        if(propGroupName == 'text' && propName == 'formatType'){
          if(this.attr.text.formatType.value == 'numeric'){
            this.attr.text.decimalPlaces.hidden = false
            this.attr.text.comma.hidden = false
          }else{
            this.attr.text.decimalPlaces.hidden = true
            this.attr.text.comma.hidden = true
          }
        }else if(propGroupName == 'background' && propName == 'gradient'){
          if(this.attr.background.gradient.value == false){ //solid
            this.attr.background.color.hidden = false
            this.attr.background.color1.hidden = true
            this.attr.background.color2.hidden = true
            this.attr.background.color3.hidden = true
          }else{ //gradient
            this.attr.background.color.hidden = true
            this.attr.background.color1.hidden = false
            this.attr.background.color2.hidden = false
            this.attr.background.color3.hidden = false
          }
        }else if(propGroupName == 'text' && propName == 'comma'
              || propGroupName == 'text' && propName == 'value'){
          if(this.attr.text.comma.value == true){
            if(isNaN(this.attr.text.value.value)) { // text
              this.textValue = this.attr.text.value.value
            }else{ // number
              this.textValue = Intl.NumberFormat().format(this.attr.text.value.value)
            }
          }else{ 
            this.textValue = this.attr.text.value.value.toString()
          }
        }else if(propGroupName == 'text' && propName == 'decimalPlaces'
              || propGroupName == 'text' && propName == 'value'){
          if(isNaN(this.attr.text.value.value)) { // text
            this.textValue = this.attr.text.value.value
          }else{ // number
            var n2 = Math.pow(10.0, this.attr.text.decimalPlaces.value)
            this.textValue = Math.round(this.attr.text.value.value*n2)/n2
          }
        }
      },

      bindingValueChanged(propertyName, value)
      {
        if(propertyName.toString() == "tagId")
        {
          var tagValue = value.toString();
          this.textValue = tagValue;
          this.attr.state.currentState.value = tagValue;
        }
      }
    }
  }
</script>

<style scoped >
</style>
