<template>
  <div>
    <Caption v-bind="{ title: 'Tạo mã duyệt' }"></Caption>
    <article class="message is-dark">
      <div class="message-body py-2 mt-5 has-text-dark">
        Khi thực hiện các tác vụ quan trọng như giải ngân, hạch toán...hệ thống sẽ yêu cầu nhập mã đuyệt. Mã duyệt là
        một chuỗi gồm 4 chữ số, hãy ghi nhớ mã này
      </div>
    </article>

    <div class="field is-grouped mt-5">
      <div
        class="control mr-5"
        v-for="v in [1, 2, 3, 4]"
      >
        <input
          class="input is-dark"
          style="font-size: 18px; max-width: 40px; font-weight: bold; text-align: center"
          type="password"
          maxlength="1"
          :id="`input${v}`"
          v-model="data[v]"
          @keyup="changeNext(v)"
        />
      </div>
    </div>
    <div class="mt-2">
      <a @click="reset()">Nhập lại</a>
    </div>
    <div class="mt-5 pt-3">
      <button
        class="button is-primary"
        @click="confirm()"
      >
        Xác nhận
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {},
      code: undefined,
    };
  },
  mounted() {
    this.reset();
  },
  methods: {
    async confirm() {
      if (this.checkError()) return this.$snackbar("Mã phê duyệt gồm 4 số từ 0-9");
      let user = await this.$getdata("user", { first: true, filter: { id: this.$store.state.login.id } });
      user.approval_code = this.code;
      await this.$updateapi("user", user);
    },
    checkError() {
      if (Object.keys(this.data).length < 4) return true;
      let code = "";
      for (let val in this.data) {
        if (!this.$empty(val)) code += val.toString();
      }
      if (this.$empty(code) || !this.$isNumber(code)) return true;
      this.code = code;
      return false;
    },
    changeNext(v) {
      if (this.$empty(this.data[v])) return;
      else if (v === 4) return this.checkError();
      let doc = document.getElementById(`input${v + 1}`);
      if (doc) doc.focus();
    },
    reset() {
      this.data = {};
      let doc = document.getElementById(`input1`);
      if (doc) doc.focus();
    },
  },
};
</script>
