"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 _ = require("lodash");
var d3 = require("d3");
var D3Chart_1 = require("../D3Chart");
var utils_1 = require("../..//utils");
var common_1 = require("../common");
var Margin = 15;
var R = 45;
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_label _vc_label_horizontal';
        _this.formatTransition = null;
        return _this;
    }
    default_1.prototype.init = function () {
        this.formatTransition = common_1.Format.buildTransition(this.props.format);
    };
    default_1.prototype.build = function () {
        this.SVG.append('defs').html(common_1.DefUtil.BuildShadow());
        this.update();
    };
    // 更新数据
    default_1.prototype.update = function () {
        var _this = this;
        var valueField = this.props.valueField;
        var formatTransition = this.formatTransition;
        var itemWidth = Margin + R * 2;
        var maxWidth = this.DATA.length * itemWidth + Margin;
        var left = 0;
        var y = (this.HEIGHT - R * 2) / 2 + R;
        if (maxWidth < this.WIDTH) {
            left = (this.WIDTH - maxWidth) / 2;
            maxWidth = this.WIDTH;
        }
        this.SVG.attr('width', maxWidth);
        var sum = _.sumBy(this.DATA, this.props.valueField);
        if (sum == 0)
            sum += 0.01; //防止除0
        var group = this.SVG.selectAll('g._item')
            .data(this.DATA, function (d) { return d[_this.props.labelField]; });
        var enter = group.enter().append('g')
            .attr('class', '_item')
            .attr('transform', "translate(-100," + y + ")");
        enter.merge(group)
            .transition()
            .duration(this.DURATION)
            .attr('transform', function (d, i) { return "translate(" + (left + itemWidth * i + Margin + R) + "," + y + ")"; });
        enter.append('circle')
            .attr('cx', 0)
            .attr('cy', 0)
            .attr('r', R)
            .attr('class', '_bkg');
        enter.append('text')
            .text(function (d) { return d[_this.props.labelField]; })
            .attr('x', 0)
            .attr('y', this.props.percent ? -8 : 0)
            .attr('class', '_title');
        enter.append('text')
            .attr('x', 0)
            .attr('y', this.props.percent ? 10 : 18)
            .attr('class', '_value high')
            .attr('last', function (d) { return 0; })
            .text(function (d) { return 0; })
            .merge(group.select('text._value'))
            .transition()
            .duration(this.DURATION)
            .on('start', function (d) {
            var from = parseFloat(d3.select(this).attr('last'));
            var to = parseFloat(d[valueField]);
            d3.select(this).attr('last', d[valueField]);
            d3.active(this).tween('text', function () {
                var that = d3.select(this);
                return function (p) {
                    that.text(formatTransition(from, to, p));
                };
            });
        });
        enter.classed('_item_hover', _.has(this.props, 'onClick'));
        if (_.has(this.props, 'onClick')) {
            enter.on('click', function (d) { return _this.props.onClick(d); });
        }
        enter.on('mouseover', function (d) { return common_1.ToolTip.show(_this.props.tip ? _this.props.tip(d) :
            "<h2>" + d[_this.props.labelField] + "</h2>\n                <p class=\"vapfont\">" + _this.FormatValue(d[_this.props.valueField]) + " &nbsp;&nbsp; " + (_this.props.percent ? '(<span class="high">' + utils_1.Format.formatDecimal(d[_this.props.valueField] / sum * 100) + '%</span>)' : '') + "</p>"); }).on('mouseout', function () { return common_1.ToolTip.hide(); });
        if (this.props.percent) {
            enter.append('text')
                .attr('x', 0)
                .attr('y', 24)
                .attr('class', '_percent')
                .html(function (d) { return "<tspan>" + utils_1.Format.formatDecimal(d[_this.props.valueField] / sum * 100, 1) + "%</tspan>"; });
            var arc_1 = d3.arc();
            enter.append('path')
                .attr('class', '_percent2')
                .merge(group.select('path._percent2'))
                .transition()
                .duration(this.DURATION)
                .attrTween("d", function (d) {
                return function (t) {
                    return arc_1({
                        innerRadius: R - 5,
                        outerRadius: R,
                        startAngle: 0,
                        endAngle: Math.PI * 2 * t * d[valueField] / sum
                    });
                };
            });
        }
        group.exit().remove();
    };
    return default_1;
}(D3Chart_1.default));
exports.default = default_1;
