<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', undefined, {filter: {id: this.$store.state.login.id}}, true)
      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>