<script setup>
const props = defineProps({
  allo: Object,
  i: Number,
  length: Number,
  productId: Number,
  amount_remain: Number,
  totalByRef: Object,
});

const emit = defineEmits(['removeAllocation', 'setAllo']);

const typeOptions = [
  {
    label: 'Gốc',
    value: 'PRINCIPAL',
  },
  {
    label: 'Lãi',
    value: 'PENALTY',
  },
  // {
  //   label: 'Miễn giảm',
  //   value: 'REDUCTION',
  // },
];
</script>
<template>
  <div class="mb-4" style="position: relative">
  <a
    v-if="length > 1"
    class="has-text-danger is-size-7"
    style="position: absolute; top: 0.5rem; right: 0.75rem; cursor: pointer"
    @click="emit('removeAllocation', i)"
  >
    Xóa
  </a>
  <div
    class="columns is-multiline is-mobile mb-0"
    style="border-top: 1px solid #bbbbbb"
  >
    <!-- InternalEntry Ref -->
    <div class="column is-6">
      <div class="field">
        <label class="label">Bút toán <span class="has-text-danger">*</span></label>
        <div class="control">
          <SearchBox
            v-bind="{
              api: 'internalentry',
              field: 'label',
              column: ['code'],
              first: true,
              filter: {
                product: props.productId,
                allocation_remain__gt: 0,
              },
            }"
            @option="(entry) => { 
              emit('setAllo', { key: 'date', value: entry.date, i }) ;
              emit('setAllo', { key: 'ref', value: entry.code, i });
              emit('setAllo', { key: 'allocation_remain', value: entry.allocation_remain, i });
            }"
          />
        </div>
      </div>
    </div>
     <!-- Type -->
    <div class="column is-2">
      <div class="field">
        <label class="label"
          >Loại <span class="has-text-danger">*</span></label
        >
        <div class="control">
          <div class="select is-fullwidth">
            <select v-model="allo.type">
              <option
                v-for="option in typeOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </option>
            </select>
          </div>
        </div>
        <p 
          v-if="amount_remain === 0 && allo.type === 'PRINCIPAL'"
          class="help is-danger"
        >Số tiền gốc là 0</p>
      </div>
    </div>
    <!-- Amount -->
    <div class="column is-4">
      <div class="field">
        <label class="label"
          >Giá trị <span class="has-text-danger">*</span></label
        >
        <div class="control">
          <InputNumber
            v-bind="{
              record: allo,
              attr: 'amount',
              defaultValue: true,
            }"
            @number="(value) => emit('setAllo', { key: 'amount', value, i })"
          />
        </div>
        <p 
          v-if="allo.ref && totalByRef && totalByRef[allo.ref] > allo.allocation_remain"
          class="help is-danger"
        >
          Tổng giá trị phân bổ bút toán vượt số tiền chưa phân bổ: 
          <FormatNumber :value="allo.allocation_remain" />
          (Tổng hiện tại: <FormatNumber :value="totalByRef[allo.ref]" />)
        </p>
      </div>
    </div>
  </div>
</div>
</template>