<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 id="print-mortgage-loan" style="width: 198mm; margin: auto" v-if="data.Contract">
                        <div class="mortgage_loan">
                            <div class="mortgage_header">
                                <img src="images/logo.png" alt="" width="70px" class="position-absolute" style="top: 5px">
                                <div class="text-center">
                                    <h6 class="text_moul mb-2">ព្រះរាជាណាចក្រកម្ពុជា</h6>
                                    <h6 class="text_moul">ជាតិ សាសនា  ព្រះមហាក្សត្រ</h6>
                                    <img src="icons/contract.png" alt="">
                                    <h6 class="mb-3"><u class="text_moul">បង្កាន់ដៃតម្កល់ទ្រព្យ</u></h6>
                                </div>

                                <div class="position-absolute" style="top: 60px; right: 0">
                                    <p>លេខកូដអតិថិជនៈ {{data.client.code}}</p>
                                </div>
                            </div>
                            <div class="mortgage_content">
                                <p><strong>១. <input type="checkbox"> កម្មសិទ្ធិរបស់អតិថិជន</strong></p>
                                <p>
                                    ម្ចាស់កម្មសិទ្ធិឈ្មោះ <strong>{{data.client.name}}</strong>
                                    និងឈ្មោះ
                                    <spann v-if="data.Profiles!=null">
                                        <strong>{{data.Profiles.name}}</strong> ត្រូវជា <span v-if="data.Profiles.relationship!=null">{{data.Profiles.relationship}}</span><span v-else>........................</span>
                                    </spann>
                                    <span v-else>
                                        ................................................... ត្រូវជា........................
                                    </span>
                                </p>
                                <p><strong>២. <input type="checkbox"> កម្មសិទ្ធិរបស់អ្នកផ្សេង</strong></p>
                                <p>
                                    ម្ចាស់កម្មសិទ្ធិឈ្មោះ ................................................... និងឈ្មោះ................................................... ត្រូវជា........................
                                </p>
                                <strong>ប្រភេទលិខិតសំគាល់ទ្រព្យតម្កល់</strong>
                                <div class="ps-4">
                                    <p v-for="(val,index) in data.collateral_detail" :key="index">
                                        {{index+1}}.{{ val.title }} លេខ{{ val.number }} ចុះ{{funDate(val.date_made)}}
                                    </p>
                                </div>
                                <p class="mb-1"><strong>បានពិនិត្យ និងបានទទួលទ្រព្យតម្កល់ខាងលើ</strong></p>

                                <table class="table table-bordered border-secondary">
                                    <tbody>
                                        <tr>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center"><strong>តំណាង</strong></p>
                                                <p class="text-center"> <strong>វឌ្ឍនភាព ភីធី ឃែស ផន សប</strong></p>
                                                <p class="text-center">ហត្ថលេខានិងត្រា</p>

                                            </td>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center">ហត្ថលេខានិងឈ្មោះ </p>
                                                <p class="text-center"><strong >អ្នកទទួល</strong></p>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <p>ឈ្មោះ................................</p>
                                            </td>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center">ស្នាមមេដៃស្តាំនិងឈ្មោះ </p>
                                                <p class="text-center"><strong>អ្នកប្រគល់</strong></p>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <p>ឈ្មោះ................................</p>
                                            </td>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center">ស្នាមមេដៃស្តាំនិងឈ្មោះ </p>
                                                <p class="text-center"> <strong>អ្នកដាក់ទ្រព្យតម្កល់ជំនួស</strong></p>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <p>ឈ្មោះ................................</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p class="mb-1"><strong>បានពិនិត្យ និងបានប្រគល់ទ្រព្យតម្កល់ខាងលើ</strong></p>

                                <table class="table table-bordered border-secondary">
                                    <tbody>
                                        <tr>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center"><strong>តំណាង</strong></p>
                                                <p class="text-center"> <strong>វឌ្ឍនភាព ភីធី ឃែស ផន សប</strong></p>
                                                <p class="text-center">ហត្ថលេខានិងត្រា</p>

                                            </td>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center">ហត្ថលេខានិងឈ្មោះ </p>
                                                <p class="text-center"><strong >អ្នកប្រគល់</strong></p>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <p>ឈ្មោះ................................</p>
                                            </td>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center">ស្នាមមេដៃស្តាំនិងឈ្មោះ </p>
                                                <p class="text-center"><strong >អ្នកទទួល</strong></p>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <p>ឈ្មោះ................................</p>
                                            </td>
                                            <td style="width: 25%">
                                                <p>{{funDate(data.Contract.installment_date)}}</p>
                                                <p class="text-center">ស្នាមមេដៃស្តាំនិងឈ្មោះ </p>
                                                <p class="text-center"><strong>អ្នកដាក់ទ្រព្យតម្កល់ជំនួស</strong></p>
                                                <br>
                                                <br>
                                                <br>
                                                <br>
                                                <p>ឈ្មោះ................................</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="p-3 border border-dark rounded-5 page-avoid">
                                    <strong><u>សេចក្តីបញ្ជាក់ៈ</u></strong>

                                    <div class="ps-4">
                                        <div class="article-list">
                                            <p class="list">-</p>
                                            <p>ម្ចាស់កម្មសិទ្ធត្រូវតែរក្សាទុកបង្កាន់ដៃសម្រាប់ដកយកទ្រព្យតម្កល់ ឬប័ណ្ណកម្មសិទ្ធិរបស់ខ្លួនដែលបានតម្កល់។</p>
                                            <p class="list">-</p>
                                            <p>មានតែអ្នកដាក់ទ្រព្យតម្កល់ទេទើបមានសិទ្ធដកយកទ្រព្យតម្កល់វិញបាន។</p>
                                            <p class="list">-</p>
                                            <p>ម្ចាស់កម្មសិទ្ធិអាចដកយកវិញបាន លុះត្រាតែរួចបំណុល ពី <strong>វឌ្ឍនភាព ភីធី ឃែស ផន សប</strong> ហើយភ្ជាប់មកជាមួយនូវ បង្កាន់ដៃតម្កល់ទ្រព្យនេះ ។</p>
                                            <p class="list">-</p>
                                            <p>ក្នុងករណីបាត់បង្កាន់ដៃនេះ <strong>វឌ្ឍនភាព ភីធី ឃែស ផន សប</strong> មិនទទួលខុសត្រូវឡើយ ។ក្នុងករណីចាំបាច់ <strong>វឌ្ឍនភាព ភីធី ឃែស ផន សប</strong> តម្រូវអោយទៅបញ្ជាក់ពីអជ្ញាធរមូលដ្ឋានជាមុនសិន។</p>
                                        </div>
                                    </div>
                                </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");
    export default {
        props:['data'],
        data(){
            return{
                moment : moment,
            }
        },
        methods: {
            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 "ធ្នូ";
                }
            },
            printP() {
                this.$htmlToPaper("print-mortgage-loan", {
                    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>
