<template>
  <div>
  <div>
    <p>{{store.lang==='en'? 'Account' : 'Tài khoản'}}: <b>{{row.username}}</b></p>
    <p class="mt-1">{{store.lang==='en'? 'Full name' : 'Họ tên'}}: <b>{{row.fullname}}</b></p>
  </div>
  <div class="field mt-5">
        <label class="label">{{ store.lang==='en'? 'New password' : 'Mật khẩu mới' }} <b class="has-text-danger">*</b></label>
    <div class="field-body">
      <div class="field has-addons">
        <p class="control is-expanded">
          <input class="input" :type="showpass? 'text' : 'password'" placeholder="At least 6 characters, letters and numbers." v-model="password">
        </p>
          <div class="control">
      <a class="button" @click="showpass=!showpass">
        <SvgIcon v-bind="{name: 'eye-off.svg', type: 'dark', size: 22}" v-if="showpass"></SvgIcon>
        <SvgIcon v-bind="{name: 'view.svg', type: 'dark', size: 22}" v-else></SvgIcon>
        </a>
    </div>
      </div>
    </div>
    <p class="help is-danger" v-if="errors.find(v=>v.name==='password')">{{errors.find(v=>v.name==='password').text}}</p>
  </div>
<div class="field mt-5">
  <label class="label">{{ store.lang==='en'? 'Retype password' : 'Nhập lại mật khẩu' }} <b class="has-text-danger">*</b></label>
  <div class="field-body">
    <div class="field has-addons">
      <p class="control is-expanded">
        <input class="input" :type="showpass? 'text' : 'password'" placeholder="Must match the new password." v-model="retypepass">
      </p>
        <div class="control">
    <a class="button" @click="showpass=!showpass">
      <SvgIcon v-bind="{name: 'eye-off.svg', type: 'dark', size: 22}" v-if="showpass"></SvgIcon>
      <SvgIcon v-bind="{name: 'view.svg', type: 'dark', size: 22}" v-else></SvgIcon>
      </a>
  </div>
    </div>
  </div>
   <p class="help is-danger" v-if="errors.find(v=>v.name==='retypepass')">{{errors.find(v=>v.name==='retypepass').text}}</p>
</div>
    <div class="mt-5 pt-2">
      <button class="button is-primary has-text-white" @click="changePassword()">{{ store.lang==='en'? 'Set password' : 'Đặt mật khẩu' }}</button>
    </div>
  </div>
</template>
<script>
import { useStore } from '~/stores/index'
export default {
  setup() {
    const store = useStore()
    return { store }
  },
  props: ['row'],
  data() {
    return {
      errors: [],
      password: undefined,
      retypepass: undefined,
      showpass: false
    }
  },
  methods: {
    async changePassword()  {
      if(!this.checkPassword()) return
      let user = await this.$getdata('user', undefined, {filter: {id: this.row.id}}, true)
      const response = await fetch(`${this.$getpath()}password/${this.password}/`)
      let hash = await response.json();
      user.password = hash
      let rs1 = await this.$updateapi('user', user)
      if(rs1!=='error') this.$emit('close')
      else {
        this.$dialog('Có lỗi xảy ra. Hãy thử lại một lần nữa', 'Lỗi', 'Error')
      }
    },
    checkPassword() {
      this.errors = []
      if (this.$empty(this.password)) {
        this.errors.push({ name: 'password', text: 'Mật khẩu không được bỏ trống' })
      } else if (this.password.length < 6) {
        this.errors.push({ name: 'password', text: 'Mật khẩu từ 6 kí tự bao gồm chữ và số ' })
      } else if (!(/\d/.test(this.password) && /[a-zA-Z]/.test(this.password))) {
        this.errors.push({ name: 'password', text: 'Mật khẩu từ 6 kí tự bao gồm chữ và số ' })
      }
      if (this.$empty(this.retypepass)) {
        this.errors.push({ name: 'retypepass', text: 'Nhắc lại mật khẩu không được bỏ trống' })
      } else if (this.password !== this.retypepass) {
        this.errors.push({ name: 'retypepass', text: 'Nhắc lại phải giống với mật khẩu đã nhập' })
      }
      return this.errors.length>0? false : true
    }
  }
}
</script>