<template>

    <ThemeDailog :modalId="'showClientReceipt'" :title="'Client Receipt'" :btnPrint="true"  :modalLg="true" @click="printP">
        <div slot="modal-body">
            <div id="print-reciept">
                <div :class="item === 1 ? 'custom-reciept-top' : 'custom-reciept-bottom'" v-for="item in [1, 2]" :key="item">
                    <div class="custom-reciept">
                        <div class="header-receipt mt-2 mb-0">
                            <!-- <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="">
                                <p class="text_moul mb-2">បង្កាន់ដៃប្រគល់-ទទួលឯកសារអតិថិជន</p>
                            </div>
                        </div>
                        <table class="table table-sm table-bordered border-secondary">
                            <tbody>
                                <tr class="table-light border-secondary text-center">
                                    <th style="width: 30px">ល.រ</th>
                                    <th>បរិយាយ</th>
                                    <th style="width: 50px">ចំនួន</th>
                                    <th colspan="2">លេខសម្គាល់</th>
                                    <th>កម្មសិទ្ធិករ</th>
                                </tr>
                                <tr>
                                    <td>1.</td>
                                    <td>អត្តសញ្ញាណប័ណ្ណសញ្ជាតិខ្មែរ</td>
                                    <td></td>
                                    <td colspan="2"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>2.</td>
                                    <td>សៀវភៅគ្រួសារ/សៀវភៅស្នាក់នៅ</td>
                                    <td></td>
                                    <td colspan="2"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>3.</td>
                                    <td>លិខិតឆ្លងដែន</td>
                                    <td></td>
                                    <td colspan="2"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>4.</td>
                                    <td>សំបុត្រកំណើត</td>
                                    <td></td>
                                    <td colspan="2"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>5.</td>
                                    <td>ប័ណ្ណប៉ាតង់ អាជ្ញាប័ណ្ណ លិខិតផ្សេងៗ</td>
                                    <td></td>
                                    <td colspan="2"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>6.</td>
                                    <td>វិក័យបត្រផ្សេងៗ</td>
                                    <td></td>
                                    <td colspan="2"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>7.</td>
                                    <td>ផ្សេងៗ............................................</td>
                                    <td></td>
                                    <td colspan="2"></td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td colspan="6">
                                        <div class="d-flex justify-content-between">
                                            <p>ថ្ងៃទី {{ obj?.installment_date | onlyDay }} ខែ {{ obj.installment_date | onlyMonth }} ឆ្នាំ {{ obj.installment_date | onlyYear }}</p>
                                            <p>ថ្ងៃទី {{ obj?.installment_date | onlyDay }} ខែ {{ obj.installment_date | onlyMonth }} ឆ្នាំ {{ obj.installment_date | onlyYear }}</p>
                                        </div>
                                    </td>
                                </tr>

                                <tr>
                                    <td colspan="2">ប្រគល់ដោយៈ</td>
                                    <td colspan="2">ទទួលដោយៈ</td>
                                    <td>ប្រគល់ដោយៈ</td>
                                    <td>ទទួលដោយៈ</td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <br>
                                        <br>
                                        <br>
                                        <p class="text-center">..............................................</p>
                                    </td>
                                    <td colspan="2">
                                        <br>
                                        <br>
                                        <br>
                                        <p>.................................</p>
                                    </td>
                                    <td>
                                        <br>
                                        <br>
                                        <br>
                                        <p>.................................</p>
                                    </td>
                                    <td>
                                        <br>
                                        <br>
                                        <br>
                                        <p>.................................</p>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>

    </ThemeDailog>



</template>
<script>
    import ThemeDailog from '../../../components/model-dialog/ThemeDailog.vue';

    export default {

        props:['obj'],
        components: {
            ThemeDailog
        },
        data(){
             return{
                user_branch : '',
            }
        },

        methods:{
            printP() {
                this.$htmlToPaper("print-reciept", {
                    styles: ["/css/app.css", "/css/print/print-reciept.css"],
                });
            },

        }
    }
</script>

<style scoped lang="scss">
    .custom-reciept{
        // width:210mm;
        min-height: 148mm;
        margin: auto;
        padding: 30px;
        // color: #263AA4;
        border: 1px solid #dee2e6;
    }
    .custom-reciept .first-form{
        width: 135px;
    }
    .custom-reciept .footer-reciept{
        margin-top: 20px;
    }


</style>
