<template>
  <div class="center-cmp" :style="styleObj">
    <div class="cc-details" :style="detailsClass">
      <div class="textStyle" >设备总数</div>
      <div
        v-for="(dataValue, index) in options.data"
        :style="cardClass()"
        :key="index"
      >
       <dv-digital-flop :config="dataValue"></dv-digital-flop>
      </div>

<!--      //遍历数字插入-->
<!--      <div :style="cardClass()"><dv-digital-flop :config="options.data"></dv-digital-flop></div>-->
<!--      <div :style="cardClass()">3</div>-->
<!--      <div :style="cardClass2()">,</div>-->
<!--      <div :style="cardClass()">7</div>-->
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";
import {mapState} from "vuex";
Vue.use(digitalFlop);
export default {
  name: "WidgetDigitalFlopSingle",
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      //返回图标数据
      options: {
        data:[],
        cardClassJson:{},//文字边框字体设置
        cardClassJson2:{},//千位数符号设置
      },
      config:{},
      optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      optionsCollapse: {}, // 图标属性
      optionsSetup: {}
    };
  },
  computed: {
    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
      };
    },
    detailsClass() {
      return {
        height: this.optionsStyle.height+ "px",
      };
    },
  },
  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.setOptionsData();
      // //显示内容
      // this.showText();

      //字体样式
     // this.setFontStyle();
      this.getDataArray();
    },
    //单个文字样式
    cardClass() {
      let cardClassJson = {};
      cardClassJson["background-color"] = "#04318099";
      cardClassJson["height"] = "70px";
      cardClassJson["width"] = "70px";
      cardClassJson["border-radius"] = "35px";
      cardClassJson["line-height"] = "70px";
      cardClassJson["font-size"] = "45px";
      cardClassJson["font-weight"] = "bold";
      cardClassJson["text-align"] = "center";
      cardClassJson["margin"] = "10px";
      this.options.cardClassJson = cardClassJson;
     console.log(cardClassJson);
      return cardClassJson;
    },
    //千分符设置
    cardClass2() {
      let cardClassJson = {};
      //cardClassJson["background-color"] = "#04318099";
      cardClassJson["color"] = "#08e5ff";
      // cardClassJson["height"] = "70px";
      // cardClassJson["width"] = "70px";
      cardClassJson["font-size"] = "45px";
      cardClassJson["font-weight"] = "bold";
      // cardClassJson["line-height"] = "70px";
      // cardClassJson["text-align"] = "center";
      // cardClassJson["border-radius"] = "35px";
      cardClassJson["margin"] = "30px 0px 0px 0px";
      console.log(cardClassJson);
      return cardClassJson;
    },
    //获取数字
    getDataArray() {
      let dataArray = [];
      let data = {};
      data["number"]=[5];
      data["content"]="{nt}";
      data["toFixed"]=0;
      data["textAlign"]="center";
      data["rowGap"]=0;
      let fontStyle={};
      fontStyle["fontSize"]=45;
      // fontStyle["fontWeight"]="bold";
      // fontStyle["textAlign"]="center";
      fontStyle["fill"]="#08e5ff";
      data["style"]=fontStyle;
      data["animationCurve"]="easeOutCubic";
      data["animationFrame"]=50;
      dataArray.push(data);
      let data2 = {};
      data2["number"]=[3];
      data2["content"]="{nt}";
      data2["toFixed"]=0;
      data2["textAlign"]="center";
      data2["rowGap"]=0;
      data2["style"]=fontStyle;
      data2["animationCurve"]="easeOutCubic";
      data2["animationFrame"]=50;
      dataArray.push(data2);
      this.options.data={...dataArray};
    },

    //显示的内容
    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;
    },

    //千为分隔符
    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">

  .center-cmp {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
  }
  .cc-details {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .textStyle{
    color: #08e5ff;
    justify-content: center;
    font-size: 45px;
    font-weight: bold;
    line-height: 70px;
    text-align: left;
    margin: 10px;
  }
</style>
