    <template>
    <div class="modal fade" id="showContractCertificate" 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" v-if="contractCertificate"> 
                    <div id="print-certificate-contract" 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="">
                                    <h6 class="text_moul mb-2">លិខិតបញ្ជាក់កម្មសិទ្ធិ</h6>
                                </div>
                            </div>
                            <div class="mortgage_content">
                                <p style="text-indent: 50px"> 
                                    ខ្ញុំបាទ/នាងខ្ញុំឈ្នោះ {{ contractCertificate.client?.name || '....................' }}  
                                    ភេទ {{ contractCertificate.client?.gender == 1 ? 'ប្រុស' : 'ស្រី' || '....................' }} អាយុ {{ contractCertificate.client?.age || '...............'}} ឆ្នាំ 
                                    មុខរបរ {{ contractCertificate.client?.occupation || '....................' }}
                                    អត្តសញ្ញាណប័ណ្ណលេខ {{ contractCertificate.client?.id_card || '...............' }} 
                                    ចុះថ្ងៃទី 
                                    {{ formattedClientCreateCardDate }}
                                    <!-- {{ contractCertificate.client?.create_card_date | onlyDay}}
                                    ខែ {{ contractCertificate.client?.create_card_date ? fConvertData(contractCertificate.client.create_card_date, 'onlyMonth') : '.............' }}
                                    ឆ្នាំ{{ contractCertificate.client?.create_card_date  | onlyYear }}  -->
                                    និងប្រពន្ធ/ប្តីឈ្មោះ {{contractCertificate.guarantor_1?.name || '....................' }}
                                    អត្តសញ្ញាណប័ណ្ណលេខ {{ contractCertificate.guarantor_1?.id_card || '............' }} 
                                    ចុះថ្ងៃទី
                                     {{ formattedCreateCardDate}}
                                     <!-- {{ contractCertificate.guarantor_1?.create_card_date ? (contractCertificate.guarantor_1.create_card_date | onlyDate) : '...............' }} -->
                                            <!-- ខែ {{ contractCertificate.guarantor_1?.create_card_date ? fConvertData(contractCertificate.guarantor_1.create_card_date, 'onlyMonth') : '' }}
                                    ឆ្នាំ {{ contractCertificate.guarantor_1?.create_card_date | onlyYear }}   -->
                                    មានទីលំនៅផ្ទះលេខ {{ contractCertificate.guarantor_1?.house_no || '.........' }} ផ្លូវ{{ contractCertificate.guarantor_1?.street_no || '.........' }}
                                    ភូមិ {{ contractCertificate.guarantor_1?.village_kh || '...........' }} 
                                    ឃុំ/សង្កាត់ {{ contractCertificate.guarantor_1?.commune_kh || '...............' }}
                                    ក្រុង/ស្រុក/ខណ្ឌ {{ contractCertificate.guarantor_1?.district_kh || '...............' }}
                                    រាជធានី/ខេត្ត {{ contractCertificate.guarantor_1?.province_kh || '...............' }}
                                </p>

                                <div class="text-center">
                                    <p class="text_moul">សូមគោរពចូលមក</p>
                                    <p class="text_moul">លោកមេឃុំ/សង្កាត់.........................</p>
                                </div>

                                <p><span class="text_moul">តាមរយះ លោកមេភូមិ............................</span></p>
                                <p><span class="text_moul">កម្មវត្ថុ៖ </span>សំណើសុំបញ្ជាក់កម្មសិទ្ធិ ។ </p>

                                <p style="text-indent: 50px">តបតាមកម្មវត្ថុខាងលើ ខ្ញុំបាទ/នាងខ្ញុំ សូមរៀបរាប់ជូនលោកមេឃុំ/សង្កាត់............. មេត្តាជ្រាបថា៖ </p>

                                <p> ដីលំនៅឋាន/ដីកសិកម្ម មួយកន្លែងមានទំហំ{{contractCertificate.size}}ម៉ែត្រការ៉េ (.......................ម៉ែត្រការ៉េ) ដែលមានព្រំប្រទល់៖</p>
                                

                                <div class="row" style="padding-left: 50px">
                                    <div class="col-6">
                                        <p>-ខាងលិច: {{ contractCertificate?.west || '.............' }}</p>
                                        <p>-ខាងជើងៈ {{ contractCertificate?.north || '.............' }}</p>
                                    </div>
                                    <div class="col-6">
                                        <p>-ខាងកើតៈ {{ contractCertificate?.east || '.............' }}</p>
                                        <p>-ខាងត្បូងៈ {{ contractCertificate?.south || '.............' }}</p>
                                    </div>
                                </div>

                                <p>ស្ថិតនៅ
                                    {{ contractCertificate.location }}
                                   ពិតជាដីកម្មសិទ្ធិរបស់ខ្ញុំបាទ/នាងខ្ញុំ ដោយមាន <input type="checkbox"> វិញ្ញាបនបត្រសម្គាល់ម្ចាស់អចលនវត្ថុ <input type="checkbox"> ប័ណ្ណសម្គាល់សិទ្ធិកាន់កាប់ អចលនវត្ថុ <input type="checkbox"> 
                                   លិខិតផ្ទេរសិទ្ធិកាន់កាប់អចលនទ្រព្យដែលមិនទាន់ចុះបញ្ជី លេខ.....................ចុះថ្ងៃទី................... ខែ........... ឆ្នាំ.........
                                   ហើយកម្មសិទ្ធិខាងលើនេះ ខ្ញុំបាទ/នាងខ្ញុំមិនបាន ដាក់បញ្ចាំ ហ៊ីប៉ូតែក ធ្វើអំណោយ អច្ច័យទាន និងមិនមានការហាមឃាត់ពីតុលាការឬអាជ្ញាធរមានសមត្ថកិច្ចឡើយ ។
                                </p>
                                <p style="padding-left: 50px">អាស្រ័យហេតុនេះសូម លោកមេឃុំ/សង្កាត់ មេត្តាបញ្ជាក់កម្មសិទ្ធិខាងលើដោយអនុគ្រោះ ។</p>

                                <br>
                                <p class="text-end mb-1">ធ្វើនៅថ្ងៃទី {{ contractCertificate.created_at | onlyDay }} ខែ {{ fConvertData(contractCertificate.created_at, 'onlyMonth' ) }} ឆ្នាំ {{ contractCertificate.created_at | onlyYear }}</p>


                                <div class="row">
                                    <div class="col-7">
                                        <p class="text_moul text-center">បានឃើញនិងបញ្ជាក់ថា</p>
                                        <p>ឈ្មោះ {{ contractCertificate.client?.name || '....................' }} ពិតជាម្ចាស់កម្មសិទ្ធិនៃអចលនវត្ថុ 
                                           ខាងលើប្រាកដមែននិងសូមគោរពជូនលោកមេឃុំ/សង្កាត់មេត្តាសម្រេច ។
                                        </p>
                                        <p>.................ធ្វើនៅថ្ងៃទី {{ contractCertificate.created_at | onlyDay  }} ខែ {{ fConvertData(contractCertificate.created_at, 'onlyMonth' ) }} ឆ្នាំ {{ contractCertificate.created_at | onlyYear }}</p>
                                        <p class="text_moul text-center">មេភូមិ.............</p>
                                    </div>

                                    <div class="col-5">
                                        <p class="text_moul text-center">ស្នាមមេដៃអ្នកស្នើសុំ</p>
                                    </div>
                                </div>

                                <div class="row text-center">
                                    <div class="col"></div>
                                    <div class="col-7">
                                        <p>លេខ.................</p>
                                        <p>..............................</p>
                                        <p>..............................</p>
                                        <p>ថ្ងៃ {{ fConvertData(contractCertificate.created_at, 'onlyDay' ) }} ខែ {{contractCertificate.created_at  | onlyMonthKh }} ឆ្នាំថោះ បញ្ចស័ក ពស២៥៦៧</p>
                                        <p>........ធ្វើនៅថ្ងៃទី {{ contractCertificate.created_at | onlyDay }} ខែ {{ fConvertData(contractCertificate.created_at, 'onlyMonth' ) }} ឆ្នាំ {{ contractCertificate.created_at | onlyYear }}</p>
                                        <p class="text_moul text-center">មេឃុំ/ចៅសង្កាត់.........</p>
                                    </div>
                                    <div class="col"></div>
                                </div>

                        
                            </div>
                        </div>

                        <br>

                        <div class="mortgage_loan page-avoid">

                            <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="">
                                    <h6 class="text_moul mb-2">លិខិតប្រគល់វត្ថុដាក់បញ្ចាំ/ហ៊ីម៉ូតក</h6>
                                </div>
                            </div>

                            <div class="mortgage_content">

                                <p><span class="text_moul" >១.អត្តសញ្ញាណភាគីទទួល៖ </span> ក្រុមហ៊ុន ខែមម៉ុន ឃែភីថល ជេអេស (Cam Mons Campital J.S )  អាសយដ្ឋាន  </p>
                                <p style="padding-left: 50px">ភូមិត្រពាំងអំពិល ឃុំត្រពាំងគង ស្រុកសំរោងទង ខេត្តកំពង់ស្ពឺ ។ </p>

                                <p class="text_moul">២.អត្តសញ្ញាណភាគីដាក់វត្ថុបញ្ចាំ/ហ៊ីប៉ូតែកដើម្បីធានាបំណុល៖</p>

                                <div style="padding-left: 50px">
                                    <table style="line-height: 1.55">
                                        <tr>
                                            <td class="align-top"> ១- </td>
                                            <td>
                                                ឈ្មោះ{{ contractCertificate.client?.name || '....................' }} 
                                                ភេទ{{ contractCertificate.client?.gender ==1 ? 'ប្រុស':'ស្រី' || '........' }} 
                                                អាយុ{{ contractCertificate.client?.age || '........' }} ឆ្នាំ 
                                                អត្តសញ្ញាណប័ណ្ណលេខ{{ contractCertificate.client?.id_card || '..................' }} 
                                                មានទីលំនៅបច្ចុប្បន្នផ្ទះលេខ{{ contractCertificate.client?.house_no || '............' }} ផ្លូវ{{ contractCertificate.client?.street_no || '..........' }} 
                                                ភូមិ{{ contractCertificate.client?.client_village_kh || '.................' }} 
                                                ឃុំ/សង្កាត់{{ contractCertificate.client?.client_commune_kh || '.................' }} 
                                                ក្រុង/ស្រុក/ខណ្ឌ{{ contractCertificate.client?.client_district_kh || '.................'}} រាជធានី/ខេត្ត{{ contractCertificate.client?.client_province_kh || '.................'}}
                                                លេខទូរស័ព្ទ{{ contractCertificate.client?.phone || '.................'}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="align-top"> ២- </td>
                                            <td>
                                                ឈ្មោះ{{ contractCertificate.guarantor_1?.name || '....................' }} 
                                                ភេទ{{ contractCertificate.guarantor_1?.gender ==1 ? 'ប្រុស':'ស្រី' || '........' }} 
                                                អាយុ{{ contractCertificate.guarantor_1?.age || '...........' }} ឆ្នាំ អត្តសញ្ញាណប័ណ្ណលេខ{{ contractCertificate.guarantor_1?.id_card || '..................' }}
                                                មានទីលំនៅបច្ចុប្បន្នផ្ទះលេខ{{ contractCertificate.guarantor_1?.house_no || '............' }}
                                                 ផ្លូវ{{ contractCertificate.guarantor_1?.street_no || '............' }} 
                                                 ភូមិ{{ contractCertificate.guarantor_1?.village_kh || '.................' }} 
                                                 ឃុំ/សង្កាត់{{ contractCertificate.guarantor_1?.commune_kh || '.................' }} 
                                                ក្រុង/ស្រុក/ខណ្ឌ{{ contractCertificate.guarantor_1?.district_kh || '.................' }} 
                                                រាជធានី/ខេត្ត{{ contractCertificate.guarantor_1?.province_kh || '.................' }} 
                                                លេខទូរស័ព្ទ{{ contractCertificate.guarantor_1?.phone || '.................' }} 
                                            </td>
                                        </tr>
                                    </table>
                                </div>


                                <p class="text_moul">៣.អត្តសញ្ញាណវត្ថុដាក់បញ្ចាំឬហ៊ីប៉ូតែក៖</p>
                                <p class="text_moul" style="padding-left: 50px">
                                    ក.ប័ណ្ណសម្គាល់កម្មសិទ្ធិ
                                </p>

                                <div style="padding-left: 60px">
                                    <table style="line-height: 1.55">
                                        <tr>
                                            <td class="align-top"> ១.</td>
                                            <td>
                                                <p>ប័ណ្ណសម្គាល់យានយន្ដកទោចក្រយានយន្តលេខ............................ចុះថ្ងៃទី..........ខែ........ឆ្នាំ....... 
                                                 ម៉ាក............... ពណ៌.................. ផលិតឆ្នាំ.............. ផ្លាកលេខ.....................</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="align-top"> ២.</td>
                                            <td>
                                                <p>ប័ណ្ណសម្គាល់យានយន្ដ/ទោចក្រយានយន្តលេខ............................ចុះថ្ងៃទី..........ខែ........ឆ្នាំ....... 
                                                 ម៉ាក............... ពណ៌.................. ផលិតឆ្នាំ.............. ផ្លាកលេខ.....................</p>
                                            </td>
                                        </tr>
                                    </table>
                                </div>


                                <p class="text_moul mb-1" style="padding-left: 50px">
                                    ខ.អចលនវត្ថុ
                                </p>

                                <div style="padding-left: 50px">
                                    <table class="table table-sm table-bordered border-secondary">
                                        <tbody>
                                            <tr class="text-center">
                                                <th class="text-start">ទ្រព្យ</th>
                                                <th>ទីមួយ</th>
                                                <th>ទីពីរ</th>
                                                <th>ទីបី</th>
                                            </tr>
                                            <tr>
                                                <td>ប្រភេទទ្រព្យ</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>ទំហំ</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>ប្រភេទលិខិតសម្គាល់ទ្រព្យ</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>លេខលិខិត</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>អាជ្ញាធរចេញលិខិត</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>ទីតាំងអចលនវត្ថុ</td>
                                                <td>
                                                    <p>ភូមិ................................</p>
                                                    <p>ឃុំ.................................</p>
                                                    <p>ស្រុក..............................</p>
                                                    <p>ខេត្ត...............................</p>
                                                </td>
                                                <td>
                                                    <p>ភូមិ................................</p>
                                                    <p>ឃុំ.................................</p>
                                                    <p>ស្រុក..............................</p>
                                                    <p>ខេត្ត...............................</p>
                                                </td>
                                                <td>
                                                    <p>ភូមិ................................</p>
                                                    <p>ឃុំ.................................</p>
                                                    <p>ស្រុក..............................</p>
                                                    <p>ខេត្ត...............................</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>


                                <p class="mb-3"><span class="text_moul">៤.ការធានាអះអាង៖</span> ភាគីដែលបានប្រគល់វត្ថុដាក់បញ្ចាំ/ហ៊ីប៉ូតែកខាងលើ ធានាអះអាងថាវត្ថុដែលបានដាក់បញ្ចាំ/ហ៊ីប៉ូតែកនេះជាកម្មសិទ្ធិស្របច្បាប់របស់ខ្លួនបើថ្ងៃក្រោយមានជនណាមកតវ៉ាឬទាមទារ ខ្លួនជាអ្នកទទួលខុសត្រូវសងការ ខូចខាតនិងទទួលខុសត្រូវចំពោះមុខច្បាប់ ។</p>
                                <div class="row text-nowrap text-center">
                                    <div class="col">
                                        <p>ភាគីអ្នកប្រគល់វត្ថុដាក់បញ្ចាំ/ហ៊ីប៉ូតែក</p>
                                        <p class="text_moul">ស្នាមមេដៃស្ដាំ</p>
                                        <br>
                                        <br>
                                        <br>
                                        <br>
                                    </div>
                                    <div class="col">
                                        <p>សាក្សី</p>
                                        <p class="text_moul">ស្លាមមេដៃស្ដាំ</p>
                                        <br>
                                        <br>
                                        <br>
                                        <br>
                                    </div>
                                    <div class="col">
                                        <p>ធ្វើនៅ.............ថ្ងៃទី........ខែ..........ឆ្នាំ</p>
                                        <p class="text_moul">ក្រុមហ៊ុន ខែមប៉ុន ឃេភីថល ជេអេស</p>
                                        <br>
                                        <br>
                                        <br>
                                        <br>
                                    </div>
                                </div>
                            </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");
    import {currencyToWord } from "number_to_khmer_word";
    export default {
        props: ['contractCertificate'] ,
        data(){
            return{
                moment : moment,
                currencyToWord : currencyToWord,
            }
        },
        computed: {
            formattedCreateCardDate() {
                const date = this.contractCertificate?.guarantor_1?.create_card_date;
                return date && date !== 0 ? this.$options.filters.onlyDate(date) : '.....................';
            },
            formattedClientCreateCardDate() {
                const date = this.contractCertificate?.client?.create_card_date;
                return date && date !== 0 ? this.$options.filters.onlyDate(date) : '.....................';
            },
        },
        methods: {
            printP() {
                this.$htmlToPaper("print-certificate-contract", {
                    styles: ["/css/app.css", "/css/print/mortgage-loan.css"],
                });
            },
            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 "ធ្នូ";
                }
            },
            funTypeCard(card) {
                if (card == 1) {
                    return "អត្តសញ្ញាណប័ណ្ណ";
                } else if (card == 2) {
                    return "សៀវភៅគ្រួសារ";
                } else if (card == 3) {
                    return "សៀវភៅស្នាក់នៅ";
                } else if (card == 4) {
                    return "លិខិតឆ្លងដែន";
                } else {
                    return "សំបុត្រកំណើត";
                }
            },
            funTerm(status){
                if(status==1){
                    return 'ថ្ងៃ';
                }else if(status==2){
                    return 'សប្ដាហ៍';
                }else if(status==3){
                    return 'កន្លះខែ';
                }else if(status==4){
                    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);
                    }
                }
            },
            fConvertData(date, formart) {
            Date.prototype.getAmPm = function () {
                if (this.getHours() >= 12) {
                    return 1;
                } // pm
                return 0; // am
            };

            var locale = {
                en: {
                    month: ["January", "February", "March", "April", "May", "June", "July", "August", "September ", "October", "November", "December"],
                    ampm: ["am", "pm"],
                },
                km: {
                    month: ["មករា", "កុម្ភៈ", "មីនា", "មេសា", "ឧសភា", "មិថុនា", "កក្កដា", "សីហា", "កញ្ញា", "តុលា", "វិច្ឆិកា", "ធ្នូ"],
                    ampm: ["ព្រឹក", "ល្ងាច"],
                },
            };

            var toLocaleNumber = function (num, lang, zeroPadding) {
                if (typeof num !== "number") return null;

                var numInteger = parseInt(num);
                var numString = numInteger.toString();

                if (zeroPadding > 0 && numString.length < zeroPadding) {
                    numString = "0" + numString;
                }

                // support only khmer
                if (lang !== "km") {
                    return numString;
                }

                var khmerNumber = "";
                var numbersKhmer = ["០", "១", "២", "៣", "៤", "៥", "៦", "៧", "៨", "៩"];

                for (var i = 0; i < numString.length; i++) {
                    khmerNumber += numbersKhmer[parseInt(numString[i])];
                }

                return khmerNumber;
            };

            var formatDate = function (date, lang) {
                var formattedDate = null;
                var hours = d.getHours();
                if (hours > 12) {
                    hours -= 12;
                }
                if (formart == 'dateTime') {
                    formattedDate = toLocaleNumber(d.getDate(), lang, 2) + "-" + locale[lang]["month"][d.getMonth()] + "-" + toLocaleNumber(d.getFullYear(), lang) + ' '
                        + toLocaleNumber(hours, lang, 2)
                        + ':'
                        + toLocaleNumber(d.getMinutes(), lang, 2)
                        + ' '
                        + locale[lang]['ampm'][d.getAmPm()];
                } else if (formart == 'onlyDate') {
                    formattedDate = toLocaleNumber(d.getDate(), lang, 2) + "-" + locale[lang]["month"][d.getMonth()] + "-" + toLocaleNumber(d.getFullYear(), lang);
                } else if (formart == 'onlyDay') {
                    formattedDate = toLocaleNumber(d.getDate(), lang, 2);
                } else if (formart == 'onlyMonth') {
                    formattedDate = locale[lang]["month"][d.getMonth()];
                } else if (formart == 'onlyYear') {
                    formattedDate = toLocaleNumber(d.getFullYear(), lang);
                }
                return formattedDate;
            };

            var d = new Date(date);

            // for example: "28-May-2016 3:44 pm" "២៨-ឧសភា-២០១៦ ៣:៤៤ ល្ងាច"
            // console.log(formatDate(d, "en"), formatDate(d, "km"));
            if (formart == 'onlyNumber') {
                return toLocaleNumber;
            } else {
                return (this.result = formatDate(d, "km"));
            }
        },
        }
    }
</script>

<style lang="scss" scoped>
    .article{
        position: relative;
        padding-left: 35px;
        .title{
            position: absolute;
            left: 0;
        }
    }
    .border-box{
        border: 1px solid #000;
        width: 80px;
        height: 100px;
    }
</style>