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

<script>
import stylec from './style.vue';
import echarts from 'echarts';
// import { on, off } from "@/libs/tools";
const WIDGET_NAME = 'echarts-proloop';
var ydata = [{
  name: '一营采集率',
  value: 20
},
{
  name: '一营未采集率',
  value: 80,
  label: {
    show: false
  }
}
];
const option = {
  backgroundColor: '#2c4a81',
  title: {
    text: '',
    left: '29.8%',
    top: '60%',
    textAlign: 'center',
    textStyle: {
      fontFamily: 'Microsoft YaHei',
      fontWeight: 'normal',
      fontSize: '16',
      color: '#AAAFC8',
      textAlign: 'center'
    }
  },
  series: [{
    name: '采集率统计',
    type: 'pie',
    clockwise: true, // 饼图的扇区是否是顺时针排布
    minAngle: 20, // 最小的扇区角度（0 ~ 360）
    radius: ['60%', '80%'],
    center: ['50%', '50%'],
    avoidLabelOverlap: false,
    color: ['#269885', {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 1,
        color: 'rgba(4, 0, 0, 0.3)' // 0% 处的颜色
      }, {
        offset: 0,
        color: 'rgba(255, 255, 255, 0.3)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }],
    itemStyle: { // 图形样式
      borderColor: '#2c4a81',
      borderWidth: 10,
      shadowColor: 'rgba(4, 0, 0, 0.3)',
      shadowBlur: 0,
      shadowOffsetX: 0,
      shadowOffsetY: 8
    },
    label: {
      normal: {
        show: true,
        position: 'center',
        formatter: '{value|{d}}{per|%}\n{text|{b}}',
        rich: {
          value: {
            color: '#bdd9ff',
            fontSize: 42,
            align: 'center',
            verticalAlign: 'middle'
          },
          per: {
            color: '#bdd9ff',
            fontSize: 18,
            verticalAlign: 'middle'
          },
          text: {
            color: '#bdd9ff',
            fontSize: 18,
            align: 'center',
            verticalAlign: 'middle',
            padding: 5
          }

        }
      },
      emphasis: {
        show: true,
        textStyle: {
          fontSize: 46
        }
      }
    },
    data: ydata
  }]
};

export default {
  name: WIDGET_NAME,
  props: ['h', 'val', 'playState', 'w'],
  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
      }
    };
  },
  icon: {
    type: 'md-magnet'
    // type: "md-ionic"
  },
  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
  },
  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.proloop);
          this.dom.setOption(newValue.option);
          this.dom.resize()
        });
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.proloop);
      this.dom.setOption(this.val.option);
      // on(window, "resize", this.resize);
    });
  },
  beforeDestroy () {
    // off(window, "resize", this.resize);
  },
  methods: {
    // resize() {
    //   this.dom.resize();
    // }
  }
};
</script>

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