<template>
  <div
    ref="panel"
    :style= "widgetStyle"
  />
</template>

<script>
import stylec from "./style.vue";
import echarts from "echarts";
// import { on, off } from "@/libs/tools";
const WIDGET_NAME = "echarts-panel";
const option = {
  backgroundColor: "#062a44",
  series: [{
    name: '刻度',
    type: 'gauge',
    radius: '90%',
    min:0,
    max:1000,
    splitNumber: 10, //刻度数量
    startAngle: 220,
    endAngle: -40,
    axisLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: [[1,'rgba(0,0,0,0)']]
      }
    },//仪表盘轴线
    axisLabel: {
      show: true,
      color:'#fff',
      distance:30
    },//刻度标签。
    axisTick: {
      show: true,
      lineStyle: {
        color: '#fff',
        width: 1
      },
      length: -8
    },//刻度样式
    splitLine: {
      show: true,
      length: -20,
      lineStyle: {
        color: '#fff'
      }
    },//分隔线样式
    detail: {
      show: false
    },
    pointer: {
      show: false
    }
  },
    {
      type: 'gauge',
      radius: '80%',
      center: ['50%', '50%'],

      splitNumber: 0, //刻度数量
      startAngle: 220,
      endAngle: -40,
      axisLine: {
        show: true,
        lineStyle: {
          width: 20,
          color: [
            [
              0.98, new echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{
              offset: 0,
              color: '#ae3df6'
            },
              {
                offset: 1,
                color: '#53bef9'
              }
            ]
              )
            ],
            [
              1, '#222e7d'
            ]
          ]
        }
      },
      //分隔线样式。
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      title: {
        show: true,
        offsetCenter: [0, '-20%'], // x, y，单位px
        textStyle: {
          color: '#ddd',
          fontSize: 15
        }
      },
      //仪表盘详情，用于显示数据。
      detail: {
        show: true,
        offsetCenter: [0, 0],
        color: '#ddd',
        formatter: function(params) {
        return params
        },
        textStyle: {
            fontSize: 20
        }
    },
    data: [{
        name: "当前用户总数",
        value: 9800
    }]
    }
  ]
};
export default {
  data() {
    return {
      dom: null,
      widgetStyle: {
         position: 'absolute',
          width: this.val.width + '%',
        height: this.val.height + '%',
        left: this.val.left + '%',
        top: this.val.top + '%',
          zIndex: this.val.z,
          backgroundColor: this.val.bgColor,
          backgroundImage: 'url(' + this.val.backPic + ')',
          color: this.val.color
      }
    };
  },
  name: WIDGET_NAME,
  icon: {
    type: "ios-speedometer"
  },
  title: "仪表盘",
  panel: stylec,
  setting: {
    type: WIDGET_NAME,
    isContainer: false,
    isUpload: false,
    hasGuide: true,
    isChild: true,
    draggable: true,
    resizable: true,
    name: "仪表盘",
    width: 30,
    height: 30,
    left: 10,
    top: 10,
    offsetLeft: 10,
    offsetTop: 10,
    offsetWidth: 100, // 父组件相对于page的百分比
    offsetHeight: 100, // 父组件相对于page的百分比
    z: 0,
    bgColor: "#fff",
    backPic: "",
    backPicUrl: "",
    color: "",
    text: "仪表盘",
    belong: "page",
    animationName: "",
    option: option,
    isEcharts: true
  },
  props: ["h", "val", "playState", "w"],
  watch: {
    val: {
      handler: function (newValue, oldval) {
        this.widgetStyle = {
          position: 'absolute',
          width: newValue.width + '%',
          height: newValue.height + '%',
          left: newValue.left + '%',
          top: newValue.top + '%',
          zIndex: newValue.z,
          backgroundColor: newValue.bgColor,
          backgroundImage: 'url(' + newValue.backPic + ')',
          color: newValue.color
        }
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.panel);
          this.dom.setOption(newValue.option);
          this.dom.resize()
        });
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    }
  },
  methods: {
    // resize() {
    //   this.dom.resize();
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.panel);
      this.dom.setOption(this.val.option);
      // on(window, "resize", this.resize);
    });
  },
  beforeDestroy() {
    // off(window, "resize", this.resize);
  }
};
</script>

<style scoped>
.lz-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
</style>

