import React,{PureComponent} from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css'; 

const F2 = require('@antv/f2');

export default class F2Gauge extends PureComponent {
    
    componentDidMount() {
        this.renderChart(this.props.data);
    }

    componentWillReceiveProps(nextProps) {
        if (!this.equal(this.props, nextProps)) {
        this.renderChart(nextProps.data);
        }
    }


  componentWillUnmount() {
    if (this.chart) {
      this.chart.destroy();
    }
  } 
    renderChart(gdata){
        const Shape = F2.Shape;
        const G = F2.Graphic;

        const data = [{pointer: gdata?gdata.title:"",value: gdata?gdata.value:0, length:2,y:1.01}];
 
        //自定义绘制数据的的形状      
        Shape.registerShape('point', 'dashBoard', {
            getPoints:function(cfg){
            const x = cfg.x;
            const y = cfg.y;

            return [
                {x: x, y: y},
                {x: x, y: 0.45}
            ];
            },
            draw: function(cfg, canvas){
            let point1 = cfg.points[0];
            let point2 = cfg.points[1];
            point1 = this.parsePoint(point1);
            point2 = this.parsePoint(point2);
 
            var line = canvas.addShape('Polyline', {
                attrs: {
                  points: [point1, point2],
                  stroke: '#18b7d6',
                  lineWidth: 2
                }
              });
          
              
              var text = cfg.origin._origin.value?cfg.origin._origin.value.toString():"0";
              var text1 = canvas.addShape('Text', {
                attrs: {
                  text: text + '%',
                  x: cfg.center.x,
                  y: cfg.center.y,
                  fill: '#f75b5b',
                  font:'14px Arial',
                  textAlign: 'center',
                  textBaseline: 'bottom'
                }
              });

              var text2 = canvas.addShape('Text', {
                attrs: {
                  text: cfg.origin._origin.pointer,
                  x: cfg.center.x,
                  y: cfg.center.y,
                  fillStyle: '#aaa',
                  textAlign: 'center',
                  font:'12px Arial',
                  textBaseline: 'top'
                }
              });
          
              return [line, text1, text2];
            }

       
        });

        const chart = new F2.Chart({
            id: 'gauge100',
            width: 150,
            height: 150,
            padding: [ 0, 40, 20,10 ]
        });
        chart.source(data, {
            'value': {
            type: 'linear',
            min: 0,
            max: 15,
            ticks: [0, 25, 50, 75, 100,125],
            nice: false
            },
            'length': {type: 'linear',min: 0,max: 10},
            y: {type: 'linear',min: 0, max: 1}
        });

        chart.coord('polar',{
            inner: 0,
            startAngle: -1.01 * Math.PI,
            endAngle: 0.01 * Math.PI
        });

        //配置value轴刻度线
        chart.axis('value', {
            tickLine: {
                strokeStyle: '#b9e6ef',
                lineWidth: 2,
                value: -5
            },
            label: null,
            grid: null,
            line: null
        });

        chart.axis('y', false);

        //绘制仪表盘辅助元素
        chart.guide().arc({
            start:[0,1.05],
            end:[73,1.05],
            style:{ 
            strokeStyle: '#18b7d6',
            lineWidth:5,
            lineCap: 'round'
          }
        });
        chart.guide().arc({
            start:[77,1.05],
            end:[98,1.05],
            style:{ 
            strokeStyle: '#ffff00',
            lineWidth:5,
            lineCap: 'round'
        }
        });
        chart.guide().arc({
            start:[102,1.05],
            end:[125,1.05],
            style:{ 
            strokeStyle: '#00ff00',
            lineWidth:5,
            lineCap: 'round'
        }
        });
        chart.guide().arc({
            start:[0,1.2],
            end:[125,1.2],
            style:{ 
            strokeStyle: '#ccc',
            lineWidth:1
           }
        });

        chart.guide().text({
            position:[-4,0.7],
            content: '0.00%', 
            style:{
            fillStyle: '#ccc',
            font:'10px Arial',
            textAlign: 'center'
           }
        });
        chart.guide().text({
            position:[75,0.7],
            content: '75%',
            style: {
            fillStyle: '#ccc',
            font:'10px Arial',
            textAlign: 'center'
        }
        });
        chart.guide().text({
            position:[100,0.7], 
            content:'100%',
            style: {
            fillStyle: '#ccc',
            font:'10px Arial',
            textAlign: 'center'
        }
        });
        chart.guide().text({
            position:[129,0.7], 
            content:'125%',
            style: {
            fillStyle: '#ccc',
            font:'10px Arial',
            textAlign: 'center'
        }
        });

        chart.point().position('value*y').size('length').color('#18b7d6').shape('dashBoard');
        chart.render(); 
    } 
    
    equal(old, target) {
        let r = true;
        for (const prop in old) {
            if (typeof old[prop] === 'function' && typeof target[prop] === 'function') {
            if (old[prop].toString() != target[prop].toString()) {
                r = false;
            }
            } else if (old[prop] != target[prop]) {
            r = false;
            }
        }
        return r;
    }
    render() { 
        return (
            <div style ={{overflow: 'hidden',height:'80px'}}>
            <canvas id='gauge100'> 
            </canvas>
            </div>
        );
    }
}