<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            <div class="mb-3">
                <router-link :to="{ name: 'Loan' }">{{ $t('Loan List') }}</router-link>
                <label class="px-1">/</label>
                <label>{{ $t('History Payment') }}</label>
                <label class="text-moul">/ {{client_name}}</label>
            </div>
        </span>
        <template slot="more-button">
            <button type="button" @click="printP" class="btn btn-primary text-nowrap"><i class="fa fa-print"></i> {{ $t('Print') }}</button>
        </template>
        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('History Payment')" style="display:none"></header-report>
                    <h5 class="text-center pb-2">អតិថិជនឈ្មោះ: <strong>{{ client_name }}</strong></h5>
                    <table class="table table-bordered">
                        <tbody class="text-nowrap">
                             <template v-for="(value,index) in dataPayment.data" >
                                 <tr class="text-nowrap table-active" v-show="value.details.length > 0">
                                    <th class="text-center">{{ $t("#") }}</th>
                                    <th>{{ $t("Payment Date") }}</th>
                                    <th>{{ $t("Principal") }}</th>
                                    <th>{{ $t("Interest") }}</th>
                                    <!-- <th>{{ $t("Operating Services") }}</th> -->
                                    <th>{{ $t("Payment") }}</th>
                                    <th>{{ $t("Loan Balance") }}</th>
                                    <th>{{ $t("Total Late") }}</th>
                                    <th>{{ $t("Status") }}</th>
                                </tr>
                                <tr>
                                    <td class="text-center align-middle" :rowspan="(value.details && value.details.length > 0) ? value.details.length + 2 : 1">{{ index + 1 }}</td>
                                    <td >{{value.payment_date}}</td>
                                    <td >{{value.principal | numberFomartValue}}</td>
                                    <td >{{value.interest_per_month | numberFomartValue}}</td>
                                    <!-- <td >{{value.operating_service | numberFomartValue}}</td> -->
                                    <td >{{value.payment_per_month | numberFomartValue}}</td>
                                    <td >{{value.loan_balance| numberFomartValue}}</td>
                                    <td>
                                        <span v-if="value.total_late>0 && value.payment_status_id!=3">{{value.total_late}}ថ្ងៃ</span>
                                    </td>
                                    <td>
                                         <span :style="{ 'color': value.color_code }">{{value.status_title}}</span>
                                    </td>
                                </tr>
                                <tr class="text-nowrap" v-show="value.details.length > 0">
                                        <th>{{ $t("#") }}</th>
                                        <th>{{ $t("Received Date") }}</th>
                                        <th>{{ $t("Paid Principal") }}</th>
                                        <th>{{ $t("Paid Interest") }}</th>
                                        <!-- <th>{{ $t("Paid Operating Services") }}</th> -->
                                        <th>{{ $t("Total Received") }}</th>
                                        <th>{{ $t("Paid Penalty") }}</th>
                                        <th>{{ $t("Penalty Waiv") }}</th>
                                </tr>
                                 <template v-for="(sub,sub_index) in value.details">
                                    <tr>
                                        <td>{{ sub_index + 1 }}</td>
                                        <td class="text-nowrap">{{sub.received_date | numberFomartValue}}</td>
                                        <td class="text-nowrap">{{sub.paid_principal | numberFomartValue}}</td>
                                        <td class="text-nowrap">{{sub.paid_interest | numberFomartValue}}</td>
                                        <!-- <td class="text-nowrap">{{sub.paid_operating_service | numberFomartValue}}</td> -->
                                        <td class="text-nowrap">{{sub.received | numberFomartValue}}</td>
                                        <td class="text-nowrap">{{sub.paid_penalty | numberFomartValue}}</td>
                                        <td class="text-nowrap">{{sub.waiv_penalty | numberFomartValue}}</td>
                                    </tr>
                                 </template>
                             </template>
                        </tbody>
                    </table>
                    <footer-report style="display:none"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dataPayment"   @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
    </theme-table>
</template>

<script>
    import ThemeTable from "../../components/ThemeTable.vue"
    import HeaderReport from '../../components/report/header.vue'
    import FooterReport from '../../components/report/footer.vue'
    import CumstomPagination from '../../components/CustomPagination.vue'
    import moment from 'moment';

    export default {
        props:['id'],
        components: {
            ThemeTable,
            HeaderReport,
            FooterReport, 
            CumstomPagination,
        },
        data() {
            return {
                moment     : moment,
                format     : 'YYYY-MM-DD',
                dataPayment: [],
                client_name: '',
            }
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData() {
                axios.get('admin-api/loans/history-payment/' +this.id).then((res) => {
                    this.dataPayment = res.data;
                    this.client_name = res.data.client.name;
                }).catch((error) => {
                    console.log(error);
                });
            },
            printP() {
                this.$htmlToPaper('show-print');
            },
        }
    }
</script>
