"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 React = require("react");
var _ = require("lodash");
var d3 = require("d3");
var charts_1 = require("../../charts");
var utils_1 = require("../../utils");
var __MapBuilder_1 = require("./__MapBuilder");
var Area_1 = require("./Area");
var BackGround_1 = require("./BackGround");
var Bars_1 = require("./Bars");
var Lines_1 = require("./Lines");
var Colors_1 = require("./Colors");
var Points_1 = require("./Points");
var MapDEF_1 = require("./MapDEF");
/**
 * 目前支持度：
 * resize：支持
 * update: 支持
 * tip提示: 支持
 * click交互: 支持
 *
 * 其它说明：
 * 基于D3JS的地图，引入前主确认已经引用了 d3.js
*/
var default_1 = /** @class */ (function (_super) {
    __extends(default_1, _super);
    function default_1(props) {
        var _this = _super.call(this, props) || this;
        _this.RotateX = 30;
        _this.THEIGHT = 0;
        _this.PHEIGHT = Math.cos(Math.PI * 2 * _this.RotateX / 360);
        _this.ADJUST = [0, 0, 0]; //地图调节
        _this.Builder = null;
        _this.Projection = null;
        _this.areas = null;
        _this.bkgs = null;
        _this.bars = null;
        _this.colors = null;
        _this.lines = null;
        _this.points = null;
        _this.rotate = function (d) {
            var orgin = '0';
            orgin = d3.select('#' + _this.id).style('transform').replace('rotateX(', '').replace('deg)', '');
            d3.select('#' + _this.id)
                // @ts-ignore
                .transition()
                .duration(3000)
                .styleTween("transform", function () { return d3.interpolateString("rotateX(" + orgin + "deg)", "rotateX(" + d + "deg)"); });
        };
        if (_.has(_this.props, 'rotateX')) {
            _this.RotateX = _this.props.rotateX;
            _this.PHEIGHT = Math.cos(Math.PI * 2 * _this.RotateX / 360);
        }
        if (_this.props.adjust) {
            _this.ADJUST = _this.props.adjust;
        }
        return _this;
    }
    default_1.prototype._needResize = function () {
        var _a;
        var root = document.getElementById(this.id + "_container");
        var _b = __read([root.offsetWidth, root.offsetHeight], 2), w = _b[0], h = _b[1];
        if (this.WIDTH != w || this.HEIGHT != h) {
            _a = __read([w, h], 2), this.WIDTH = _a[0], this.HEIGHT = _a[1];
            return true;
        }
        return false;
    };
    default_1.prototype.resize = function () {
        this.THEIGHT = this.HEIGHT / this.PHEIGHT;
        d3.select('#' + this.id)
            .style('width', '100%')
            .style('height', this.THEIGHT + 'px')
            .style('margin-top', (this.HEIGHT - this.THEIGHT) / 2 + 'px');
        this.SVG.style('height', this.THEIGHT)
            .attr('height', this.THEIGHT)
            .attr('width', this.WIDTH);
        this.Builder.resize(this.WIDTH, this.THEIGHT);
        var center = this.Builder.getCenter();
        center[0] = center[0] + this.ADJUST[0];
        center[1] = center[1] + this.ADJUST[1];
        var scale = this.Builder.getFullScale();
        scale += this.ADJUST[2];
        this.Projection = d3.geoMercator()
            .center(center)
            .scale(scale)
            .translate([this.WIDTH / 2, this.THEIGHT / 2]);
        this.colors.reset(this.Builder, this.Projection, this.AreaGroup);
        this.areas.reset(this.Builder, this.Projection, this.AreaGroup);
        this.bkgs.reset(this.Builder, this.Projection, this.BkgGroup);
    };
    default_1.prototype.buildMap = function () {
        var url = '/static/map/china.json';
        if (this.props.mapId) {
            var tmp = this.props.mapId + '';
            if (tmp == 'chinafull') {
                url = '/static/map/chinafull.json';
            }
            else if (tmp.length == 2) {
                url = "/static/map/province/" + tmp + ".json";
            }
            else if (tmp.length == 6) {
                url = "/static/map/city/" + tmp + ".json";
            }
        }
        var json = utils_1.Ajax.GETASYNC(url);
        this.THEIGHT = this.HEIGHT / this.PHEIGHT;
        this.SVG.append('defs').html(MapDEF_1.default);
        d3.select('#' + this.id)
            .style('width', '100%')
            .style('height', this.THEIGHT + 'px')
            .style('margin-top', (this.HEIGHT - this.THEIGHT) / 2 + 'px')
            .style('overflow', 'hidden')
            .style('transform', " rotateX(" + this.RotateX + "deg)");
        this.SVG.attr('height', this.THEIGHT)
            .attr('class', '_vc_map')
            .attr('width', this.WIDTH)
            .style('position', 'absolute')
            .style('height', this.THEIGHT);
        this.Builder = new __MapBuilder_1.default(json, this.WIDTH, this.THEIGHT, this.props.adjust);
        var center = this.Builder.getCenter();
        center[0] = center[0] + this.ADJUST[0];
        center[1] = center[1] + this.ADJUST[1];
        var scale = this.Builder.getFullScale();
        scale += this.ADJUST[2];
        this.Projection = d3.geoMercator()
            .center(center)
            .scale(scale)
            .translate([this.WIDTH / 2, this.THEIGHT / 2]);
        this.BkgGroup = this.SVG.append('g').attr('class', '_group_bkg');
        this.AreaGroup = this.SVG.append('g')
            .attr('id', this.id + "_group_area")
            .attr('class', "_group_area " + (_.has(this.props, 'onSelected') ? '_group_area_selected' : ''));
        this.areas = new Area_1.default(this.Builder, this.Projection, this.props);
        this.bkgs = new BackGround_1.default(this.Builder, this.Projection, this.props);
        this.areas.setData(this.AreaGroup, json.features);
        this.bkgs.setData(this.BkgGroup, json);
        if (_.has(this.props, 'bars')) {
            this.BarGroup = this.SVG.append('g').attr('class', '_group_bars');
            this.bars = new Bars_1.default(this.Builder, this.Projection, this.props);
            this.bars.setData(this.BarGroup);
        }
        if (_.has(this.props, 'colors')) {
            this.colors = new Colors_1.default(this.Builder, this.Projection, this.props);
            this.colors.setData(this.SVG, this.props.colors);
        }
        if (_.has(this.props, 'points')) {
            this.points = new Points_1.default(this.Builder, this.Projection, this.props);
        }
        if (_.has(this.props, 'lines')) {
            this.lines = new Lines_1.default(this.Builder, this.Projection, this.props);
        }
    };
    default_1.prototype.build = function () {
        this.buildMap();
        // 说明：地图统一延时0.1秒，以便区域能够先行载入
        // window.setTimeout(() => this.buildMap(), 100);
    };
    /**
     * 是否需要update,这里重写每个方法
    */
    default_1.prototype._needUpdate = function () {
        // 是否需要更新颜色区域
        if (this.colors && !_.isEqual(this._last_data.colors, this.props.colors)) {
            this.colors.setData(this.SVG, this.props.colors);
        }
        this._last_data = this.props;
        return false;
    };
    default_1.prototype.update = function () { };
    default_1.prototype.render = function () {
        return React.createElement("div", { id: this.id + '_container', className: "vap-chart", style: { overflow: 'hidden' } },
            React.createElement("div", { id: this.id, style: {
                    width: '100%',
                    height: '100%',
                } }));
    };
    return default_1;
}(charts_1.D3Chart));
exports.default = default_1;
