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 F2GaugeH 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);
            
            G.drawLines([point1, point2], canvas, {
                stroke: '#18b7d6',
                lineWidth: 2
            });

            const text = cfg.origin._origin.value?cfg.origin._origin.value.toString():"";
                G.drawText(text+'%', cfg.center, canvas, {
                    fillStyle: '#f75b5b',
                    font:'14px Arial',
                    textAlign: 'center',
                    textBaseline: 'bottom'
                });

                G.drawText(cfg.origin._origin.pointer, cfg.center, canvas, {
                    fillStyle: '#aaa',
                    textAlign: 'center',
                    font:'12px Arial',
                    textBaseline: 'top'
                });

            
            }
        }
    );

        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],
            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([0,1.05],[73,1.05],{ 
            strokeStyle: '#18b7d6',
            lineWidth:5,
            lineCap: 'round'
        });
        chart.guide().arc([77,1.05],[98,1.05],{ 
            strokeStyle: '#00ff00',
            lineWidth:5,
            lineCap: 'round'
        });
        
        chart.guide().arc([0,1.2],[100,1.2],{ 
            strokeStyle: '#ccc',
            lineWidth:1
        });

        chart.guide().text([-4,0.7], '0.00%', {
            fillStyle: '#ccc',
            font:'10px Arial',
            textAlign: 'center'
        });
        chart.guide().text([75,0.7], '75%', {
            fillStyle: '#ccc',
            font:'10px Arial',
            textAlign: 'center'
        });
        chart.guide().text([104,0.7], '100%', {
            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>
        );
    }
}