<template>
  <div id="dx" class="breathe-zc"></div>
  <!--  <div id="cz" class="breathe-zc"></div>-->
  <!--  <div id="dmt" class="breathe-yc"></div>-->
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "WidgetText",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {},
      optionsData: {}
    };
  },
  computed: {
    ...mapState('dataSource', ['staticData']),
    transStyle() {
      return this.objToOne(this.options);
    },
    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"
      };
    },
    showText() {
      const {text, slectedDataType} = this.transStyle;
      return this.staticData[slectedDataType] || text;
    }
  },
  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 optionsData = this.optionsData; // 数据类型 静态 or 动态
      if (optionsData.dataType == "dynamicData") {
        this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
      };
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then(res => {
        this.styleColor.text = res[0].value;
        this.$forceUpdate();
      });
    }
  }
};
</script>

<style scoped lang="scss">
/*resize*/
.breathe-zct{ position:relative; width:20px; height:20px; top:2px;float:left;  border:1px solid #008000; border-radius:20px; color:#fff; font-size:10px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#00FF00));
  background-image: -moz-linear-gradient(#00FF00,#00FF00);
}

.breathe-yct{ position:relative; width:20px; height:20px; top:2px;float:left;   border:1px solid #008000; border-radius:20px; color:#fff; font-size:20px;  cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));
  background-image: -moz-linear-gradient(#FF0000,#FF0000);
}

.breathe-zc{ position:relative; width:20px; height:20px; margin:10px auto; line-height:40px; border:1px solid #008000; border-radius:10px; color:#fff; font-size:20px; text-align:center; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#00FF00));
  background-image: -moz-linear-gradient(#00FF00,#00FF00);
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation:ease-in-out breathe 500ms infinite alternate;
}
@keyframes breathe{
  0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
  100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
@-webkit-keyframes breathe {
  0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
  100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}

.breathe-yc{ position:relative; width:20px; height:20px; margin:10px auto; line-height:40px; border:1px solid #008000; border-radius:10px; color:#fff; font-size:20px; text-align:center; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF0000));
  background-image: -moz-linear-gradient(#FF0000,#FF0000);
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation:ease-in-out breathe 100ms infinite alternate;
}
@keyframes breathe{
  0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
  100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
@-webkit-keyframes breathe {
  0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
  100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}

</style>
