<template>
<div>
<div class="columns is-multiline mx-0">
    <div class="column is-3">
      <div class="field">
  <label class="label">{{findLang('name')}}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input has-text-black" type="text" placeholder="" disabled v-model="record.fullname">
  </div>
</div>
    </div>
    <div class="column is-6">
      <div class="field">
  <label class="label">{{findLang('job')}}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input has-text-black" type="text" placeholder="" disabled v-model="record.job__title">
  </div>
</div>
    </div>
    <div class="column is-3">
      <div class="field">
  <label class="label">{{findLang('phone')}}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input has-text-black" type="text" placeholder="" disabled v-model="record.phone">
  </div>
  <p class="help is-danger" v-if="errors.phone">{{ errors.phone }}</p>
</div>
    </div>
    <div class="column is-4">
      <div class="field">
  <label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input has-text-black" type="text" disabled placeholder="" v-model="record.email">
  </div>
</div>
    </div>
    <div class="column is-5">
      <div class="field">
  <label class="label">{{findLang('address')}}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input has-text-black" type="text" disabled placeholder="" v-model="record.address">
  </div>
</div>
    </div>
    <div class="column is-3">
      <div class="field">
  <label class="label">{{findLang('apply-date')}}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input has-text-black" type="text" placeholder="" disabled :value="$dayjs(record.create_time).format('DD/MM/YYYY hh:mm')">
  </div>
</div>
    </div>
    <div class="column is-9">
      <div class="field">
  <label class="label">Link<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <input class="input" type="text" disabled placeholder="" v-model="record.link">
  </div>
</div>
    </div>
    <div class="column is-3">
      <div class="field">
  <label class="label">{{findLang('status')}}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <SearchBox v-bind="{api:'applyresult', field: store.lang==='en'? 'en' : 'name', column:[store.lang==='en'? 'en' : 'name'], 
    first: true, optionid: record.result, sort: 'name', position: 'is-top-left'}" @option="selected('_result', $event)"></SearchBox>
  </div>
  <p class="help is-danger" v-if="errors.url_web">{{ errors.url_web }}</p>
</div>
    </div>
  <div class="column is-12">
    <div class="mt-3">
      <button class="button is-primary has-text-white" @click="save()">{{findLang('save')}}</button>
    </div>
  </div>
</div>
</div>
</template>
<script>
import { useStore } from '~/stores/index'
export default {
  setup() {
    const store = useStore()
    return { store }
  },
  props: ['pagename', 'row'],
  data() {
    return {
      errors: {},
      record: this.$copy(this.row || {})
    }
  },
  methods: {
    findLang(code) {
      let found = this.$find(this.store.common, {code: code})
      return found? found[this.store.lang] : null
    },
    selected(attr, obj) {
      this.record.result = obj.id 
    },
    async save() {
      let found = this.$findapi('jobapply')
      await this.$updaterow('jobapply', this.record, found.params.values, this.pagename)
    }
  }
}
</script>