<template>
  <div class="text" :style="styleColor"  v-if="isRouterAlive" v-html="showText" ></div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "WidgetText",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      options: {},
      optionsData: {},
      flagInter: null,
      isRouterAlive:true,
      showText:''
    };
  },
  beforeDestroy() {
    clearInterval(this.flagInter);
  },
  computed: {
    ...mapState('dataSource', ['staticData','staticRefreshTime']),
    transStyle() {
       const obj = this.objToOne(this.options);
       const {text, slectedDataType} = obj;
       const val = this.staticData[slectedDataType] || text;
       this.showText = val;
       return obj;
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        color: this.transStyle.color,
        "font-weight": this.transStyle.fontWeight,
        text: this.transStyle.text,
        "font-size": this.transStyle.fontSize + "px",
        "letter-spacing": this.transStyle.letterSpacing + "em",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        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"
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.setOptionsData();
      },
      deep: true
    },
  },
  mounted() {
    this.options = this.value;
    this.optionsData = this.value.data;
    //设置定时器
    this.setOptionsData();
  },
  methods: {
    // 数据解析
    setOptionsData() {
      const {slectedDataType} = this.transStyle;
      if(this.isNotBlank(slectedDataType)){
          const refreshTime = this.staticRefreshTime || 300000;
          this.dynamicDataFn(refreshTime);
      }
    },
    setShowTextRolad(){
      this.setShowText();
      this.reload();
    },
    setShowText() {
      const {text, slectedDataType} = this.transStyle;
      const val = this.staticData[slectedDataType] || text;
      this.showText = val;
    },
    // vue hack 之强制刷新组件
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(function(){
        this.isRouterAlive=true;
      })
    },
    dynamicDataFn(refreshTime) {
      if (this.ispreview) {
        this.flagInter = setInterval(() => {
          this.getEchartData();
        }, refreshTime);
      } else {
        this.getEchartData();
      }
    },
    getEchartData() {
      this.setShowTextRolad();
    }
  }
};
</script>

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