<template>
    <div class="modal fade" id="showDepositReceipt" 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 class="me-2" style="width: 100px;">
                        <select style="min-width: 80px;" v-model="type_row" class="form-select">
                            <option value="1">{{ $t('Show') }}</option>
                            <option value="2">{{ $t("Hide") }}</option>
                        </select>
                    </div> -->
                    <div id="print-deposit-receipt" style="width: 198mm; margin: auto">
                        <div class="mortgage_loan">
                            <div class="mortgage_header mb-4">
                                <img src="images/logo.png" alt="" width="70px" class="position-absolute" style="top: 5px">
                                <div class="text-center">
                                    <h6 class="py-3"><u class="text_moul">បង្កាន់ដៃតម្កល់ទ្រព្យធានា</u></h6>
                                </div>
                                <p class="text-center">លេខកូដអតិថិជនៈ  {{ client.code }}</p>
                            </div>
                            <div class="mortgage_content">
                                <p style="text-indent: 50px">
                                    ខ្ញុំបាទ/នាងខ្ញុំឈ្មោះ {{ client.name }} ភេទ {{ client.gender ==1 ? 'ប្រុស':'ស្រី' }} សញ្ជាតិខ្មែរ ឯកសារអត្តសញ្ញាណ
                                    <span v-if="client.type_document == 1 ">អត្តសញ្ញាណប័ណ្ណ</span>
                                    <span v-else-if="client.type_document == 2 ">សំបុត្រកំណើត</span>
                                    <span v-else-if="client.type_document == 3 ">សៀវភៅស្នាក់នៅ</span>
                                    <span v-else-if="client.type_document == 4 ">សៀវភៅគ្រួសារ</span>
                                    <span v-else>…………………………</span>
                                    លេខ​ {{ client.id_card || '…………………………' }} បានយល់ព្រមតម្កល់ទ្រព្យធានានៅ
                                    {{ company.name_kh }}
                                    ដូចមានបញ្ជាក់ខាងក្រោម ៖
                                </p>
                                <table class="table table-sm table-bordered border-secondary">
                                    <tbody>
                                        <template v-if="receipt_type == 3">
                                            <tr class="text-center text-nowrap">
                                                <td>ប្រភេទទ្រព្យ</td>
                                                <td>ចំនួន</td>
                                                <td>ទំហំ</td>
                                                <td>លេខប័ណ្ណ</td>
                                                <td>ថ្ងៃចេញប័ណ្ណ</td>
                                                <td>ចេញដោយ</td>
                                            </tr>
                                            <tr class="text-center">
                                                <td> {{ real_estate_one?.cat_name }} </td>
                                                <td>1</td>
                                                <td>{{ real_estate_one?.size }}</td>
                                                <td>{{ real_estate_one?.number }}</td>
                                                <td>{{ real_estate_one?.date_made | onlyDate }}</td>
                                                <td>{{ real_estate_one?.issued_by }}</td>
                                            </tr>
                                        </template>
                                        <template v-if="receipt_type == 4">
                                            <tr class="text-center text-nowrap">
                                                <td>ប្រភេទទ្រព្យ</td>
                                                <td>ចំនួន</td>
                                                <td>ទំហំ</td>
                                                <td>លេខប័ណ្ណ</td>
                                                <td>ថ្ងៃចេញប័ណ្ណ</td>
                                                <td>ចេញដោយ</td>
                                            </tr>
                                            <tr class="text-center">
                                                <td> {{ real_estate_two?.cat_name }} </td>
                                                <td>1</td>
                                                <td>{{ real_estate_two?.size }}</td>
                                                <td>{{ real_estate_two?.number }}</td>
                                                <td>{{ real_estate_two?.date_made | onlyDate }}</td>
                                                <td>{{ real_estate_two?.issued_by }}</td>
                                            </tr>
                                        </template>
                                        <template v-if="receipt_type == 1">
                                            <tr class="text-center text-nowrap">
                                                <td>ប្រភេទទ្រព្យ</td>
                                                <td>ចំនួន</td>
                                                <td>លេខតួ</td>
                                                <td>ផ្លាកលេខ</td>
                                                <td>ថ្ងៃចេញប័ណ្ណ</td>
                                            </tr>
                                            <tr class="text-center">
                                                <td>{{ motor?.cat_name }} </td>
                                                <td>1</td>
                                                <td>{{ motor?.body_number }}</td>
                                                <td>{{ motor?.number_plate }}</td>
                                                <td>{{ motor?.date_made  | onlyDate }}</td>
                                            </tr>
                                        </template>
                                        <template v-if="receipt_type == 2">
                                            <tr class="text-center text-nowrap">
                                                <td>ប្រភេទទ្រព្យ</td>
                                                <td>ចំនួន</td>
                                                <td>លេខតួ</td>
                                                <td>ផ្លាកលេខ</td>
                                                <td>ថ្ងៃចេញប័ណ្ណ</td>
                                            </tr>
                                            <tr class="text-center">
                                                <td>{{ car?.cat_name }} </td>
                                                <td>1</td>
                                                <td>{{ car?.body_number }}</td>
                                                <td>{{ car?.number_plate }}</td>
                                                <td>{{ car?.date_made | onlyDate }}</td>
                                            </tr>
                                            <tr>
                                                <td>2. ទីចាត់ការគយនិងរដ្ឋាករ លេខលតាប័ត្រៈ
                                                    <span>{{ car?.customs_office}}</span>
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>3. លតាប័ត្របង់ពន្ធមធ្យោបាយដឹកជញ្ជូន ឆ្នាំៈ
                                                    <span>{{ car?.transportation }}</span>
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>4. វិញ្ញាបនបត្រត្រួតពិនិត្យលក្ខណៈបច្ចេកទេសរថយន្ត ថ្ងៃផុតកំណត់ៈ
                                                    <span>{{ car?.vehicle_technical_certificate_expire | onlyDate }}</span>
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>5. លិខិតទិញលក់រថយន្តចំនួនៈ
                                                    <span>{{ car?.letter_of_car}}</span>
                                                     / អត្តសញ្ញាណប័ណ្ណថតចម្លងចំនួនៈ
                                                     <span>{{ car?.copy_of_idcard}}</span>
                                                    </td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                            <td>6. ផ្សេងៗ</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </template>

                                        <template v-else></template>
                                    </tbody>
                                </table>
                                <p class="text-center">ទ្រព្យធានាខាងលើនេះ ត្រូវបានដាក់តម្កល់ធានាបំណុលលើកិច្ចសន្យាកម្ចីលេខ ៖ {{ loan.loan_code }}</p>
                                <p class="text-center">1. លេខគណនីៈ {{ loan.loan_code }} ចុះ{{ funDate(loan.installment_date) }}</p>
                                <p class="text-center mb-2">ម្ចាស់ទ្រព្យយល់ព្រមដកទ្រព្យធានាវិញនៅពេលបំណុលបានសងរួច និងបានប្រគល់សិទ្ធិដកដូចខាងក្រោម ៖ </p>


                                <table class="table table-sm table-bordered border-secondary">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <!-- <div class="d-flex justify-content-between text-center">
                                                    <p>ថ្ងៃទី .....................................</p>
                                                    <div class="d-flex">
                                                        <p class="pe-5">ថ្ងៃទី .....................................</p>
                                                        <p class="pe-3">ថ្ងៃទី .....................................</p>
                                                        <p class="ms-2">ថ្ងៃទី .....................................</p>
                                                    </div>
                                                </div> -->

                                                <div class="row text-nowrap">
                                                    <div class="col">
                                                        <p>ថ្ងៃទី .....................................</p>
                                                        <p><strong>ស្នាមមេដៃស្តាំអ្នកប្រគល់</strong></p>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <p>ឈ្មោះ ....................... </p>
                                                    </div>
                                                    <div class="col">
                                                        <p>ថ្ងៃទី .....................................</p>
                                                        <p><strong>ស្នាមមេដៃស្តាំអ្នកទទួលសិទ្ធិ</strong></p>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <p>ឈ្មោះ ....................... </p>
                                                    </div>
                                                    <div class="col">
                                                        <p>ថ្ងៃទី .....................................</p>
                                                        <p><strong>ហត្ថលេខាអ្នកទទួល</strong></p>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <p>ឈ្មោះ ....................... </p>
                                                    </div>
                                                    <div class="col">
                                                        <p>ថ្ងៃទី .....................................</p>
                                                        <p><strong>ហត្ថលេខា និងត្រាតំណាងក្រុមហ៊ុន</strong></p>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <p>ឈ្មោះ ....................... </p>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <p class="text-center"><strong>ផ្នែកខាងក្រោមនេះសម្រាប់ប្រើប្រាស់នៅពេលដែលអ្នកប្រគល់ទ្រព្យធានា ដកយកទ្រព្យធានាវិញ បន្ទាប់ពីសងប្រាក់កម្ចីគ្រប់ចំនួន៖</strong></p>
                                <p class="text-center mb-2">1.	លេខគណនីៈ ………………………………………… សងផ្តាច់នៅថ្ងៃទី {{ loan.expired_date | onlyDate }}</p>

                                <table class="table table-sm table-bordered border-secondary">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div class="row text-nowrap">
                                                    <div class="col">
                                                        <p>ថ្ងៃទី ...................................</p>
                                                        <p><strong>ស្នាមមេដៃស្តាំអ្នកទទួល</strong></p>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <p>ឈ្មោះ ....................... </p>
                                                    </div>
                                                    <div class="col">
                                                        <p>ថ្ងៃទី .....................................</p>
                                                        <p><strong>ហត្ថលេខាអ្នកប្រគល់</strong></p>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <p>ឈ្មោះ ....................... </p>
                                                    </div>
                                                    <div class="col">
                                                        <p>ថ្ងៃទី .....................................</p>
                                                        <p><strong>ហត្ថលេខា និងត្រាតំណាងក្រុមហ៊ុន</strong></p>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <br>
                                                        <p>ឈ្មោះ ....................... </p>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <p><strong>ចំណាំៈ</strong> ក្នុងករណី<strong>ភាគី(ខ)</strong> ចង់បង់ផ្តាច់មុនកំណត់ ឬចង់ស្នើសុំអ្វីមួយ ត្រូវផ្តល់ដំណឹងជូន<strong>ភាគី(ក)</strong> អោយបានមុន 1 (មួយ)ថ្ងៃក្នុងម៉ោង និងថ្ងៃធ្វើការ ។
                                   <strong>ភាគី(ខ)</strong> អាចដកឯកសារ ឬទ្រព្យបាន ចាប់ពីម៉ោង 09:00 នាទីព្រឹក ដល់ ម៉ោង 03:30 នាទីរសៀល ក្នុងម៉ោង និងថ្ងៃធ្វើការ។ ក្នុងករណី<strong>ភាគី(ខ)</strong> មិនបានផ្តល់ដំណឹងជូន<strong>ភាគី(ក)</strong> ជាមុនទេ បើសិនមានការរង់ចាំយូរ ឬយឺតយ៉ាវ ឬធ្វើជូនមិនបាន ឬមានការពិន័យផ្សេងៗទៀត គឺជាបន្ទុករបស់
                                   <strong>ភាគី(ខ)</strong> ទាំងស្រុង ។
                                </p>
                                <p><strong>បញ្ជាក់ៈ</strong> <strong>ភាគី(ខ)</strong>  ត្រូវភ្ជាប់មកជាមួយបង្កាន់ដៃតម្កល់ទ្រព្យធានានេះ   និងប័ណ្ណសម្គាល់អត្តសញ្ញាណច្បាប់ដើមរាល់ពេលស្នើអ្វីមួយ  ឬមកដកទ្រព្យធានា ។ អ្នកដាក់ទ្រព្យធានា និងអ្នកដកទ្រព្យត្រូវតែជាមនុស្សតែមួយ ។</p>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><img src="/icons/b_drop.png" alt="" /> {{ $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");
    export default {
        props:['loan','receipt_type','client','motor','car','real_estate_one','real_estate_two'],
        data(){
            return{
                moment : moment,
                company:"",
                type_row  : 1,
            }
        },
        created() {
            this.funGetCompany();
        },
        methods: {
            funDate(date) {
                if (date) {
                    return "ថ្ងៃទីៈ "+moment(date).format("DD")+"/" +(moment(date).format("MM"))+"/"+moment(date).format("YYYY");
                } else {
                    return "ថ្ងៃទី................... ខែ................... ឆ្នាំ...................";
                }
            },
            funGetCompany(){
                axios.get('admin-api/company').then((res) => {
                    this.company = res.data;
                });
            },
            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 "ធ្នូ";
                }
            },
            printP() {
                this.$htmlToPaper("print-deposit-receipt", {
                    styles: ["/css/app.css", "/css/print/mortgage-loan.css"],
                });
            },
        }
    }
</script>
<style lang="scss" scoped>

    .article-list{
        position: relative;
        padding-left: 10px;
        .list{
            position: absolute;
            left: 0;
        }
    }
</style>
