<template>
  <div
    v-if="record"
    id="printable"
  >
    <Caption v-bind="{ title: $lang('info') }" />
    <div class="columns is-multiline is-2 m-0">
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ $lang("code") }}:</label>
          <div class="control">
            <span>{{ record.code }}</span>
          </div>
          <p
            class="help is-danger"
            v-if="errors.type"
          >
            {{ errors.type }}
          </p>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Tài khoản:</label>
          <div class="control">
            <span>{{ record.account__code }}</span>
          </div>
          <p
            class="help is-danger"
            v-if="errors.type"
          >
            {{ errors.type }}
          </p>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Ngày hạch toán:</label>
          <div class="control">
            {{ $dayjs(record.date).format("L") }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ $lang("amount-only") }}:</label>
          <div class="control">
            {{ $numtoString(record.amount) }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Thu / chi:</label>
          <div class="control">
            {{ record.type__name }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Dư trước:</label>
          <div class="control">
            {{ $numtoString(record.balance_before) }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Dư sau:</label>
          <div class="control">
            {{ $numtoString(record.balance_after) }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Mã sản phẩm:</label>
          <div class="control">
            {{ record.product__trade_code }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Mã khách hàng:</label>
          <div class="control">
            {{ record.customer__code }}
          </div>
        </div>
      </div>

      <div class="column is-3">
        <div class="field">
          <label class="label">Người hạch toán:</label>
          <div class="control">
            {{ `${record.inputer__fullname}` }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ $lang("time") }}:</label>
          <div class="control">
            {{ `${$dayjs(record.create_time).format("L")}` }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">Ref:</label>
          <div class="control">
            {{ `${record.ref || "/"}` }}
          </div>
        </div>
      </div>
      <div class="column is-8">
        <div class="field">
          <label class="label">{{ $lang("content") }}:</label>
          <div class="control">
            {{ `${record.content}` }}
          </div>
        </div>
      </div>
    </div>

    <!-- PHẦN THÔNG TIN PHÂN BỔ -->
    <Caption v-bind="{ title: 'Thông tin phân bổ' }" />
    <!-- BẢNG CHI TIẾT PHÂN BỔ -->
    <div
      v-if="record.allocation_detail && record.allocation_detail.length > 0"
      class="mt-4"
    >
      <div class="table-container">
        <table class="table is-fullwidth is-striped is-hoverable is-bordered">
          <thead>
            <tr class="">
              <th class="has-background-primary has-text-white has-text-centered">STT</th>
              <th class="has-background-primary has-text-white has-text-centered">Mã lịch</th>
              <th class="has-background-primary has-text-white has-text-centered">Loại</th>
              <th class="has-background-primary has-text-white has-text-centered">Tổng phân bổ</th>
              <th class="has-background-primary has-text-white has-text-centered">Gốc</th>
              <th class="has-background-primary has-text-white has-text-centered">Phạt</th>
              <th class="has-background-primary has-text-white has-text-centered">Miễn lãi</th>
              <th class="has-background-primary has-text-white has-text-centered">Ngày phân bổ</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in record.allocation_detail"
              :key="index"
            >
              <td class="has-text-centered">{{ index + 1 }}</td>
              <td>
                <span class="tag is-link is-light">{{ item.schedule_code || item.schedule_id }}</span>
              </td>
              <td class="has-text-centered">
                <span
                  v-if="item.type === 'REDUCTION'"
                  class="tag is-warning"
                  >Miễn lãi</span
                >
                <span
                  v-else
                  class="tag is-success"
                  >Thanh toán</span
                >
              </td>
              <td class="has-text-right">
                <strong>{{ $numtoString(item.amount) }}</strong>
              </td>
              <td class="has-text-right">
                <span
                  v-if="item.principal"
                  class="has-text-info has-text-weight-semibold"
                >
                  {{ $numtoString(item.principal) }}
                </span>
                <span
                  v-else
                  class="has-text-grey-light"
                  >-</span
                >
              </td>
              <td class="has-text-right">
                <span
                  v-if="item.penalty"
                  class="has-text-danger has-text-weight-semibold"
                >
                  {{ $numtoString(item.penalty) }}
                </span>
                <span
                  v-else
                  class="has-text-grey-light"
                  >-</span
                >
              </td>
              <td class="has-text-right">
                <span
                  v-if="item.penalty"
                  class="has-text-danger has-text-weight-semibold"
                >
                  {{ $numtoString(item.penalty_reduce) }}
                </span>
                <span
                  v-else
                  class="has-text-grey-light"
                  >-</span
                >
              </td>
              <td class="has-text-centered">
                {{ $dayjs(item.date).format("L HH:mm:ss") }}
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr class="has-background-light">
              <td
                colspan="3"
                class="has-text-right has-text-weight-bold"
              >
                Tổng cộng:
              </td>
              <td class="has-text-right has-text-weight-bold">
                {{ $numtoString(totalAllocated) }}
              </td>
              <td class="has-text-right has-text-weight-bold has-text-info">
                {{ $numtoString(totalPrincipal) }}
              </td>
              <td class="has-text-right has-text-weight-bold has-text-danger">
                {{ $numtoString(totalPenalty) }}
              </td>
              <td class="has-text-right has-text-weight-bold has-text-danger">
                {{ $numtoString(totalPenaltyReduce) }}
              </td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div
      v-else
      class="notification is-info is-light mt-4"
    >
      <p class="has-text-centered">Chưa có dữ liệu phân bổ cho bút toán này.</p>
    </div>

    <Caption
      class="mt-5"
      v-bind="{ title: 'Chứng từ' }"
    ></Caption>
    <FileGallery v-bind="{ row: record, api: 'entryfile' }"></FileGallery>
    <div
      class="mt-5"
      id="ignore"
    >
      <button
        class="button is-primary has-text-white mr-2"
        @click="$exportpdf('printable', record.code, 'a4', 'landscape')"
      >
        {{ $lang("print") }}
      </button>
      <button
        v-if="record.category === 2"
        class="button is-light"
        @click="viewPhieuThuTienMat"
      >
        Xem phiếu thu
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["row"],
  data() {
    return {
      errors: {},
      record: undefined,
    };
  },
  async created() {
    this.record = await this.$getdata("internalentry", { code: this.row.code }, undefined, true);
  },
  computed: {
    // Tính tổng số tiền đã phân bổ
    totalAllocated() {
      if (!this.record || !this.record.allocation_detail) return 0;
      return this.record.allocation_detail.reduce((sum, item) => sum + (item.amount || 0), 0);
    },
    // Tính tổng gốc
    totalPrincipal() {
      if (!this.record || !this.record.allocation_detail) return 0;
      return this.record.allocation_detail.reduce((sum, item) => sum + (item.principal || 0), 0);
    },
    // Tính tổng phạt
    totalPenalty() {
      if (!this.record || !this.record.allocation_detail) return 0;
      return this.record.allocation_detail.reduce((sum, item) => sum + (item.penalty || 0), 0);
    },
    // Tính tổng phạt đã giảm
    totalPenaltyReduce() {
      if (!this.record || !this.record.allocation_detail) return 0;
      return this.record.allocation_detail.reduce((sum, item) => sum + (item.penalty_reduce || 0), 0);
    },
  },
  methods: {
    selected(attr, obj) {
      this.record[attr] = obj;
      this.record = this.$copy(this.record);
      if (attr === "_type") this.category = obj.category__code;
    },
    viewPhieuThuTienMat() {
      const url = `${this.$getpath()}static/contract/PHIEU_THU_TIEN_MAT-${this.record.code}.pdf`;
      window.open(url, "_blank");
    },
  },
};
</script>
<style scoped>
.column {
  padding-inline: 0;
}
</style>
