<template>
    <div class="user">
        <div class="container-fluid px-0">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card border-0 bg-transparent">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="card shadow-lg p-0" style="overflow: auto; height: calc(100vh - 90px);">
                                    <div class="card-body p-0">
                                        <div class="purchaseOrder">
                                            <div class="card-body border-0 bg-white rounded_8" id="printSchedule">
                                                <div class="col-sm-12 report_print">
                                                    <div class="table-responsive">
                                                        <header-report :title="'កាលវិភាគសងប្រាក់'"> </header-report>
                                                        <div class="d-flex my-3 py-2">
                                                            <div class="col-4 p-0">
                                                                <table>
                                                                    <thead>
                                                                        <tr>
                                                                            <td class="text-nowrap">ប្រភេទរំលស់</td>
                                                                            <td class="px-1">:</td>
                                                                            <td>{{depreciations.asset_name}}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-nowrap">ចំនួនទឹកប្រាក់សរុប</td>
                                                                            <td class="px-1">:</td>
                                                                            <td>{{depreciations.total_amount | numberFomartValue}}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-nowrap">រយៈពេល</td>
                                                                            <td class="px-1">:</td>
                                                                            <td>{{depreciations.period}} ខែ</td>
                                                                        </tr>
                                                                    </thead>
                                                                </table>
                                                            </div>
                                                            <div class="col-4 p-0">
                                                                <table>
                                                                    <tr>
                                                                        <td class="text-nowrap">ថ្ងៃរំលស់</td>
                                                                        <td class="px-1">:</td>
                                                                        <td>{{depreciations.depreciation_date | onlyDate}}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-nowrap">ការពិពណ៌នា</td>
                                                                        <td class="px-1">:</td>
                                                                        <td>{{depreciations.desc}}</td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <table class="table  table-bordered mb-0">
                                                            <thead class="sm_head">
                                                                <tr class="">
                                                                    <th class="text-nowrap">ល.រ</th>
                                                                    <th class="text-nowrap">ថ្ងៃត្រូវបង់ប្រាក់</th>
                                                                    <th class="text-nowrap">ទឹកប្រាក់ត្រូវបង់</th>
                                                                    <th class="text-nowrap">បានបង់</th>
                                                                    <th class="text-nowrap">មិនទាន់បង់</th>
                                                                    <th class="text-nowrap">ប្រាក់ដើមនៅសល់</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="sm_head">
                                                                <tr v-for="(value, index) in details" :key="index">
                                                                    <td>{{index+1}}</td>
                                                                    <td class="text-nowrap">{{value.payment_date | onlyDate}}</td>
                                                                    <td class="text-nowrap">{{value.amount | numberFomartValue}}</td>
                                                                    <td class="text-nowrap">{{value.paid | numberFomartValue}}</td>
                                                                    <td class="text-nowrap">{{value.unpaid | numberFomartValue}}</td>
                                                                    <td class="text-nowrap">{{value.loan_balance | numberFomartValue}}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <footer-report></footer-report>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="card border-0" style="overflow: auto; height: calc(100vh - 90px);">
                                    <div class="card-header bg-white border-0">
                                        <h5 class="text-koulen text-secondary">{{ $t('Depreciation') }}</h5>
                                    </div>
                                    <ul class="list-group list-group-flush m-3">
                                        <button type="button" class="btn btn_print" @click="printP"><i class="fa fa-print"></i> {{ $t('Print') }}</button>
                                    </ul>
                                    <ul class="list-group list-group-flush m-3">
                                        <button type="button" class="btn btn-dark" @click="$router.go(-1)"><i class="fa fa-arrow-left"></i> {{ $t('Back') }}</button>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HeaderReport from '../../../components/report/header.vue'
import FooterReport from '../../../components/report/footer.vue'
export default {
    props: ['id'],
    components:{
        HeaderReport,
        FooterReport,
    },
    data() {
        return {
            depreciations: {},
            details: [],
        }
    },
    created() {
        this.funSchedule();
    },
    methods: {
        funSchedule() {
            axios.get('accounting/depreciation/' + this.id).then((res) => {
                this.depreciations = res.data.data;
                this.details = res.data.data.details;
            }).catch((error) => {
                console.log(error);
            });
        },
        async printP() {
            await this.$htmlToPaper('printSchedule');
        },
    }
}
</script>


