<!--
  水位图
-->
<template>
<!--  <div id="widget-water-pond-level" :style="styleObj">-->
    <dv-water-level-pond :config="options" :style="styleObj"/>
<!--  </div>-->
</template>
<script>
import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
import Vue from "vue";
import {mapState} from "vuex";
Vue.use(waterLevelPond)
export default {
  name: "WidgetWaterLevelPond",
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      //返回图标数据
      options: {
        data:[20],//水位位置
        shape:'rect',//水位图形状
        colors: [],//水位图配色
        waveNum: 3,//波浪数量
        waveHeight: 40,//波浪高度
        waveOpacity: 40,//波浪透明度
        formatter: '{value}%'//信息格式化
      },
      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.setOptionsColor();
      //数据修改
      this.setOptionsData();

    },
    // 颜色修改
    setOptionsColor() {
      const optionsSetup = this.optionsSetup;
      const customColor = optionsSetup.customColor;
      if (!customColor) return;
      const arrColor = [];
      for (let i = 0; i < customColor.length; i++) {
        arrColor.push(customColor[i].color);
      }
      this.options.colors = arrColor;
      this.options = Object.assign({}, this.options);
    },
    //水位位置
    showText() {
      const {slectedDataType,waterLevelPondDataText} = this.optionsSetup;
      let datav = this.staticData[slectedDataType] || waterLevelPondDataText;
      let dataArray = datav.toString().split(",");
      this.options.data = dataArray;
    },
    // 数据修改
    setOptionsData() {
      const optionsSetup = this.optionsSetup;
      this.options.shape=optionsSetup.shape;//水位图形状
      this.options.waveHeight=optionsSetup.waveHeight;//波浪高度
      let waveOpacity = optionsSetup.waveHeight||0;
      this.options.waveOpacity= waveOpacity/100;//波浪透明度
      this.options.formatter = optionsSetup.formatter;
      this.options.waveNum = optionsSetup.waveNum;//波浪数量
      this.options={...this.options};
    },

  }
};

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