<template>
<div>
<div class="columns is-multiline mx-0">
<div class="column is-8">
    <div class="field">
  <label class="label">{{ $lang('account') }}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <SearchBox v-bind="{api:'internalaccount', field:'label', column:['label'], first: true, optionid: record.account}" 
    :disabled="record.account" @option="selected('_account', $event)" v-if="!record.id"></SearchBox>
    <span v-else>{{record.account__code}}</span>
  </div>
  <p class="help is-danger" v-if="errors._account">{{ errors._account }}</p>
</div>
</div>
<div class="column is-4">
        <div class="field">
          <label class="label"
            >Ngày hạch toán<b class="ml-1 has-text-danger">*</b></label
          >
          <div class="control">
            <Datepicker
              v-bind="{ record: record, attr: 'date', maxdate: new Date()}"
              @date="selected('date', $event)"
            ></Datepicker>
          </div>
          <p class="help is-danger" v-if="errors.issued_date">{{ errors.issued_date }}</p>
        </div>
</div>
<div class="column is-4">
    <div class="field">
  <label class="label">Thu / chi<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <SearchBox v-bind="{api:'entrytype', field:'name', column:['name'], first: true, optionid: record.type}" 
    :disabled="record.type" @option="selected('_type', $event)" v-if="!record.id"></SearchBox>
    <span v-else>{{record.type__name}}</span>
  </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">{{$lang('amount-only')}}<b class="ml-1 has-text-danger">*</b></label>
      <div class="control">
      <InputNumber v-bind="{record: record, attr: 'amount', placeholder: ''}" @number="selected('amount', $event)"></InputNumber>
    </div>
    <p class="help is-danger" v-if="errors.amount">{{errors.amount}}</p>
    </div>
  </div>
  <div class="column is-4">
    <div class="field">
  <label class="label">Phương thức thanh toán<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <SearchBox v-bind="{api:'entrycategory', field:'name', column:['name'], first: true, optionid: record.type}" 
    :disabled="record.type" @option="selected('_category', $event)" v-if="!record.id"></SearchBox>
    <span v-else>{{record.type__name}}</span>
  </div>
  <p class="help is-danger" v-if="errors._type">{{ errors._type }}</p>
</div>
</div>

  <div class="column is-6">
    <div class="field">
  <label class="label">Sản phẩm<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
          <SearchBox v-bind="{
          api: 'product',
          field: 'label',
          searchfield: ['code', 'trade_code', 'type__name', 'land_lot_size', 'zone_type__name'],
          column: ['code', 'trade_code', 'type__name', 'land_lot_size', 'zone_type__name'],
          first: true
        }" @option="selected('product', $event)" />
  </div>
  <p class="help is-danger" v-if="errors._type">{{ errors._type }}</p>
</div>
</div>
<div class="column is-6">
    <div class="field">
  <label class="label">Khách hàng<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <SearchBox v-bind="{
          api: 'customer',
          field: 'label',
          searchfield: ['code', 'fullname', 'phone', 'legal_code'],
          column: ['code', 'fullname', 'phone', 'legal_code'],
          first: true
        }" @option="selected('customer', $event)" />
  </div>
  <p class="help is-danger" v-if="errors._type">{{ errors._type }}</p>
</div>
</div>
  <div class="column is-12">
      <div class="field">
  <label class="label">{{ $lang('content') }}<b class="ml-1 has-text-danger">*</b></label>
  <div class="control">
    <textarea class="textarea" rows="2" v-model="record.content"></textarea>
  </div>
  <p class="help is-danger" v-if="errors.content">{{errors.content}}</p>
</div>
</div>
<div class="column is-4">
        <div class="field">
  <label class="label">Mã tham chiếu</label>
  <div class="control">
    <input class="input has-text-black" type="text" placeholder="Tối đa 30 ký tự" v-model="record.ref">
  </div>

</div>
</div>
<div class="column is-8" v-if="record._category && record._category.id === 1">
  <div class="field">
    <label class="label">Ngân hàng<b class="ml-1 has-text-danger">*</b></label>
    <div class="control">
      <input class="input has-text-black" type="text" v-model="record.bank">
    </div>
    <p class="help is-danger" v-if="errors.bank">{{ errors.bank }}</p>
  </div>
</div>
<div class="column is-12" v-if="entry">
  <div class="field">
    <label class="label">Chứng từ đi kèm (nếu có)</label>
    <div class="control">
    <FileGallery v-bind="{row: entry, pagename: pagename, api: 'entryfile', info: false}"></FileGallery>
  </div>
  </div>
