<template>
    <div class="modal fade" id="showReceiptPaymentVehicle" aria-hidden="true" role="dialog" data-backdrop="static">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-span="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="print-receipt-payment-vehicle" style="width: 198mm; margin: auto">
                        <div class="mortgage_loan">
                            <div class="mortgage_header">
                                <div class="text-center">
                                    <h6 class="text_moul mb-2">ព្រះរាជាណាចក្រកម្ពុជា</h6>
                                    <h6 class="text_moul">ជាតិ សាសនា ព្រះមហាក្សត្រ</h6>
                                    <img src="icons/contract.png" alt="">
                                    <p><u class="text_moul">លិខិតប្រគល់-ទទួលប្រាក់ និងរថយន្ត</u></p>
                                </div>
                            </div>

                            <div class="mortgage_content">
                                <p>
                                    <strong>យោង៖</strong>
                                    ភតិសន្យា ចុះ{{ funDate(obj.loan?.installment_date) }}
                                </p>

                                <p>
                                    <strong>ភតិបតី៖</strong>
                                    លោក <span class="text_moul">គួង ឃុនលី</span> (KUONG KHUNLY)
                                    ភេទប្រុស ថ្ងៃខែឆ្នាំកំណើត ១០ ០៥ ១៩៩៧
                                    សញ្ញាតិខ្មែរ ជនជាតិខ្មែរ
                                    កាន់អត្តសញ្ញាប័ណ្ណលេខៈ ០១០៩៤៥១១៨
                                    ចុះថ្ងៃទី២៤ ខែ០៧ ឆ្នាំ២០២៥
                                    មានអាស័យដ្ឋានស្ថិតនៅផ្ទះ៦៤៤ ផ្លូវលំ ភូមិនមានជ័យ
                                    សង្កាត់ស្ទឹងមានជ័យ ខណ្ឌមានជ័យ រាជធានីភ្នំពេញ
                                    (តទៅហៅកាត់ថា <strong>« ភាគី ក »</strong>)
                                    លេខទូរស័ព្ទទំនាក់ទំនង 090 310 678 ។
                                </p>

                                <p>
                                    <strong>ភតិកៈ៖</strong>
                                    ឈ្មោះ <span class="text_moul">{{ obj.client?.name || '..............................' }}</span>
                                    <span v-if="obj.client?.name_en">({{ obj.client?.name_en }})</span>
                                    ភេទ{{ genderText }}
                                    ថ្ងៃខែឆ្នាំកំណើត {{ formatDateNumber(obj.client?.date_of_birth) }}
                                    សញ្ញាតិខ្មែរ ជនជាតិខ្មែរ
                                    កាន់អត្តសញ្ញាប័ណ្ណលេខៈ {{ obj.client?.id_card || '..............................' }}
                                    ចុះថ្ងៃទី{{ dayOnly(obj.client?.create_card_date) }}
                                    ខែ{{ monthOnly(obj.client?.create_card_date) }}
                                    ឆ្នាំ{{ yearOnly(obj.client?.create_card_date) }}
                                    មានអាស័យដ្ឋានស្ថិតនៅ
                                    ផ្ទះ{{ obj.client?.house_no || '......' }}
                                    ផ្លូវ{{ obj.client?.street_no || '......' }}
                                    ភូមិ{{ obj.client?.village_kh || '.......................' }}
                                    សង្កាត់{{ obj.client?.commune_kh || '...................................' }}
                                    ខណ្ឌ{{ obj.client?.district_kh || '.....................................' }}
                                    ខេត្ត/ក្រុង{{ obj.client?.province_kh || '...............................' }}
                                    (តទៅហៅកាត់ថា <strong>« ភាគី ខ »</strong>)
                                    លេខទូរស័ព្ទទំនាក់ទំនង {{ obj.client?.phone || '................................' }} ។
                                </p>

                                <p>
                                    យោងតាមកិច្ចសន្យាខាងលើ ភាគី «ខ» បានប្រគល់ប្រាក់ចំនួន
                                    USD {{ receiptAmount | numberFomartValue }}
                                    ({{ totalToword(receiptAmount, 2) }})
                                    ដុល្លារអាមេរិក ជូនទៅ<strong>ភាគី “ក”</strong>
                                    សម្រាប់ថ្លៃឈ្នួលរថយន្តខែ{{ funMonth(moment(contractDate).format("MMM")) }}
                                    ឆ្នាំ{{ yearOnly(contractDate) }}
                                    រីឯ <strong>ភាគី “ក”</strong> ក៏បានទទួលត្រឹមត្រូវ ។
                                    ទន្ទឹមនឹងនេះ <strong>ភាគី “ក”</strong> ក៏បានប្រគល់រថយន្ត ០១(មួយ) គ្រឿង
                                    ម៉ាកៈ {{ vehicleBrand }}
                                    ពណ៍ៈ {{ vehicleColor }}
                                    ប្រភេទៈ {{ vehicleType }}
                                    ផលិតនៅឆ្នាំ {{ vehicleYear }}
                                    លេខតួ {{ vehicleBodyNo }}
                                    លេខម៉ាស៊ីនៈ {{ vehicleEngineNo }}
                                    ផ្លាកលេខ {{ vehiclePlateNo }}
                                    ឲ្យទៅ<strong>ភាគី « ខ »</strong>
                                    ហើយ<strong>ភាគី « ខ »</strong> ក៏បានទទួលរថយន្តដូចមានភិនភាគខាងលើ
                                    ពី <strong>«ភាគី ក»</strong> រួចរាល់ផងដែរ។
                                </p>

                                <p class="text-center">
                                    ធ្វើនៅរាជធានីភ្នំពេញ, {{ funDate(obj.loan?.installment_date) }}
                                </p>

                                <div class="row page-avoid text-center">
                                    <div class="col-6">
                                        <p class="text_moul">ភតិបតី / ភាគី ក</p>
                                        <br>
                                        <br>
                                        <br>
                                        <br>
                                        <!-- <p><span class="text_moul">គួង ឃុនលី</span></p> -->
                                    </div>
                                    <div class="col-6">
                                        <p class="text_moul">ភតិកៈ / ភាគី ខ</p>
                                        <br>
                                        <br>
                                        <br>
                                        <br>
                                        <!-- <p>
                                            <span class="text_moul">{{ obj.client?.name }}</span>
                                        </p> -->
                                    </div>
                                </div>

                                <!-- <div class="text-center">
                                    <div class="fw-bold">
                                        <p>បានឃើញ និង បញ្ជាក់ថា៖ </p>
                                        <p>ស្នាមមេដៃខាងលើ ពិតជារបស់សាម៉ីខ្លួនប្រាកដមែន។</p>
                                        <p>{{ funDateChankati(obj.loan?.installment_date) }}</p>
                                        <p>{{ funDate(obj.loan?.installment_date) }}</p>
                                    </div>
                                    <p class="text_moul">មេធាវី</p>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ $t("Close") }}</button>
                    <button type="button" class="btn btn-primary" @click="printP">
                        {{ $t('Print') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var moment = require("moment");
    import { currencyToWord } from "number_to_khmer_word";

    export default {
        props: ['obj'],
        data() {
            return {
                moment: moment,
                currencyToWord: currencyToWord,
            }
        },
        computed: {
            contractDate() {
                return this.obj?.loan?.installment_date || this.obj?.loan?.start_date || null;
            },
            vehicle() {
                return this.obj?.collateral_motor_first || this.obj?.collateral_motor_second || {};
            },
            genderText() {
                if (this.obj.client?.gender == 1) {
                    return 'ប្រុស';
                } else if (this.obj.client?.gender == 2) {
                    return 'ស្រី';
                }
                return '........';
            },
            receiptAmount() {
                if (this.obj?.data && this.obj.data.length > 0) {
                    return this.obj.data[0]?.received || this.obj.data[0]?.payment_per_month || this.obj.loan?.loan_out || 0;
                }
                return this.obj?.loan?.loan_out || 0;
            },
            vehicleBrand() {
                return this.vehicle?.model_type || '................................';
            },
            vehicleColor() {
                return this.vehicle?.color || '................................';
            },
            vehicleType() {
                return this.vehicle?.pawn_type || '................................';
            },
            vehicleYear() {
                return this.vehicle?.year || '................................';
            },
            vehicleBodyNo() {
                return this.vehicle?.cylinder_size || '................................';
            },
            vehicleEngineNo() {
                return this.vehicle?.engine_number || '................................';
            },
            vehiclePlateNo() {
                return this.vehicle?.number_plate || '................................';
            },
        },
        methods: {
            printP() {
                this.$htmlToPaper("print-receipt-payment-vehicle", {
                    styles: ["/css/app.css", "/css/print/mortgage-loan.css"],
                });
            },
            funDateChankati(date) {
                return moment(date).toLunarDate();
            },
            funDate(date) {
                if (date) {
                    return "ថ្ងៃទី" + moment(date).format("DD") + " ខែ" + this.funMonth(moment(date).format("MMM")) + " ឆ្នាំ" + moment(date).format("YYYY");
                } else {
                    return 'ថ្ងៃទី................... ខែ................... ឆ្នាំ...................'
                }
            },
            funMonth(mon) {
                if (mon == "Jan") {
                    return "មករា";
                } else if (mon == "Feb") {
                    return "កុម្ភៈ";
                } else if (mon == "Mar") {
                    return "មីនា";
                } else if (mon == "Apr") {
                    return "មេសា";
                } else if (mon == "May") {
                    return "ឧសភា";
                } else if (mon == "Jun") {
                    return "មិថុនា";
                } else if (mon == "Jul") {
                    return "កក្កដា";
                } else if (mon == "Aug") {
                    return "សីហា";
                } else if (mon == "Sep") {
                    return "កញ្ញា";
                } else if (mon == "Oct") {
                    return "តុលា";
                } else if (mon == "Nov") {
                    return "វិច្ឆិកា";
                } else if (mon == "Dec") {
                    return "ធ្នូ";
                }
            },
            totalToword(loan_out, currency_id) {
                if (currency_id == 1) {
                    if (loan_out) {
                        return currencyToWord(loan_out, "KHR").slice(1).replace(/-/g, "");
                    } else {
                        return currencyToWord(0, "KHR").slice(1);
                    }
                } else {
                    if (loan_out) {
                        return currencyToWord(loan_out, "USD")
                            .slice(1)
                            .replace(/-/g, " ")
                            .replace(/ ដុល្លារ គត់/, " ដុល្លារសហរដ្ឋអាមេរិចគត់");
                    } else {
                        return currencyToWord(0, "USD").slice(1);
                    }
                }
            },
            dayOnly(date) {
                if (date) {
                    return moment(date).format("DD");
                }
                return '........';
            },
            monthOnly(date) {
                if (date) {
                    return moment(date).format("MM");
                }
                return '........';
            },
            yearOnly(date) {
                if (date) {
                    return moment(date).format("YYYY");
                }
                return '........';
            },
            formatDateNumber(date) {
                if (date) {
                    return moment(date).format("DD MM YYYY");
                }
                return '........ ........ ........';
            },
        }
    }
</script>