<!--
数字翻牌器
-->
<template>
<!--  <div id="widget-digital-flop" :style="styleObj">-->
    <dv-digital-flop :config="options" :style="styleObj"/>
<!--  </div>-->
</template>
<script>

import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";
import {mapState} from "vuex";
import Vue from "vue";
Vue.use(digitalFlop);
export default {
  name: "WidgetDigitalFlop",
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      //返回图标数据
      options: {
        number:[],//数字数值
        content:'数字{nt}',//number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：实际显示效果：'数字1,数字2,数字3,数字4'
        toFixed: 0,//小数位数
        textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
        rowGap: 0,//行间距 当使用\n进行换行的时候，rowGap可以控制行间距
        style: {
          fontSize: 30,
          fill: '#3de7c9'
        },//可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小
        //formatter:this.formatterNum,//格式化数字	类型： Function,
        animationCurve: 'easeOutCubic',   //动效曲线
        animationFrame:50
      },
      config:{},
      optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      optionsCollapse: {}, // 图标属性
      optionsSetup: {}
    };
  },
  computed: {
    ...mapState('dataSource', ['staticData']),
    styleObj() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.optionsStyle.width + "px",
        height: this.optionsStyle.height + "px",
        left: this.optionsStyle.left + "px",
        top: this.optionsStyle.top + "px",
        background: this.optionsSetup.background
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsSetup = val.setup;
        this.editorOptions();
      },
      deep: true
    }
  },
  created() {
    this.optionsStyle = this.value.position;
    this.optionsData = this.value.data;
    this.optionsSetup = this.value.setup;
    this.editorOptions();
  },
  methods: {
    // 修改图标options属性
    editorOptions() {
      //显示内容
      this.showText();

      //数据修改
      this.setOptionsData();

      //字体样式
      this.setFontStyle();
    },

    //显示的内容
    showText() {
      const {slectedDataType,numberText} = this.optionsSetup;
      let datav = this.staticData[slectedDataType] || numberText;
      let dataArray = datav.toString().split(",");
      const numArray=[];
      if(this.isNotBlankArray(dataArray)){
        dataArray.forEach(num=>{
          numArray.push(parseInt(num));
        });
      }
      // console.log("返回数据number",numArray);
      this.options.number = numArray;
    },
    //字体修改
    setFontStyle() {
      const optionsSetup = this.optionsSetup;
      const fontStyle = {};
      fontStyle.fill=optionsSetup.fill;
      fontStyle.fontSize=optionsSetup.fontSize;
      fontStyle.fontWeight=optionsSetup.fontWeight;
      this.options.style = fontStyle;
    },
    //千为分隔符
    formatterNum (number) {
      const numbers = number.toString().split('').reverse();
      const segs = [];
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
      return segs.join(',').split('').reverse().join('');
    },
    // 数据修改
    setOptionsData() {

      const optionsSetup = this.optionsSetup;
      if(optionsSetup.isFormatterNum){
        this.options.formatter=this.formatterNum;
      }else{
        this.options.formatter=undefined;
      }
      this.options.isFormatterNum=optionsSetup.isFormatterNum;//千分位显示
      this.options.content=optionsSetup.content;
      this.options.toFixed=optionsSetup.toFixed;
      this.options.textAlign=optionsSetup.textAlign;
      this.options.animationFrame=optionsSetup.animationFrame;
     // const optionsDeep =this.deepClone(this.options);
      // console.log("返回数据options",optionsDeep);
      this.options={...this.options};
     // this.options=optionsDeep;
    },
  }
};

</script>
<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
