<template>
  <div v-if="record">
    <div class="columns is-multiline mx-0">
    <div class="column is-4">
      <div class="field">
  <label class="label">User name<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="record.username">
  </div>
</div>
    </div>
    <div class="column is-4">
      <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="record.fullname">
  </div>
  <p class="help is-danger" v-if="errors.fullname">{{errors.fullname}}</p>
</div>
    </div>
    <div class="column is-4">
      <div class="field">
  <label class="label">Phone<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input" type="text" placeholder="" v-model="record.phone">
  </div>
</div>
    </div>
    <div class="column is-4">
      <div class="field">
  <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, optionid:record.type}"
    @option="selected('_type', $event)"></SearchBox>
  </div>
  <p class="help is-danger" v-if="errors.type">{{errors.type}}</p>
</div>
    </div>
    <div class="column is-4">
      <div class="field">
  <label class="label">Status<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <p class="mt-4">
    <b-radio v-model="radioBlocked"
                native-value="0">
                Active
            </b-radio>
            <b-radio v-model="radioBlocked" class="ml-3"
                native-value="1">
                Locked
            </b-radio>
          </p>
  </div>
</div>
    </div>
    </div>
    <div class="mt-5">
    <button class="button is-primary has-text-white" @click="update()">Update</button>
  </div>
  </div>
</template>
<script>
export default {
  props: ['pagename', 'row'],
  data() {
    return {
      errors: {},
      record: this.row? this.$copy(this.row) : undefined,
      radioBlocked: undefined,
      radio: undefined,
      branch: [],
      check: {},
      branchOpt: undefined
    }
  },
  async created() {
    this.record = await this.$getdata('user', undefined, {filter: {id: this.row.id}}, true)
    this.radioBlocked = this.record.blocked? 1 : 0
  },
  methods: {
    selected(attr, obj) {
      this.record[attr] = obj
    },
    checkError () {
      this.errors = []
      if (!this.$empty(this.record.fullname)) { this.record.fullname = this.record.fullname.trim() }
      if (!this.$empty(this.record.username)) { this.record.username = this.record.username.trim().toLowerCase() }
      if (this.$empty(this.record.fullname)) {
        this.errors.fullname = 'Họ và tên không được bỏ trống'
      } else if (this.record.fullname.length < 5) {
        this.errors.fullname = 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên'
      }
      if (this.$empty(this.record.username)) {
        this.errors.username = 'Tài khoản không được bỏ trống'
      } else if (this.record.username!==this.record.username.replace(' ', '')) {
        this.errors.username = 'Tài khoản không được chứa khoảng trắng'
      } else if(this.record.username.length<5) {
        this.errors.fullname = 'Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên'
      }
      if(!(this.record._type || this.record.type)) this.errors.type = 'Chưa chọn loại tài khoản'
      return this.errors.length>0? true : false
    },
    async update() {
      if(this.checkError()) return
      if(this.record._type) this.record.type = this.record._type.id
      this.record.blocked = this.radioBlocked
      let rs = await this.$updaterow('user', this.record, undefined, this.pagename)
      if(this.radioBlocked) this.setTokenExpiry()
    },
    doCheck(v) {
      this.$set(this.check, v.code, this.check[v.code]? false : true)
    },
    async setTokenExpiry() {
      let rows = await this.$getdata('token', {user: this.record.id, expiry: 0})
      if(rows.length===0) return
      rows.map(v=>v.expiry = 1)
      this.$insertapi('token', rows, undefined, true)
    }
  }
}
</script>