"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var D3Chart_1 = require("../D3Chart");
var ToolTip_1 = require("../common/ToolTip");
var PieOptions_1 = require("./PieOptions");
var d3 = require("d3");
var _ = require("lodash");
var utils_1 = require("../../utils");
var arc = d3.arc();
/**
 * 双层相关环圈图
*/
var default_1 = /** @class */ (function (_super) {
    __extends(default_1, _super);
    function default_1() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.__ClassName = '_vc_pie';
        _this.innerRadius = 0;
        _this.outerRadius = 0;
        _this.radius = 18;
        _this.padding = 18;
        _this.layout = null;
        return _this;
    }
    default_1.prototype.init = function () {
        if (_.has(this.props, 'radius')) {
            this.radius = this.props.radius;
        }
        if (_.has(this.props, 'padding')) {
            this.padding = this.props.padding;
        }
    };
    default_1.prototype.sort = function () {
        var _a;
        var _this = this;
        this.layout = PieOptions_1.getLayout(this.props.legend, this.WIDTH, this.HEIGHT);
        this.outerRadius = (this.layout.layout.w - this.padding) / 2;
        this.innerRadius = this.outerRadius - this.radius;
        this.innerRadius = this.innerRadius < 0 ? 0 : this.innerRadius;
        var list = _.orderBy(_.filter(this.props.data, function (d) { return d[_this.props.valueField] > 0; }), this.props.valueField, 'desc');
        this.DATA = d3.pie().value(function (d) { return d[_this.props.valueField]; })(list);
        if (this.DATA.length == 0) {
            this.DATA = [{
                    __EMPTY: true, index: 0, value: 0, startAngle: 0, endAngle: Math.PI * 2, data: (_a = {}, _a[this.props.labelField] = '无数据', _a[this.props.valueField] = 0, _a)
                }];
        }
        if (_.sumBy(this.DATA, 'value') == 0 && this.DATA.length > 0) {
            var size = this.DATA.length;
            var angle_1 = Math.PI / size * 2;
            this.DATA.map(function (item, i) {
                item.startAngle = i * angle_1;
                item.endAngle = (i + 1) * angle_1;
            });
        }
    };
    default_1.prototype.build = function () {
        this.SVG.append('g').attr('class', '_group_pies');
        this.SVG.append('g').attr('class', '_group_legend');
        this.SVG.append('g').attr('class', '_group_tip');
        if (!this.props.hoverTip) {
            var txtGroup = this.SVG.select('g._group_tip');
            var layout = this.layout.layout;
            txtGroup.append('text')
                .attr('class', '_title')
                .attr('x', layout.x + layout.w / 2)
                .attr('y', layout.y + layout.h / 2 - 8)
                .text(this.FormatLabel(this.DATA[0].data[this.props.labelField]));
            txtGroup.append('text')
                .attr('class', '_value high')
                .attr('x', layout.x + layout.w / 2)
                .attr('y', layout.y + layout.h / 2 + 20)
                .text(this.FormatValue(this.DATA[0].data[this.props.valueField]));
            txtGroup.append('text')
                .attr('class', '_percent')
                .attr('x', layout.x + layout.w / 2)
                .attr('y', layout.y + layout.h / 2 + 40)
                .text(utils_1.Format.formatDecimal((this.DATA[0].endAngle - this.DATA[0].startAngle) * 100 / Math.PI / 2) + '%');
            this.SVG.selectAll('g._item').classed('active', false);
            this.SVG.selectAll('g._item_0').classed('active', true);
        }
        this.update();
    };
    default_1.prototype._showTip = function (d) {
        if (this.props.hoverTip) {
            if (this.props.tip) {
                ToolTip_1.default.show(this.props.tip(d.data));
            }
            else {
                ToolTip_1.default.show("<h2>" + this.FormatLabel(d.data[this.props.labelField]) + "</h2><p class=\"vapfont\">" + this.FormatValue(d.data[this.props.valueField]) + "</p>");
            }
        }
        else {
            this.SVG.select('._group_tip ._title').text(this.FormatLabel(d.data[this.props.labelField]));
            this.SVG.select('._group_tip ._value').text(this.FormatValue(d.data[this.props.valueField]));
            this.SVG.select('._group_tip ._percent').text(utils_1.Format.formatDecimal((d.endAngle - d.startAngle) * 100 / Math.PI / 2) + '%');
        }
    };
    default_1.prototype.update = function () {
        var _this = this;
        var pieGroup = this.SVG.select('g._group_pies');
        var legendGroup = this.SVG.select('g._group_legend');
        var layout = this.layout.layout;
        var nest = this.layout.nest;
        var isHorizontal = this.layout.isHorizontal;
        var group = pieGroup.selectAll('g._item').data(this.DATA, function (d) { return _this.FormatLabel(d.data[_this.props.labelField]); });
        var enter = group.enter()
            .append('g')
            .attr('class', function (d, i) { return _this.itemClass(d, i); });
        enter.merge(group)
            .attr('transform', "translate(" + (layout.x + layout.w / 2) + "," + (layout.y + layout.h / 2) + ")");
        enter.append('path')
            .merge(group.select('path'))
            .transition()
            .duration(this.DURATION)
            .attrTween("d", function (d) {
            return function (t) {
                return arc({
                    startAngle: d.startAngle,
                    endAngle: d.startAngle + (d.endAngle - d.startAngle) * t,
                    innerRadius: _this.innerRadius,
                    outerRadius: _this.outerRadius
                });
            };
        });
        var legGroup = legendGroup
            .selectAll('g._item')
            .data(this.DATA, function (d) { return _this.FormatLabel(d.data[_this.props.labelField]); });
        var legendEnter = legGroup.enter()
            .append('g')
            .attr('class', function (d, i) { return _this.itemClass(d, i); });
        legendEnter.merge(legGroup)
            .attr('class', function (d, i) { return _this.itemClass(d, i); })
            .attr("transform", function (d) {
            if (isHorizontal) {
                var x = nest.x == 0 ? 12 : nest.x;
                var y = nest.y + 6 + 24 * d.index;
                return "translate(" + x + "," + y + ")";
            }
            else {
                var x = nest.x == 0 ? 12 : nest.x;
                if (d.index % 2 == 1) {
                    x += layout.w / 2;
                }
                var y = nest.y + 6 + 24 * Math.floor(d.index / 2);
                return "translate(" + x + "," + y + ")";
            }
        });
        legendEnter.append("rect")
            .merge(legGroup.select('rect'))
            .attr("x", 6)
            .attr("y", 6)
            .attr("rx", 5)
            .attr("width", 20)
            .attr("height", 12);
        legendEnter.append("text")
            .merge(legGroup.select('text'))
            .attr("x", 30)
            .attr("y", 16)
            .text(function (d) { return _this.FormatLabel(d.data[_this.props.labelField]); });
        this.SVG.select('._group_tip ._title').text(this.FormatLabel(this.DATA[0].data[this.props.labelField]));
        this.SVG.select('._group_tip ._value').text(this.FormatValue(this.DATA[0].data[this.props.valueField]));
        this.SVG.select('._group_tip ._percent').text(utils_1.Format.formatDecimal((this.DATA[0].endAngle - this.DATA[0].startAngle) * 100 / Math.PI / 2) + '%');
        enter.on('mouseover', function (d, i) {
            _this.SVG.selectAll('g._item').classed('active', false);
            _this.SVG.selectAll('g._item_' + i).classed('active', true);
            _this._showTip(d);
        }).on('mouseout', function () {
            ToolTip_1.default.hide();
        });
        legendEnter.on('mouseover', function (d, i) {
            _this.SVG.selectAll('g._item').classed('active', false);
            _this.SVG.selectAll('g._item_' + i).classed('active', true);
            _this._showTip(d);
        }).on('mouseout', function () {
            ToolTip_1.default.hide();
        });
        if (this.props.onClick) {
            enter.on('click', function (d) {
                if (!_.has(d, '__EMPTY')) {
                    _this.props.onClick(d.data);
                }
            });
            legendEnter.on('click', function (d) {
                if (!_.has(d, '__EMPTY')) {
                    _this.props.onClick(d.data);
                }
            });
        }
        group.exit().remove();
        legGroup.exit().remove();
    };
    return default_1;
}(D3Chart_1.default));
exports.default = default_1;
