<!--
  svg 图层
-->
<template>
  <div id="formStr" :class="['div_Style']"
       :style="styleColor" v-html="showText" v-if="isRouterAlive">
  </div>
</template>
<script>

import {mapState} from "vuex";
export default {
  name: "WidgetSvg",
  components: {
  },
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      options: {},
      svgData:[],
      optionsData: {},
      optionsSetUp: {},
      flagInter: null,
      isRouterAlive:true,
      showText:''
    };
  },
  beforeDestroy() {
    clearInterval(this.flagInter);
  },
  computed: {
    ...mapState('dataSource', ['staticData','staticRefreshTime']),
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      const styleColor = {
        position: this.ispreview ? "absolute" : "static",
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px"
      };
      const svg=this.getShowText();
      this.showText=svg;
      return styleColor;
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.optionsSetUp = val.setup;
        this.initData();
      },
      deep: true,
    },
  },
  mounted() {
    this.options = this.value;
    this.optionsData = this.value.data;
    this.setSvgValue();
  },
  methods: {
    initData() {
      this.handlerSvgData();
    },
    // vue hack 之强制刷新组件
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(function(){
        this.isRouterAlive=true;
      })
    },
    handlerSvgData(){
      const data = this.optionsSetUp.dynamicAddSvg;
      this.svgData = data;
    },
    //初始化设置SVG值
    setSvgValue(){
      const {slectedDataType} = this.transStyle;
      if(this.isNotBlank(slectedDataType)){
        const refreshTime = this.staticRefreshTime || 300000;
        this.dynamicDataFn(refreshTime);
      }
    },
    dynamicDataFn(refreshTime) {
      if (this.ispreview) {
        this.flagInter = setInterval(() => {
          this.getEchartData();
        }, refreshTime);
      } else {
        this.getEchartData();
      }
    },
    getEchartData() {
      const svg = this.getShowText();
      this.showText=svg;
      this.reload();
    },
    getShowText() {
      const {text, slectedDataType} = this.transStyle;
      const key = this.staticData[slectedDataType] || text;
      for (let i = 0; i < this.value.setup.dynamicAddSvg.length; i++) {
        if(this.value.setup.dynamicAddSvg[i].key==key){
          /** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置  */
          /** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
            //设置svg 自适应  添加属性 viewBox="0,0,640,480"
          return this.value.setup.dynamicAddSvg[i].value;
        }
      }
      return "";
    },
  }
};
</script>

<style scoped lang="scss">
.div_Style {
  width: 100%;
  height: 100%;
}
</style>
