<template>
  <div>
    <hr />
    
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">数字数值</div>
      <div class="panel-value" >
          <Input v-model="number" @on-change="numberChange(number)"/>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">内容模版</div>
      <div class="panel-value">
          <Input v-model="activeElement.config1.content" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">小数位数</div>
      <div class="panel-value">
        <Input v-model="activeElement.config1.toFixed" />
      </div>
    </div>
    
    
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">水平对齐方式</div>
      <div class="panel-value">
        <Input v-model="activeElement.config1.textAlign" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">行间距</div>
      <div class="panel-value">
        <Input v-model="activeElement.config1.rowGap" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">样式配置</div>
      <div class="panel-value">
        <Input v-model="style" @on-change="styleChange(style)"/>
      </div>
    </div>

    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">动效曲线</div>
      <div class="panel-value">
        <Input v-model="activeElement.config1.animationCurve" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">动效帧数</div>
      <div class="panel-value">
        <Input v-model="activeElement.config1.animationFrame" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">数字数值</div>
      <div class="panel-value" >
          <Input v-model="number2" @on-change="number2Change(number2)"/>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">内容模版</div>
      <div class="panel-value">
          <Input v-model="activeElement.config2.content" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">小数位数</div>
      <div class="panel-value">
        <Input v-model="activeElement.config2.toFixed" />
      </div>
    </div>
    
    
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">水平对齐方式</div>
      <div class="panel-value">
        <Input v-model="activeElement.config2.textAlign" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">行间距</div>
      <div class="panel-value">
        <Input v-model="activeElement.config2.rowGap" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">样式配置</div>
      <div class="panel-value">
        <Input v-model="style2" @on-change="style2Change(style2)"/>
      </div>
    </div>

    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">动效曲线</div>
      <div class="panel-value">
        <Input v-model="activeElement.config2.animationCurve" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">动效帧数</div>
      <div class="panel-value">
        <Input v-model="activeElement.config2.animationFrame" />
      </div>
    </div>
  </div>
  </div>
  
</template>

<script>
export default {
  name: "DataVDigitalflopStyle",
  props: ["activeElement"],
  data() {
    return {
        number:JSON.stringify(this.activeElement.config1.number),
        style:JSON.stringify(this.activeElement.config1.style),
        
        number2:JSON.stringify(this.activeElement.config2.number),
        style2:JSON.stringify(this.activeElement.config2.style),
    };
  },
  methods: {
    styleChange(newCode) {
      this.activeElement.config1.style = JSON.parse(newCode);
      this.$parent.$vpd.commit("updateWidgets", this.activeElement);
    },
    numberChange(newCode) {
      this.activeElement.config1.number = JSON.parse(newCode);
      this.$parent.$vpd.commit("updateWidgets", this.activeElement);
    },
    style2Change(newCode) {
      this.activeElement.config2.style = JSON.parse(newCode);
      this.$parent.$vpd.commit("updateWidgets", this.activeElement);
    },
    number2Change(newCode) {
      this.activeElement.config2.number = JSON.parse(newCode);
      this.$parent.$vpd.commit("updateWidgets", this.activeElement);
    },
  },
  created () {
      // console.log(this.data,typeof(this.data),8888)
      // console.log(this.colors,typeof(this.colors),8888)
  }
};
</script>
