<template>
  <div style="padding: 5px;">
    <text class="result">{{result}}</text>
    <div class="row">
      <text class="btn" onclick="input">1</text>
      <text class="btn" onclick="input">2</text>
      <text class="btn" onclick="input">3</text>
      <text class="btn btn-operator" onclick="input">+</text>
    </div>
    <div class="row">
      <text class="btn" onclick="input">4</text>
      <text class="btn" onclick="input">5</text>
      <text class="btn" onclick="input">6</text>
      <text class="btn btn-operator" onclick="input">-</text>
    </div>
    <div class="row">
      <text class="btn" onclick="input">7</text>
      <text class="btn" onclick="input">8</text>
      <text class="btn" onclick="input">9</text>
      <text class="btn btn-operator" onclick="input">*</text>
    </div>
    <div class="row">
      <text class="btn" onclick="input">0</text>
      <text class="btn" onclick="input">.</text>
      <text class="btn" onclick="clear">AC</text>
      <text class="btn btn-operator" onclick="calculate">=</text>
    </div>
  </div>
</template>

<style>
  .row {
    flex-direction: row;
  }

  .result {
    text-align: right;
    background-color: #666;
    font-size: 40px;
    color: white;
  }

  .btn {
    flex: 1;
    text-align: center;
    background-color: #eee;
    font-size: 36px;
  }

  .btn, .result {
    height: 100px;
    padding: 30px;
    margin: 5px;
  }

  .btn-operator {
    background-color: #669;
    font-size: 40px;
    color: white;
  }
</style>

<script>
  require('weex-components');
  var OP = ['+', '-', '*', '/'];
  var inputs = [];
  module.exports = {
    data: {
      result: ''
    },
    methods: {
      input: function(e) {
        var value = e.target.attr['value'];
        var lastOne = inputs.length ? inputs[inputs.length - 1] : '';
        if (OP.indexOf(lastOne) > -1 && OP.indexOf(value) > -1) {
          return;
        }

        inputs.push(value);
        var buf = [], char;
        for (var i = 0; i < inputs.length; i++) {
          char = inputs[i];
          if (OP.indexOf(char) > -1) {
            char = ' ' + char + ' ';
          }
          buf.push(char);
        }
        this.result = buf.join('');
      },
      calculate: function() {
        var result = eval(this.result);
        inputs = [result];
        this.result = result;
      },
      clear: function() {
        inputs = [];
        this.result = '';
      }
    }
  }
</script>