</div>
</div>
<div class="mt-5 ml-3" v-if="!entry">
    <button 
      :class="[
        'button is-primary has-text-white mr-2', 
        isUpdating && 'is-loading' 
      ]" 
      @click="confirm()">{{$lang('confirm')}}</button>
  </div>
  <Modal @close="showContractModal=undefined" v-bind="showContractModal" v-if="showContractModal"></Modal>
  <Modal @close="showmodal=undefined" v-bind="showmodal" @confirm="update()" v-if="showmodal"></Modal>
</div>
</template>
<script>
import { useStore } from '~/stores/index'
export default {
  setup() {
    const store = useStore()
    return {store}
  },
  props: ['pagename', 'row', 'option'],
  data() {
    return {
      record: {date: this.$dayjs().format('YYYY-MM-DD')},
      errors: {},
      isUpdating: false,
      showmodal: undefined,
      showContractModal: undefined,
      entry: undefined
    }
  },
  created() {
    if(!this.option) return
    this.record.account = this.option.account
    this.record.type = this.option.type
  },
  methods: {
    selected(attr, obj) {
      // Khi đổi category, reset trường bank nếu category không phải id=1
      if (attr === '_category' && obj && obj.id !== 1) {
        this.record.bank = undefined
      }
      this.record[attr] = obj
      this.record = this.$copy(this.record)
    },
    checkError() {
      this.errors = {}
      if(this.$empty(this.record._account)) this.errors._account = 'Chưa chọn tài khoản'
      if(this.$empty(this.record._type)) this.errors._type = 'Chưa chọn loại hạch toán'
      if(this.$empty(this.record.amount)) this.errors.amount = 'Chưa nhập số tiền'
      else if(this.$formatNumber(this.record.amount)<=0) this.errors.amount = 'Số tiền phải > 0'
      if(this.$empty(this.record.content)) this.errors.content = 'Chưa nhập nội dung'
      // Validate bank nếu category.id === 1
      if(this.record._category && this.record._category.id === 1 && this.$empty(this.record.bank)) {
        this.errors.bank = 'Chưa nhập tên ngân hàng'
      }
      if(Object.keys(this.errors).length>0) return true
      if(this.record._type.code==='DR' && (this.record._account.balance<this.$formatNumber(this.record.amount))) {
        this.errors._account = 'Số dư tài khoản không đủ để trích nợ'
      }
      return Object.keys(this.errors).length>0
    },
    confirm() {
      if(this.checkError()) return
      this.showmodal = {component: `dialog/Confirm`,vbind: {content: this.$lang('confirm-action'), duration: 10}, 
      title: this.$lang('confirm'), width: '500px', height: '100px'}
    },
    async update() {
      this.isUpdating = true;
      let obj1 = {
        code: this.record._account.code,
        amount: this.record.amount,
        content: this.record.content,
        type: this.record._type.code,
        category: this.record._category ? this.record._category.id : 1,
        bank: (this.record._category && this.record._category.id === 1) ? (this.record.bank || null) : null,
        user: this.store.login.id,
        ref: this.row ? this.row.code : (!this.$empty(this.record.ref) ? this.record.ref.trim() : null),
        customer: this.record.customer ? this.record.customer.id : null,
        product: this.record.product ? this.record.product.id : null,
        date: this.$empty(this.record.date) ? null : this.record.date
      }
      let rs1 = await this.$insertapi('accountentry', obj1, undefined, false)
      if(rs1==='error') return

      if (this.record._category.id === 2) {
        const genDoc = await this.$generateDocument({
          doc_code: 'PHIEU_THU_TIEN_MAT',
          entry_id: rs1.id,
          output_filename: `PHIEU_THU_TIEN_MAT-${rs1.code}`
        });

        await this.$insertapi('file', {
           name: genDoc.data.pdf,
           user: this.store.login.id,
           type: 4,
           size: 1000,
           file: genDoc.data.pdf 
        });

        this.showContractModal = {
          component: "application/Contract",
          title: "Phiếu thu tiền mặt",
          width: "95%",
          height: "95vh",
          vbind: {
            directDocument: genDoc.data
          },
        }
      }
      
      this.entry = rs1
      if(this.pagename) {
        let data = await this.$getdata('internalaccount', {code__in: [this.record._account.code]})
        this.$updatepage(this.pagename, data)
      }
      this.isUpdating = false;
      this.$emit('modalevent', {name: 'entry', data: rs1})
      this.$dialog(`Hạch toán <b>${this.record._type.name}</b> số tiền <b>${this.$numtoString(this.record.amount)}</b> vào tài khoản <b>${this.record._account.code}</b> thành công.`, 'Thành công', 'Success', 10)
    }
  }
}
</script>