<template>
 <div class="px-3">
  <div class="field is-horizontal">
    <div class="field-body">
      <div class="field">
  <label class="label">Username<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="username">
  </div>
 <p class="help is-danger" v-if="errors.find(v=>v.name==='username')">{{errors.find(v=>v.name==='username').text}}</p>
 <p class="help is-primary" v-else-if="info">{{info}}</p>
</div>
<div class="field" v-if="!dealer">
  <label class="label">Account type<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <SearchBox v-bind="{api:'usertype', field:'name', column:['name'], first:true, position: 'top'}" 
    @option="selected('_type', $event)"></SearchBox>
  </div>
  <p class="help is-danger" v-if="errors.find(v=>v.name==='type')">{{errors.find(v=>v.name==='type').text}}</p>
</div>
</div>
</div>
  <div class="field is-horizontal mt-4">
    <div class="field-body">
<div class="field">
  <label class="label">Full name<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="fullname">
  </div>
  <p class="help is-danger" v-if="errors.find(v=>v.name==='fullname')">{{errors.find(v=>v.name==='fullname').text}}</p>
</div>
<div class="field">
  <label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="email">
  </div>
  <p class="help is-danger" v-if="errors.find(v=>v.name==='email')">{{errors.find(v=>v.name==='email').text}}</p>
</div>
</div>
</div>
<div class="field is-horizontal mt-4">
    <div class="field-body">
    <div class="field">
      <label class="label">Password<b class="ml-1 has-text-danger">*</b></label>
<div class="field has-addons">
      <p class="control is-expanded">
        <input class="input" :type="showpass? 'text' : 'password'" placeholder="At least 6 characters including 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>
   <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">
    <label class="label">Retype password<b class="ml-1 has-text-danger">*</b></label>
      <p class="control is-expanded">
        <input class="input" :type="showpass? 'text' : 'password'" placeholder="" v-model="retypePassword">
      </p>
    </div>
   <p class="help is-danger" v-if="errors.find(v=>v.name==='retypePassword')">{{errors.find(v=>v.name==='retypePassword').text}}</p>
</div>
</div>
  <div class="mt-5 pt-2">
  <button :class="`button is-primary has-text-white ${ loading? 'is-loading' : ''}`" @click="createAccount()" v-if="enable">Tạo tài khoản</button>
