<template>
  <div>
    <Caption v-bind="{ title: 'Nhập mã duyệt' }"></Caption>
    <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-4">
      <a @click="reset()">Nhập lại</a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {},
      code: undefined,
    };
  },
  async created() {
    if (!this.approvalcode && this.$store.login.approval_code) this.approvalcode = this.$store.login.approval_code;
    if (!this.approvalcode) {
      const user = await this.$getdata("user", {
        first: true,
        filter: { id: this.$store.login.id },
      });
      this.approvalcode = user.approval_code;
    }
  },
  mounted() {
    this.reset();
  },
  computed: {
    approvalcode: {
      get() {
        return this.$store.approvalcode;
      },
      set(val) {
        this.$store.commit("updateStore", { name: "approvalcode", data: val });
      },
    },
  },
  methods: {
    checkError() {
      if (Object.keys(this.data).length < 4) return true;
      let code = "";
      for (const [key, value] of Object.entries(this.data)) {
        if (!this.$empty(value)) code += value.toString();
      }
      if (this.$empty(code) || !this.$isNumber(code)) return true;
      this.code = code;
      return false;
    },
    checkValid() {
      if (this.checkError()) return this.$snackbar("Mã phê duyệt không hợp lệ");
      if (this.code !== this.approvalcode) return this.$snackbar("Mã phê duyệt không chính xác");
      this.$emit("modalevent", { name: "approvalcode", data: this.code });
      this.$emit("close");
    },
    changeNext(v) {
      if (this.$empty(this.data[v])) return;
      else if (v === 4) return this.checkValid();
      let doc = document.getElementById(`input${v + 1}`);
      if (doc) doc.focus();
    },
    reset() {
      this.data = {};
      let doc = document.getElementById(`input1`);
      if (doc) doc.focus();
    },
  },
};
</script>
