import React from 'react'
import 'antd-mobile/dist/antd-mobile.css';
import { Http } from '../../Utils/help'
import { WhiteSpace, WingBlank, Card, Button } from 'antd-mobile';

const F2 = require('@antv/f2');
var alerttypeid,alerttypename;
export default class QualitySpc extends React.Component {
    constructor(props) {
        super(props);
        const { func } = this.props.location.state;
        this.QualityDate = this.QualityDate.bind(this);
        this.state = {
            func: func,
            // data: [],
            qualityDetail: [],
        }
    }

    //取得json数据集
    componentWillMount() {
        this.dataAjax = Http.getJSON2("ds/data/qualityspc/qualityspcratio");//qualityspcratio
    }

    componentDidUpdate() {

    }

    componentDidMount() {
        console.log("componentDidMount--");

        this.dataAjax.done((result) => {
            //console.log(result)
            try {

                var s1 = {
                    qualityspcno: 1,
                    data: result
                }
                var qualityDetail = new Array(1)
                qualityDetail[0] = s1
                //console.log(qualityDetail);
                this.setState(
                    {
                        qualityDetail: qualityDetail,
                        // qualityDetail: result,
                    }, () => {
                        this.chartRender();
                    }
                )
            } catch (error) {
                console.error(error.message);
                console.error(error.stack);
            }
        })
    }

    chartRender = () => {
        console.log("chartrender...")
        console.log(this.state.qualityDetail)
        try {
            this.QualityDate(this.state.qualityDetail)
        } catch (error) {
            console.error(error.message);
            console.error(error.stack);
        }

    }

