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

<script>
import stylec from "./style.vue";
import echarts from "echarts";
// import { on, off } from "@/libs/tools";
const WIDGET_NAME = "echarts-probar";

var data = [70]
const  option = {
    backgroundColor: '#0e2147',
    title: {
        text: '完成度',
        show: false
    },
    xAxis: {
        show: false
    },
    yAxis: [{
        show: false,
        data: []
    }, {
        show: false,
        data: []
    }],
    series: [{
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 30,
        itemStyle: {
            normal: {
                color: '#3DE7C9',
                
            }},
             label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}%'
                }},
    }, {
        name: '框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [100],
        barWidth: 40,
        itemStyle: {
            normal: {
                color: 'none',
                borderColor: '#3DE7C9',
                borderWidth: 5,
                barBorderRadius: 5,
            }
        }
    },]
};
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-battery-full"
  },
  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.probar);
          this.dom.setOption(newValue.option);
          this.dom.resize()
        });
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    }
  },
  methods: {
    // resize() {
    //   this.dom.resize();
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.probar);
      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>
