<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('DD/MM/YYYY') }}
                    </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('DD/MM/YYYY')}` }}
                    </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('DD/MM/YYYY 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>