</div>
</div>
</template>
<script>
import { useStore } from '~/stores/index'
export default {
  setup() {
    const store = useStore()
    return {store}
  },
  props: ['pagename', 'row', 'api', 'dealer'],
  data () {
    return {
      fullname: undefined,
      username: undefined,
      email: undefined,
      password: undefined,
      retypePassword: undefined,
      errors: [],
      info: 'User name must not contain any spaces.',
      showpass: true,
      hash: undefined,
      status: undefined,
      user: undefined,
      code: undefined,
      option: undefined,
      branch: [],
      radio: undefined,
      check: {},
      branchOpt: undefined,
      enable: true,
      loading: false
    }
  },
  created() {
    if(!this.row) return
    this.fullname = this.row.fullname
    this.email = this.row.email
    if(this.row.code) this.username = this.row.code.toLocaleLowerCase()
  },
  mounted() {
    let pass = this.$id().toLocaleLowerCase()
    this.password = pass
    this.retypePassword = pass
    window.addEventListener("keyup", (ev) => ev.key==='Enter' && this.$route.name==='signup'? this.createAccount() : false)
  },
  computed: {
    registermethod: {
      get: function() {return this.store.registermethod},
      set: function(val) {this.$store.commit("updateRegisterMethod", {registermethod: val})}
    },
    authmethod: {
      get: function() {return this.store.authmethod},
      set: function(val) {this.$store.commit("updateAuthMethod", {authmethod: val})}
    },
    authstatus: {
      get: function() {return this.store.authstatus},
      set: function(val) {this.$store.commit("updateAuthStatus", {authstatus: val})}
    },
    usertype: {
      get: function() {return this.store.usertype},
      set: function(val) {this.$store.commit("updateUserType", {usertype: val})}
    },
    dialog: {
      get: function() {return this.store['dialog']},
      set: function(val) {this.$store.commit('updateStore', {name: 'dialog', data: val})}
    }
  },
  methods: {
    checkError () {
      this.errors = []
      if (!this.$empty(this.fullname)) { this.fullname = this.fullname.trim() }
      if (!this.$empty(this.username)) { this.username = this.username.trim().toLowerCase() }
      if (this.$empty(this.fullname)) {
        this.errors.push({ name: 'fullname', text: 'Họ và tên không được bỏ trống' })
      } else if (this.fullname.length < 5) {
        this.errors.push({ name: 'fullname', text: 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên' })
      }
      if (this.$empty(this.username)) {
        this.errors.push({ name: 'username', text: 'Tài khoản không được bỏ trống' })
      } else if (this.username!==this.username.replace(' ', '')) {
        this.errors.push({ name: 'username', text: 'Tài khoản không được chứa khoảng trắng' })
      } else if(this.username.length<5) {
        this.errors.push({ name: 'fullname', text: 'Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên' })
      }
      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 gồm 6 kí tự trở nên 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 gồm 6 kí tự trở nên bao gồm chữ và số ' })
      }
      if (this.$empty(this.retypePassword)) {
        this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu không được bỏ trống' })
      } else if (this.password !== this.retypePassword) {
        this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu phải giống với mật khẩu đã nhập' })
      }
      if(!this.$empty(this.email)) {
        this.email = this.email.trim()
        if(this.$errEmail(this.email)) this.errors.push({ name: 'email', text: 'Email không hợp lệ.' })
      } else {
        this.errors.push({ name: 'email', text: 'Email không được bỏ trống.' })
      }
      if(this.$empty(this.option)) {
        if(this.dealer) {
          this.option = {id: 3}
        } else this.errors.push({ name: 'type', text: 'Chưa chọn loại tài khoản.' })
      }
      let opts = this.radio==='all'? 'all' : []
      if(opts.length===0) {
        for (const [key, value] of Object.entries(this.check)) {
          if(value) opts.push(key)
        }
      }
      return this.errors.length>0? true : false
    },
    async createAccount() {
      this.loading = true
      if(this.checkError()) return this.loading = false
      const response = await fetch(`${this.$getpath()}password/${this.password}/`)
      if(!response.ok) {
        throw new Error(`Response status: ${response.status}`);
      }
      this.hash = await response.json();
      let data = await this.$getdata('user', {username: this.username}, undefined, true)
      if(data) {
        this.loading = false
        return this.errors.push({name: 'username', text: 'Tài khoản đã tồn tại trong hệ thống'})
      }
      let found = this.$findapi('user')
      data = { fullname: this.fullname, username: this.username, phone: this.$empty(this.phone)? undefined : this.phone, password: 
      this.hash, type: this.option.id, register_method: 1, auth_status: 2, auth_method: 1, email: this.email}
      this.user = await this.$insertrow('user', data, found.params.values, this.pagename)
      if(this.user==='error') return this.loading = false
      if(this.row) {
        let copy = this.$copy(this.row)
        copy.user = this.user.id
        await this.$updaterow(this.api, copy, found.params.values, this.pagename)
      } else {
        //send email
        if(this.email) {
          let content = `<p>Xin chào ${this.fullname}, </p>`
          content += '<p>Tài khoản đăng nhập của bạn đã được khởi tạo và sẵn sàng sử dụng:</p>'
          content += `<p>Username: ${this.username}</p>`
          content += `<p>Password: ${this.password}</p>`
          content += `<p>Đội ngũ Utopia.</p>`
          let info = {subject: 'Tài khoản đăng nhập Utopia', to: this.email, sender: 1, content: content}
          let rs = await this.$insertapi('sendemail', info)
        }
      }
      if(this.dealer) {
        let copy = this.$copy(this.row)
        copy.user = this.user.id
        await this.$updaterow('dealer', copy, null, this.pagename)
      }
      this.loading = false
      this.$dialog('Tạo tài khoản thành công.', 'Thành công', 'Success', 10)
      this.$emit('close')
    },
    selected(attr, obj) {
      this.option = obj
    },
    doCheck(v) {
      this.$set(this.check, v.code, this.check[v.code]? false : true)
    }
  }
}
</script>
