<template>
<div>
    <Caption v-bind="{title: 'Tham số'}"></Caption>
      <div class="field is-horizontal mt-5">
  <div class="field-body">
    <div class="field is-narrow">
      <label class="label">Mã <span class="has-text-danger"> * </span> </label>
      <p class="control">
        <input class="input" type="text" placeholder="" v-model="record.code">
      </p>
    </div>
    <div class="field">
      <label class="label">Tên <span class="has-text-danger"> * </span> </label>
      <p class="control">
        <input class="input" type="text" placeholder="" v-model="record.name">
      </p>
    </div>
    </div>
  </div>
    <div class="field mt-5">
      <label class="label">Chi tiết<span class="has-text-danger"> * </span> </label>
      <p class="control is-expanded">
        <input class="input" type="text" placeholder="" v-model="record.detail">
      </p>
    </div>
    <div class="field mt-5">
      <label class="label">Thứ tự <span class="has-text-danger"> * </span> </label>
      <p class="control">
        <input class="input" type="text" placeholder="" v-model="record.index">
      </p>
      <p class="help is-danger" v-if="errors.index">{{ errors.index }}</p>
    </div>
  <div class="mt-5">
    <button class="button is-primary" @click="update()">Cập nhật</button>
  </div>
</div>
</template>
<script>
export default {
  props: ['api', 'pagename', 'row'],
  data () {
    return {
      record: this.$copy(this.row || {}),
      errors: {}
    }
  },
  computed: {
    pagedata: {
      get: function() {return this.$store.state[this.pagename]},
      set: function(val) {this.$store.commit('updateStore', {name: this.pagename, data: val})}
    }
  },
  methods :{
    async update() {
      let data = this.$resetNull(this.record)
      if(data.id) await this.$updaterow(this.api, data, undefined, this.pagename)
      else await this.$insertrow(this.api, data, undefined, this.pagename)
      this.$emit('close')
    }
  }
}
</script>