'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultNavigationPosition = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _antdv = require('../../../_util/antdv');

var _baseProps = require('../baseProps');

var _baseProps2 = _interopRequireDefault(_baseProps);

var _baseMixin = require('../baseMixin');

var _baseMixin2 = _interopRequireDefault(_baseMixin);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

// 默认Navigation控件的位置
var defaultNavigationPosition = exports.defaultNavigationPosition = 'top-right'; /**
                                                                                  * @文件说明: Controls.Navigation - 导航控件
                                                                                  * @创建人: pjtools@vip.qq.com
                                                                                  * @创建时间: 2020-05-07 10:02:46
                                                                                  */

var Navigation = {
  name: 'PjMap.Controls.Navigation',
  inheritAttrs: false,
  mixins: [_baseMixin2['default']],
  props: (0, _antdv.initDefaultProps)((0, _extends3['default'])({}, (0, _baseProps2['default'])(), {
    // 是否显示“罗盘”
    showCompass: _antdv.PropTypes.bool,
    // 是否允许控制倾斜
    visualizePitch: _antdv.PropTypes.bool,
    // 是否显示“层级”
    showZoomNum: _antdv.PropTypes.bool
  }), {
    position: defaultNavigationPosition,
    offset: [10, 10],
    showCompass: false,
    visualizePitch: true,
    showZoomNum: false
  }),
  data: function data() {
    return {
      // 是否禁用（层级放大）
      zoomInDisabled: false,
      // 是否禁用（层级缩小）
      zoomOutDisabled: false,
      // 当前地图层级
      zoom: 0,
      // 当前罗盘的旋转变形
      compassTransform: null
    };
  },

  computed: {
    compassStyle: function compassStyle() {
      var style = {};
      if (this.showCompass && this.compassTransform) {
        style.transform = this.compassTransform;
      }
      return style;
    }
  },
  methods: {
    // 根据类型渲染导航按钮组中的按钮
    renderButtonByGroup: function renderButtonByGroup(type, title) {
      var _this = this;

      var disabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      var h = this.$createElement;

      return h(
        'button',
        {
          attrs: {
            type: 'button',

            disabled: disabled,
            title: title,
            'aria-label': title
          },
          'class': 'mapboxgl-ctrl-' + type, on: {
            'click': function click(e) {
              e.stopPropagation();
              !disabled && _this.handleButtonGroupClick(type);
            }
          }
        },
        [h('span', { 'class': 'mapboxgl-ctrl-icon', attrs: { 'aria-hidden': 'true' },
          style: type === 'compass' ? this.compassStyle : null })]
      );
    },


    // 渲染地图层级的数字屏显组件
    renderMapZoomNumber: function renderMapZoomNumber() {
      var h = this.$createElement;

      return h(
        'div',
        { 'class': 'ctrl-zoom-number' },
        [h(
          'span',
          { 'class': 'ctrl-label' },
          [this.zoom]
        )]
      );
    },


    // 渲染地图的罗盘组件
    renderMapCompass: function renderMapCompass() {
      return this.renderButtonByGroup('compass', '重置方位');
    },


    // 更新地图层级按钮的状态
    updateZoomButton: function updateZoomButton() {
      var zoom = this.iMapApi.getZoom();
      this.zoom = Math.floor(zoom);
      this.zoomInDisabled = zoom === this.iMapApi.getMaxZoom();
      this.zoomOutDisabled = zoom >= 1 ? zoom === this.iMapApi.getMinZoom() : this.zoom === this.iMapApi.getMinZoom();
    },


    // 更新地图罗盘的旋转角度
    rotateCompassArrow: function rotateCompassArrow() {
      var map = this.iMapApi && this.iMapApi.map;
      if (this.visualizePitch) {
        var scale = 1 / Math.pow(Math.cos(map.transform.pitch * (Math.PI / 180)), 0.5);
        var rotateZ = map.transform.angle * (180 / Math.PI);
        this.compassTransform = 'scale(' + scale + ') rotateX(' + map.transform.pitch + 'deg) rotateZ(' + rotateZ + 'deg)';
      } else {
        this.compassTransform = 'rotate(' + map.transform.angle * (180 / Math.PI) + 'deg)';
      }
    },


    // 执行导航按钮组的按钮单击Click事件
    handleButtonGroupClick: function handleButtonGroupClick(type) {
      var iMapApi = this.iMapApi;
      var map = iMapApi && iMapApi.map;
      switch (type) {
        case 'zoom-in':
          {
            map && map.zoomIn();
            break;
          }
        case 'zoom-out':
          {
            map && map.zoomOut();
            break;
          }
        case 'compass':
          {
            if (this.visualizePitch) {
              iMapApi && iMapApi.resetRotatePitch();
            } else {
              iMapApi && iMapApi.resetRotate();
            }
            break;
          }
      }
    }
  },
  mounted: function mounted() {
    // 联动地图层级按钮与事件
    this.iMapApi.on('pjmap.controls.navigation.zoom', 'zoom', this.updateZoomButton);
    this.updateZoomButton();
    // 判断是否加载“罗盘”
    if (this.showCompass) {
      if (this.visualizePitch) {
        this.iMapApi.on('pjmap.controls.navigation.pitch', 'pitch', this.rotateCompassArrow);
      }
      this.iMapApi.on('pjmap.controls.navigation.rotate', 'rotate', this.rotateCompassArrow);
      this.rotateCompassArrow();
    }
  },
  beforeDestroy: function beforeDestroy() {
    if (this.showCompass) {
      if (this.visualizePitch) {
        this.iMapApi.off('pjmap.controls.navigation.pitch');
      }
      this.iMapApi.off('pjmap.controls.navigation.rotate');
    }
    this.iMapApi.off('pjmap.controls.navigation.zoom');
  },
  render: function render() {
    var h = arguments[0];
    var id = this.id,
        classes = this.classes,
        ctrlStyles = this.ctrlStyles,
        showCompass = this.showCompass,
        showZoomNum = this.showZoomNum,
        zoomInDisabled = this.zoomInDisabled,
        zoomOutDisabled = this.zoomOutDisabled;


    return h(
      'div',
      {
        attrs: { 'data-id': id },
        'class': classes, style: ctrlStyles },
      [h(
        'div',
        { 'class': 'mapboxgl-ctrl mapboxgl-ctrl-group' },
        [this.renderButtonByGroup('zoom-in', '放大一级', zoomInDisabled), this.renderButtonByGroup('zoom-out', '缩小一级', zoomOutDisabled), showCompass ? this.renderMapCompass() : null, showZoomNum ? this.renderMapZoomNumber() : null]
      )]
    );
  }
};

exports['default'] = Navigation;