var regex = /^(\d+)\/(-?\d{1,2}(?:\.\d+)?)\/(-?\d{1,3}(?:\.\d+)?)$/;
var app = new Vue({
  el: '#app',
  data: {
    instr: '',
    zoom: 0,
    xpos: 0,
    ypos: 0,
    tiles: [
      ['https://tile.openstreetmap.org/2/1/0.png',
        'https://tile.openstreetmap.org/2/2/0.png',
        'https://tile.openstreetmap.org/2/3/0.png'
      ],
      ['https://tile.openstreetmap.org/2/1/1.png',
        'https://tile.openstreetmap.org/2/2/1.png',
        'https://tile.openstreetmap.org/2/3/1.png'
      ],
      ['https://tile.openstreetmap.org/2/1/2.png',
        'https://tile.openstreetmap.org/2/2/2.png',
        'https://tile.openstreetmap.org/2/3/2.png'
      ]
    ],
    tilestatus: 'https://tile.openstreetmap.org/0/0/0.png/status',
    tiledirty: 'https://tile.openstreetmap.org/0/0/0.png/dirty'
  },
  methods: {
    calc: function() {
      if (regex.test(this.instr)) {
        var groups = this.instr.match(regex);
        zoom = parseInt(groups[1]);
        lat = parseFloat(groups[2]);
        lon = parseFloat(groups[3]);
        this.zoom = Math.pow(2, zoom);
        this.xpos = Math.floor(this.zoom * ((lon + 180) / 360));
        this.ypos = Math.floor(this.zoom * (1 - (Math.log(Math.tan(lat *
            Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) /
          Math.PI)) / 2);
        var arr = new Array(new Array(3), new Array(3), new Array(3));
        var i = 0,
          j = 0;
        var xpos = this.xpos;
        var ypos = this.ypos;
        var z2 = this.zoom
        for (var x = 0; x <= 2; x++) {
          for (var y = 0; y <= 2; y++) {
            var str = 'https://tile.openstreetmap.org/' + zoom + '/' + ((
              z2 + xpos + x - 1) % z2) + '/' + ((z2 + ypos + y - 1) %
              z2) + '.png';
            arr[y][x] = str;
          }
        }
        this.tiles = arr;
        this.tilestatus = arr[1][1] + '/status';
        this.tiledirty = arr[1][1] + '/dirty';
      }
    }
  }
})