    QualityDate = (qualityDetail) => {
        console.log("QualityDate---");
        qualityDetail.map((i, index) => {
            //F2 绘制图表
            //console.log(JSON.stringify(i.data))
            F2.Global.pixelRatio = window.devicePixelRatio;
            var chart = new F2.Chart({
                // id: 'quality',
                id: 'quality' + i.qualityspcno,
                // pixelRatio: window.devicePixelRatio
                padding: [10, 10, 20, 10] // 分别设置上、右、下、左边距
            });

            try {
                chart.source(i.data, {
                    ratio: {
                        formatter: function formatter(ratio) {
                            return ratio + '%';
                        }
                    }
                });

                chart.coord('polar', {  //启用极坐标
                    transposed: true,
                    innerRadius: 0.5,//设置内环半径(空心)
                    radius: 0.85
                });

                chart.axis(false);  //不渲染坐标轴
                chart.legend(false);    //不显示所有的图例
                chart.tooltip(false); //关闭 tooltip(提示信息)
                chart.guide().html({
                    position: ['50%', '50%'],
                    alignX: 'center',
                    html: '<div key="div1" style="width: 90px;height: 40px;text-align: center;line-height: 20px; word-break:normal;" id="textContent"></div>'
                });
                // console.log(i.data);
                // console.log(i.data[0]['alertall'])
                chart.interval().position('name*ratio').color('alerttypeid').adjust('stack').style({
                    lineWidth: 1,
                    stroke: '#fff',
                    lineJoin: 'round',
                    lineCap: 'round'
                }).animate({
                    appear: {
                        duration: 1200,//动画执行时间，单位ms
                        easing: 'bounceOut' //动画缓动函数
                    }
                });
                chart.render();


                // 开始绘制文本
                var ANCHOR_OFFSET = 5; // 锚点偏移量
                var OFFSET = 18; // 连接线拐弯点偏移量
                var APPEND_OFFSET = 30; // 文本同 canvas 四边的偏移值
                var coord = chart.get('coord'); // 获取坐标系对象
                var center = coord.center; // 极坐标圆心坐标
                var r = coord.circleRadius; // 极坐标半径
                var canvas = chart.get('canvas'); // 获取 canvas 对象
                var canvasWidth = chart.get('width'); // 获取 canvas 的宽度

                var drawnLabels = []; // 用于存储被绘制的文本图形对象
                var labelGroup = canvas.addGroup(); // 用于存储文本以及文本连接线

                function _isOverlap(label1, label2) {
                    var label1BBox = label1.getBBox();
                    var label2BBox = label2.getBBox();
                    return Math.max(label1BBox.minX, label2BBox.minX) <= Math.min(label1BBox.maxX, label2BBox.minX) && Math.max(label1BBox.minY, label2BBox.minY) <= Math.min(label1BBox.maxY, label2BBox.maxY);
                }

                function _getEndPoint(center, angle, r) {
                    return {
                        x: center.x + r * Math.cos(angle),
                        y: center.y + r * Math.sin(angle)
                    };
                }

                // 绘制文本连接线
                function _drawLabelLine(label, labelGroup) {
                    var _anchor = label._anchor,
                        _router = label._router,
                        fill = label.fill,
                        y = label.y,
                        _side = label._side;

                    var lastPoint = {
                        x: _side === 'left' ? APPEND_OFFSET : canvasWidth - APPEND_OFFSET,
                        y: y
                    };

                    // 绘制锚点
                    labelGroup.addShape('Circle', {
                        attrs: {
                            x: _anchor.x,
                            y: _anchor.y,
                            r: 2,
                            fill: fill
                        }
                    });

                    // 绘制文本连接线
                    labelGroup.addShape('Polyline', {
                        attrs: {
                            points: [_anchor, _router, lastPoint],
                            lineWidth: 1,
                            stroke: fill
                        }
                    });
                }

                // 绘制文本
                function _drawLabel(label) {
                    var _data = label._data,
                        y = label.y,
                        _side = label._side;

                    var text = new F2.G.Shape.Text({
                        attrs: {
                            x: _side === 'left' ? APPEND_OFFSET : canvasWidth - APPEND_OFFSET,
                            y: y,
                            fontSize: 12, // 字体大小
                            fill: '#808080',
                            text: _data.alerttypeid + '\n' + _data.alertnumber.toFixed(2),
                            textBaseline: 'middle',
                            textAlign: _side === 'left' ? 'left' : 'right',
                            lineHeight: 16
                        },
                        origin: _data // 存储原始数据
                    });
                    return text;
                }

                // 查找被点击的 label
                function _findClickedLabel(point) {
                    var clickedShape = void 0;
                    for (var i = 0, len = drawnLabels.length; i < len; i++) {
                        var shape = drawnLabels[i];
                        var bbox = shape.getBBox();
                        if (point.x >= bbox.minX && point.x <= bbox.maxX && point.y >= bbox.minY && point.y <= bbox.maxY) {
                            clickedShape = shape;
                            break;
                        }
                    }

                    return clickedShape;
                }

                // 开始添加饼图的文本
                function addPieLabel(chart) {
                    labelGroup && labelGroup.clear();

                    // 获取 top5 的数据
                    var top5 = [];
                    var cloneData = i.data.concat([]);
                    cloneData.sort(function (obj1, obj2) {
                        return obj2.ratio - obj1.ratio;
                    });
                    cloneData.map(function (obj, index) {
                        if (index <= 5) {
                            top5.push(obj.alerttypeid);
                        }
                    });

                    var labels = []; // 存储要绘制的文本
                    // 获取文本的信息
                    var geom = chart.get('geoms')[0];
                    var shapes = geom.get('container').get('children');
                    shapes.forEach(function (shape) {
                        var shapeAttrs = shape.attr();
                        var origin = shape.get('origin');
                        if (top5.indexOf(origin._origin.alerttypeid) !== -1) {
                            // 只展示 top5 的文本
                            var startAngle = shapeAttrs.startAngle,
                                endAngle = shapeAttrs.endAngle;

                            var middleAngle = (startAngle + endAngle) / 2;
                            var edgePoint = _getEndPoint(center, middleAngle, r + ANCHOR_OFFSET);
                            var routerPoint = _getEndPoint(center, middleAngle, r + OFFSET);
                            var label = {
                                _anchor: edgePoint,
                                _router: routerPoint,
                                _data: origin._origin,
                                x: routerPoint.x,
                                y: routerPoint.y,
                                r: r + OFFSET,
                                fill: origin.color // 字体颜色
                            };
                            // 判断文本的方向
                            if (edgePoint.x < center.x) {
                                label._side = 'left';
                                labels.push(label);
                            } else {
                                label._side = 'right';
                                labels.push(label);
                            }
                        }
                    });

                    var last_label = void 0; // 存储上一个 label 对象，用于检测文本是否重叠
                    for (var j = 0; j < labels.length; j++) {
                        var label = labels[j];
                        var labelShape = _drawLabel(label); // 绘制文本图形对象

                        if (last_label) {
                            if (_isOverlap(labelShape, last_label)) {
                                // 重叠了就不绘制
                                continue;
                            }
                        }
                        drawnLabels.push(labelShape);

                        labelGroup.add(labelShape);
                        _drawLabelLine(label, labelGroup);
                        last_label = labelShape;
                    }

                    canvas.draw();
                }

                addPieLabel(chart);
                // 绑定事件
                $('#quality' + i.qualityspcno).on('touchstart', function (ev) {
                    var point = {};
                    var touches = ev.targetTouches;
                    if (touches && touches.length > 0) {
                        point.x = touches[0].clientX;
                        point.y = touches[0].clientY;
                    } else {
                        point.x = ev.clientX;
                        point.y = ev.clientY;
                    }
                    var canvasPoint = F2.Util.getRelativePosition(point, canvas);
                    var pieData = chart.getSnapRecords(canvasPoint);
                    var clickedLabel = _findClickedLabel(canvasPoint);

                    if (pieData.length) {
                        $('#textContent').text((pieData[0]._origin.alerttypeid + '  ' + pieData[0]._origin.ratio + '%'));
                        console.log("pieData")
                        alerttypeid = pieData[0]._origin.alerttypeid;
                        alerttypeid = pieData[0]._origin.alerttypeid;
                    }

                    if (clickedLabel) {
                        $('#textContent').text((clickedLabel.get('origin').alerttypeid + '  ' + clickedLabel.get('origin').ratio + '%'));
                        console.log("clickedLabel")
                        alerttypeid = clickedLabel.get('origin').alerttypeid;
                        alerttypeid = clickedLabel.get('origin').alerttypeid;
                    }
                });

                // ================= 改变数据 ========================
                function randomData(data) {
                    data.map(function (obj) {
                        obj.ratio = Math.random();
                        return obj;
                    });
                    return data;
                }
                $('#changeData').on('click', function () {
                    chart.changeData(randomData(data));
                    setTimeout(function () {
                        drawnLabels = [];
                        addPieLabel(chart);
                    }, 350); // 必须在更新动画结束之后再绘制，默认的更新时间是 300
                });

            } catch (error) {
                console.error(error.message);
                console.error(error.stack);
            }
        }, this)
    }

