<template>
  <div id="app">
    <div class="calculator" style="margin-top:0px;margin-bottom:0px;">
      <div class="results input">{{equation}}</div>
      <div class="mode">
        <button type="button" class="button" @click="append(7)">7</button>
        <button type="button" class="button" @click="append(8)">8</button>
        <button type="button" class="button" @click="append(9)">9</button>
        <button type="button" class="button" @click="append('×')">*</button>
        <button type="button" class="button" @click="clear">AC</button>

        <button type="button" class="button" @click="append(4)">4</button>
        <button type="button" class="button" @click="append(5)">5</button>
        <button type="button" class="button" @click="append(6)">6</button>
        <button type="button" class="button" @click="append('÷')">/</button>
        <button type="button" class="button" @click="calculatePercent">%</button>

        <button type="button"  class="button" @click="append(1)">1</button>
        <button type="button" class="button" @click="append(2)">2</button>
        <button type="button" class="button" @click="append(3)">3</button>
        <button type="button" class="button" @click="append('+')">+</button>
        <button type="button" class="button" @click="append('-')">-</button>

        <button type="button" class="button" @click="append(0)">0</button>
        <button type="button" class="button" @click="append('.')">.</button>

        <button type="button" class="button" @click="calculateToggle">±</button>

        <button type="button" class="button calculate" @click="calculate">=</button>

        <!-- <button class="button" @click="press">(</button>
        <button class="button" @click="press">)</button>-->

        <!-- <button class="button" @click="press">x 2</button> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      equation: "0",
      isDecimalAdded: false, //只能输入一个小数位
      isOperatorAdded: false, //只能写一个等号
      isStarted: false //判断是否已经开始输入数据
    };
  },

  methods: {
    //判断是否是增删改查
    isOperator(character) {
      return ["+", "-", "×", "÷"].indexOf(character) > -1;
    },
    //追加数字
    append(character) {
      if (this.equation === "0" && !this.isOperator(character)) {
        if (character === ".") {
          this.equation += "" + character;
          this.isDecimalAdded = true;
        } else {
          this.equation = "" + character;
        }
        this.isStarted = true;
        return;
      }
      if (!this.isOperator(character)) {
        if (character === "." && this.isDecimalAdded) {
          return;
        }
        if (character === ".") {
          this.isDecimalAdded = true;
          this.isOperatorAdded = true;
        } else {
          this.isOperatorAdded = false;
        }
        this.equation += "" + character;
      }
      if (this.isOperator(character) && !this.isOperatorAdded) {
        this.equation += "" + character;
        this.isDecimalAdded = false;
        this.isOperatorAdded = false;
      }
    },
    //点击等于号
    calculate() {
      let result = this.equation
        .replace(new RegExp("×", "g"), "*")
        .replace(new RegExp("÷", "g"), "/");
      this.equation = parseFloat(eval(result).toFixed(9)).toString();
      this.isDecimalAdded = false;
      this.isOperatorAdded = false;
    },

    //点击AC
    clear() {
      this.equation = "0";
      this.isDecimalAdded = false;
      this.isOperatorAdded = false;
      this.isStarted = false;
    },

    //点击正负号
    calculateToggle() {
      if (this.isOperatorAdded || !this.isStarted) {
        true;
      }
      this.equation = this.equation + "*(-1))";
      this.calculate();
    },

    //点击百分比
    calculatePercent() {
      if (this.isOperatorAdded || !this.isStarted) {
        true;
      }
      this.equation = this.equation + "*0.01";
      this.calculate();
    }
  }
};
</script>
<style scoped>
.calculator {
  width: 500px;
  padding: 20px;
  border-radius: 5px;
  margin: 20px auto;
  font-size: 16px;
  background-color: #d9d9d9;
}

.button {
  margin: 3px;
  width:80px;
  border: 1px solid #0d0d0d;
  height: 30px;
  border-radius: 4px;
  columns: #d9d9d9;
  background-color: white;
  cursor: pointer;
  outline: none;
}
.calculate {
  width: 175px;
}
.mode {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.input {
  width: 480px;
  height: 50px;
  border-radius: 0px;
  border: 1px solid black;
  background-color: white;
  color: black;
  padding: 0 5px 0 5px;
  margin: 0 0px 10px 0px;
}
</style>