"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 __());
    };
})();
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var D3Chart_1 = require("../D3Chart");
var common_1 = require("../common");
var d3 = require("d3");
var _ = require("lodash");
var moment = require("moment");
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_line_areastack';
        _this.dateFormat = 'YYYY-MM-DD';
        _this.dates = [];
        _this.marginLeft = 60; //纵轴宽度
        _this.widthScale = null;
        _this.heightScale = null;
        _this.areaDraw = null;
        return _this;
    }
    default_1.prototype.init = function () {
        this.marginLeft = this.props.marginLeft || this.marginLeft;
        this.dateFormat = this.props.dateFormat || this.dateFormat;
    };
    default_1.prototype.sort = function () {
        var _a;
        var _this = this;
        var _b = __read([this.props.start, this.props.end], 2), start = _b[0], end = _b[1];
        if (end === undefined) {
            _a = __read(common_1.DateUtil.toRange(start), 2), start = _a[0], end = _a[1];
        }
        var dates = common_1.DateUtil.dateArr(start, end, this.dateFormat);
        this.DATA = common_1.DateUtil.sortDateData(dates, this.props.data, this.props.labelField, this.props.valueFields);
        this.DATA.map(function (item) {
            item.__date_str = moment(item[_this.props.labelField]).format(_this.dateFormat);
            item.__date_obj = new Date(item[_this.props.labelField]);
        });
        var totals = this.DATA.map(function (item) { return item._total = _.sum(_this.props.valueFields.map(function (key) { return item[key]; })); });
        this.widthScale = d3.scaleTime().domain(this.extent(this.DATA, function (d) { return d.__date_obj; })).range([0, this.LAYOUT.w - this.marginLeft]);
        this.heightScale = d3.scaleLinear().domain([0, _.max(totals)]).range([this.LAYOUT.h, 0]);
        this.areaDraw = function (t) { return d3.area()
            .x(function (d) { return _this.widthScale(d['data']['__date_obj']); })
            .y0(function (d) { return _this.heightScale(d[0]); })
            .y1(function (d) { return _this.heightScale(d[0] + t * (d[1] - d[0])); })
            .curve(d3.curveMonotoneX); };
    };
    default_1.prototype._mousemove = function () {
        var _this = this;
        this.SVG.on('mousemove', function () {
            var x = d3.event.layerX - _this.LAYOUT.x - _this.marginLeft;
            var y = d3.event.layerY - _this.LAYOUT.y;
            if (x < 0) {
                return;
            }
            var param = {
                __date_str: moment(_this.widthScale.invert(x)).format('YYYY-MM-DD')
            };
            var idx = _.findIndex(_this.DATA, param);
            if (idx >= 0) {
                var data = _this.DATA[idx];
                _this.SVG.selectAll('.dot').classed('active', false);
                _this.SVG.selectAll('.dot_' + idx).classed('active', true);
                if (_this.props.tip) {
                    common_1.ToolTip.show(_this.props.tip);
                }
                else {
                    var html = ["<h2>" + moment(data[_this.props.labelField]).format('YYYY-MM-DD') + "</h2>"];
                    for (var i = 0; i < _this.props.valueFields.length; i++) {
                        html.push("<p>" + _this.props.valueTexts[i] + " : <span class=\"vapfont\">" + _this.FormatValue(data[_this.props.valueFields[i]]) + "</span></p>");
                    }
                    common_1.ToolTip.show(html.join(''));
                }
            }
            _this.SVG.select("line#" + _this.id + "coord_line_vet")
                .attr('stroke-opacity', 1)
                .attr('x1', x)
                .attr('x2', x)
                .attr('y1', 0)
                .attr('y2', _this.LAYOUT.h);
            _this.SVG.select("line#" + _this.id + "coord_line_hori")
                .attr('stroke-opacity', 1)
                .attr('x1', 0)
                .attr('x2', _this.LAYOUT.w - _this.marginLeft)
                .attr('y1', y)
                .attr('y2', y);
        }).on('mouseout', function (d) {
            _this.SVG.select("line#" + _this.id + "coord_line_hori").attr('stroke-opacity', 0);
            _this.SVG.select("line#" + _this.id + "coord_line_vet").attr('stroke-opacity', 0);
            _this.SVG.selectAll('.dot').classed('active', false);
            common_1.ToolTip.hide();
        });
        if (this.props.onClick) {
            this.SVG.on('click', function () {
                // const x = d3.event.clientX - document.getElementById(this.id).getBoundingClientRect().left - this.LAYOUT.x;
                var x = d3.event.layerX - _this.LAYOUT.x - _this.marginLeft;
                if (x < 0) {
                    return;
                }
                var param = {
                    __date_str: moment(_this.widthScale.invert(x)).format('YYYY-MM-DD')
                };
                var data = _.find(_this.DATA, param);
                if (data) {
                    _this.props.onClick(data);
                }
            });
        }
    };
    default_1.prototype.build = function () {
        this.SVG.append('g').attr('class', '_group_items')
            .attr('transform', "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + this.LAYOUT.y + ")")
            .classed('chart-hover', this.props.onClick ? true : false)
            .append('rect')
            .attr('id', this.id + 'ho-bkg')
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', this.LAYOUT.w - this.marginLeft)
            .attr('height', this.LAYOUT.h)
            .attr('fill', 'white')
            .attr('fill-opacity', '0.001');
        var x = this.SVG.append("g")
            .attr("class", "_x_axis")
            .attr("transform", "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + (this.LAYOUT.h + this.LAYOUT.y) + ")");
        if (_.has(this.props, 'xLabel')) {
            x.append('text')
                .attr('class', '_label')
                .text(this.props.xLabel)
                .attr('x', this.WIDTH - 40)
                .attr('y', 24);
        }
        var y = this.SVG.append("g")
            .attr("class", "_y_axis")
            .attr("transform", "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + this.LAYOUT.y + ")");
        if (_.has(this.props, 'yLabel')) {
            y.append('text')
                .attr('class', '_label')
                .text(this.props.yLabel)
                .attr('x', 0)
                .attr('y', -12);
        }
        var coord = this.SVG.append('g').attr('class', '_group_coords')
            .attr('transform', "translate(" + (this.LAYOUT.x + this.marginLeft) + "," + this.LAYOUT.y + ")");
        coord.append('line')
            .attr('id', this.id + 'coord_line_hori')
            .attr('class', 'coord_hori')
            .attr('x0', 0)
            .attr('y0', 0)
            .attr('x1', 0)
            .attr('y1', 0);
        coord.append('line')
            .attr('id', this.id + 'coord_line_vet')
            .attr('class', 'coord_vet')
            .attr('x0', 0)
            .attr('y0', 0)
            .attr('x1', 0)
            .attr('y1', 0);
        this.update();
        this._mousemove();
    };
    default_1.prototype.update = function () {
        var _this = this;
        var stack = d3.stack();
        var data = stack.keys(this.props.valueFields)(this.DATA);
        var group = this.SVG.select('g._group_items').selectAll('g._item').data(data);
        var enter = group.enter()
            .append('g')
            .attr('class', function (d, i) { return _this.itemClass(d, i); });
        enter.append("path")
            .merge(group.select('path'))
            .transition()
            .duration(this.DURATION)
            .attrTween('d', function (d, i) { return function (t) { return _this.areaDraw(t)(d); }; });
        group.selectAll("circle.dot").data(function (d) { return d; })
            .enter()
            .append("circle")
            .attr('class', function (d, i) { return "dot dot_" + i; })
            .attr("cx", function (d) { return _this.widthScale(d.data['__date_obj']); })
            .attr("cy", function (d) { return _this.heightScale(d[1]); });
        this.SVG.select('g._x_axis').call(d3.axisBottom(this.widthScale).ticks(7).tickSize(1).tickFormat(d3.timeFormat('%m-%d')));
        this.SVG.select('g._y_axis').call(d3.axisLeft(this.heightScale).ticks(4).tickSize(1).tickFormat(function (e) { return _this.FormatValue(e); }));
    };
    return default_1;
}(D3Chart_1.default));
exports.default = default_1;