    render() {
        return (
            //map循环增加div，处理警告：Each child in an array or iterator should have a unique "key" prop.
            <div key={"topdiv"} style={{ height: '100%' }}>
                {this.state.qualityDetail.map((i, index) => (
                    <div key={i.qualityspcno}> 
                        <WingBlank size="lg">
                            <WhiteSpace size="lg" />
                            <Card>
                                <Card.Header
                                    title={"15天警报分析  \n 总数：" + i.data[0]['alertall']}
                                    extra={
                                        <Button disabled={!(i.data instanceof Array)} type="ghost" size="small" inline onClick={() => {
                                            // console.log("onClick")
                                            // console.log(alerttypeid+"~~"+i.data[0]['alerttypeid']);

                                            // if(alerttypeid){
                                            //     console.log("alerttypeid not underfined" + alerttypeid)
                                            // }
                                            //有选择对应的警报类型，则可点击明细按钮
                                            // if(null != alerttypeid && ''!=alerttypeid){
                                                console.log(alerttypeid);
                                                const { history } = this.props;
                                                history.push({
                                                    pathname: '/qualityspcdetail',
                                                    state: {
                                                        func: this.state.func,
                                                    //     alerttypeid: alerttypeid,
                                                    //     alerttypename:alerttypename,
                                                    //     //name: i.machinename,
                                                    //     data: i.data
                                                    }
                                                })
                                                alerttypeid=''
                                            // }
                                        }}>明细</Button>
                                    }
                                />
                                <Card.Body>
                                    <div key={"bodydiv"} style={{ width: "100%", height: "200px", margin: "0 auto" }}>
                                        <canvas id={"quality" + (i.qualityspcno)} style={{ width: "100%", height: "100%" }}></canvas>
                                    </div>
                                </Card.Body>
                            </Card>
                        </WingBlank>
                    </div>

                ))}

                <WhiteSpace size="lg" />
            </div>
        )
    }

}