<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Summary Productivity By Co') }}
        </span>
        <template slot="more-button">
            <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">{{$t('Filter')}}</button>
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasRightLabel">{{$t('Filter')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Co') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.co_id" trackBy="name" value="id" label="name" :searchable="true" :options="coes" />
                    </div>
                    <label class="form-label">{{ $t('Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('Date')" v-model="params.date"
                            valueType="format" format="YYYY-MM-DD"> </date-picker>
                        <button type="button" class="btn border btn-sm text-nowrap py-0" data-bs-toggle="modal" data-bs-target="#modalFilter"><i class="fas fa-sm fa-filter"></i> {{ $t('Filter') }} </button>
                    </div>
                    <ul class="list-group mb-3">
                        <button type="button" class="btn btn-success" @click="funSearchData"><i class="fa fa-search"></i> {{ $t('Search') }}</button>
                    </ul>
                    <ul class="list-group mb-3">
                        <button type="button" @click="printP" class="btn btn-primary"><i class="fa fa-print"></i> {{ $t('Print') }}</button>
                    </ul>
                    <ul class="list-group mb-3">
                        <button type="button" @click="exportExcell" class="btn btn-danger"><i class="fa fa-file-export"></i> {{ $t('Export') }}</button>
                    </ul>
                </div>
            </div>
        </template>
        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('Productivity by Credit Office Report')" :date="params.date" :date_title="$t('Date')" style="display: none;"></header-report>
                    <table class="table table-bordered" id="excel-table">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th rowspan="2" class="align-middle">ល.រ</th>
                                <th rowspan="2" class="align-middle">កូដមន្រ្តីឥណទាន</th>
                                <th rowspan="2" class="align-middle fixed_left">មន្រ្តីឥណទាន</th>
                                <th rowspan="2" class="align-middle">ចំនួនបញ្ចេញ</th>
                                <th rowspan="2" class="align-middle">អតិថិជនថ្មី</th>
                                <th rowspan="2" class="align-middle">ទឹកប្រាក់បញ្ចេញ</th>
                                <th rowspan="2" class="align-middle">ទឹកប្រាក់បញ្ចេញអតិ.ថ្មី</th>
                                <th rowspan="2" class="align-middle">ចំនួនសកម្ម</th>
                                <th rowspan="2" class="align-middle">ចំនួនអសកម្ម</th>
                                <th rowspan="2" class="align-middle">ចំនួនបង់ផ្តាច់</th>
                                <th rowspan="2" class="align-middle">ទឹកប្រាក់ក្នុងដៃអតិថិជន</th>
                                <th rowspan="2" class="align-middle">ចំនួនយឺត</th>
                                <th rowspan="2" class="align-middle">ទឹកប្រាក់យឺត</th>
                                <th rowspan="2" class="align-middle">ទឹកប្រាក់យឺតត្រូវបង់</th>
                                <th rowspan="2" class="align-middle">PAR</th>

                                <th colspan="3" class="text-center">តូចជាង៣០ថ្ងៃ</th>
                                <th colspan="3" class="text-center">ធំជាង៣០ថ្ងៃ</th>

                                <th rowspan="2" class="align-middle">ការប្រាក់ប្រមូល</th>
                                <th rowspan="2" class="align-middle">ប្រាក់ដើមប្រមូល</th>
                                <th rowspan="2" class="align-middle">សេវាប្រតិបត្តិការប្រមូល</th>
                                <th rowspan="2" class="align-middle">ប្រាក់ពិន័យប្រមូល</th>
                                <th rowspan="2" class="align-middle">កម្រៃបញ្ចេញឥណទាន</th>
                                <th rowspan="2" class="align-middle">ចំណូលសរុប</th>
                                <th rowspan="2" class="align-middle">ប្រមូលបំណុលអតិថិជនលុបបញ្ជី</th>

                                <th colspan="2" class="text-center">ឥណទានថ្ងៃ</th>
                                <th rowspan="2" class="align-middle">{{ $t("Branch") }}</th>
                            </tr>
                            <tr>
                                <th>ចំនួនយឺត</th>
                                <th>ទឹកប្រាក់យឺត</th>
                                <th>PAR</th>

                                <th>ចំនួនយឺត</th>
                                <th>ទឹកប្រាក់យឺត</th>
                                <th>PAR</th>

                                <th>ចំនួនសរុប</th>
                                <th>យឺតធំជាង៣០ថ្ងៃ</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(loan, index) in dataReports.data" :key="index">
                                <td>{{ index + 1 }}</td>
                                <td>{{ loan.code }}</td>
                                <td class="fixed_left">{{ loan.co_name }}</td>
                                <td>{{ loan.total_client }}</td>
                                <td>{{ loan.total_client_new }}</td>
                                <td>{{ loan.sum_principal | numberFomartValue }}</td>
                                <td>{{ loan.sum_client_new | numberFomartValue }}</td>
                                <td>{{ loan.client_active }}</td>
                                <td>{{ loan.client_inactive }}</td>
                                <td>{{ loan.client_complete }}</td>
                                <td>{{ loan.balance_principal | numberFomartValue }}</td>
                                <td>{{ loan.count_day_late }}</td>
                                <td>{{ loan.amount_day_late | numberFomartValue}}</td>
                                <td></td>
                                <td>
                                    <span v-if="loan.total_par_late>0">{{ parseFloat(loan.total_par_late).toFixed(2)}}%</span>
                                    <span v-else>0%</span>
                                </td>
                                <td>{{ loan.count_late_lte_30day | numberFomartValue }}</td>
                                <td>{{ loan.amount_late_lte_30day | numberFomartValue }}</td>
                                <td>
                                    <span v-if="loan.par_late_lte_30day>0">
                                        {{ parseFloat(loan.par_late_lte_30day).toFixed(2)}}%
                                    </span>
                                    <span v-else>0%</span>
                                </td>

                                <td>{{ loan.count_late_more_than_30day | numberFomartValue }}</td>
                                <td>{{ loan.amount_late_more_than_30day | numberFomartValue }}</td>
                                <td>
                                    <span v-if="loan.par_late_more_than_30day>0">
                                        {{ parseFloat(loan.par_late_more_than_30day).toFixed(2)}}%
                                    </span>
                                    <span v-else>0%</span>
                                </td>
                                <td>{{ loan.paid_interest | numberFomartValue }}</td>
                                <td>{{ loan.paid_principal | numberFomartValue }}</td>
                                <td>{{ loan.paid_operating_service | numberFomartValue }}</td>
                                <td>{{ loan.paid_penalty | numberFomartValue }}</td>
                                <td>{{ loan.total_service | numberFomartValue }}</td>
                                <td>{{ loan.total_paid | numberFomartValue }}</td>
                                <td>{{ loan.total_write_off | numberFomartValue }}</td>

                                <td>{{ loan.count_late_term_of_days | numberFomartValue }}</td>
                                <td>{{ loan.count_late_more_than_30day_of_day | numberFomartValue }}</td>
                                <td>{{ loan.branch_name}}</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr class="c_bg_tfoot">
                                <td colspan="3" class="text-end">សរុប</td>
                                <td>{{totalClient}}</td>
                                <td>{{totalClientNew}}</td>
                                <td>{{totalSumPrincipal | numberFomartValue}}</td>
                                <td>{{totalPrincipalNew | numberFomartValue}}</td>
                                <td>{{totalActive}}</td>
                                <td>{{totalInActive}}</td>
                                <td>{{totalCompleted}}</td>
                                <td>{{totalBalancePrincipal | numberFomartValue}}</td>
                                <td>{{totalCountDayLate | numberFomartValue}}</td>
                                <td>{{totalAmountDayLate | numberFomartValue}}</td>
                                <td></td>
                                <td>
                                    <span v-if="totalAmountDayLate>0">
                                        {{parseFloat((totalAmountDayLate/totalBalancePrincipal)*100).toFixed(2)}}%
                                    </span>
                                    <span v-else>0%</span>
                                </td>

                                <td>{{totalCountLateLTE30Day | numberFomartValue}}</td>
                                <td>{{totalAmountLateLTE30Day | numberFomartValue}}</td>
                                <td>
                                    <span v-if="totalAmountLateLTE30Day>0">
                                        {{parseFloat((totalAmountLateLTE30Day/totalBalancePrincipal)*100).toFixed(2)}}%
                                    </span>
                                    <span v-else>0%</span>
                                </td>
                                <td>{{totalCountLateMoreThan30Day | numberFomartValue}}</td>
                                <td>{{totalAmountLateMoreThan30Day | numberFomartValue}}</td>
                                <td>
                                    <span v-if="totalAmountLateMoreThan30Day>0">
                                        {{parseFloat((totalAmountLateMoreThan30Day/totalBalancePrincipal)*100).toFixed(2)}}%
                                    </span>
                                    <span v-else>0%</span>
                                </td>
                                <td>{{totalPaidInterest | numberFomartValue}}</td>
                                <td>{{totalPaidPrincipal | numberFomartValue}}</td>
                                <td>{{totalPaidOperatingService | numberFomartValue}}</td>
                                <td>{{totalPaidPenalty | numberFomartValue}}</td>
                                <td>{{totalService | numberFomartValue}}</td>
                                <td>{{totalAmountPaid | numberFomartValue}}</td>
                                <td>{{totalCollectWriteOff | numberFomartValue}}</td>

                                <td>{{totalCountLateTermOfDay | numberFomartValue}}</td>
                                <td>{{totalCountLateMoreThan30DayOfDay | numberFomartValue}}</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                    <footer-report style="display: none;"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dataReports" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
        <div slot="modal-custom">
            <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
        </div>
    </theme-table>
</template>

<script>
    import moment from "moment";
    import CumstomPagination from "../../components/CustomPagination.vue";
    import CustomDateFilter from "../../components/report/CustomDateFilter.vue";
    import HeaderReport from "../../components/report/header.vue";
    import FooterReport from "../../components/report/footer.vue";
    import ThemeTable from "../../components/ThemeTable.vue";
    import { exportTableToExcel } from "../../exportExcel.js"
    export default {
        components: {
            CumstomPagination,
            CustomDateFilter,
            HeaderReport,
            FooterReport,
            ThemeTable
        },
        data() {
            return {
                moment: moment,
                format: "YYYY-MM-DD",
                coes  : [],
                dataReports: { data: [] },
                form: new Form({

                }),
                params: {
                    page  : 1,
                    pagin : false,
                    per_page: 25,

                    month : [],
                    co_id : [],
                    date  : [],
                    client_type : 1,
                    term_type: [],
                },
            };
        },
        created() {
            this.funGetData();
            this.getCO();
        },
        methods: {
            getCO() {
                axios
                    .get("admin-api/com-co")
                    .then((res) => {
                        this.coes = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            chooseDate(value) {
                this.params.date = value.data;
                this.params.month = [];
                this.funGetData();
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios.get("admin-api/summary-co-report", {
                    params: this.params,
                }).then((res) => {
                    this.dataReports = res.data;
                }).catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            funMonth(){
                this.params.date = [];
            },
            funDate(){
                this.params.month = [];
            },
            funSearchData(){
                this.params.pagin = 'true';
                this.funGetData();
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
            async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "ExportSummaryCo",
                        reportTitle: "របាយការណ៍ផលិតភាពសង្ខេបមន្ត្រីឥណទាន",
                        subDate:this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            }
        },
        computed: {
            totalSumPrincipal: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.sum_principal);
                });
                return sum;
            },
            totalBalancePrincipal: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.balance_principal);
                });
                return sum;
            },
            totalCountDayLate: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.count_day_late);
                });
                return sum;
            },
            totalAmountDayLate: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.amount_day_late);
                });
                return sum;
            },
            totalPaidPrincipal: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.paid_principal);
                });
                return sum;
            },
            totalPaidInterest: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.paid_interest);
                });
                return sum;
            },
            totalPaidOperatingService: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.paid_operating_service);
                });
                return sum;
            },
            totalPaidPenalty: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.paid_penalty);
                });
                return sum;
            },
            totalService: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.total_service);
                });
                return sum;
            },
            totalAmountPaid: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.total_paid);
                });
                return sum;
            },
            totalCollectWriteOff: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.total_write_off);
                });
                return sum;
            },
            totalActive: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.client_active);
                });
                return sum;
            },
            totalInActive: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.client_inactive);
                });
                return sum;
            },
            totalCompleted: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.client_complete);
                });
                return sum;
            },
            totalClient: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.total_client);
                });
                return sum;
            },
            totalClientNew: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.total_client_new);
                });
                return sum;
            },
            totalPrincipalNew: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.sum_client_new);
                });
                return sum;
            },
            totalCountLateLTE30Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.count_late_lte_30day);
                });
                return sum;
            },
            totalAmountLateLTE30Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.amount_late_lte_30day);
                });
                return sum;
            },
            totalCountLateMoreThan30Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.count_late_more_than_30day);
                });
                return sum;
            },
            totalAmountLateMoreThan30Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.amount_late_more_than_30day);
                });
                return sum;
            },
            totalCountLateMoreThan60Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.count_late_more_than_60day);
                });
                return sum;
            },
            totalAmountLateMoreThan60Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.amount_late_more_than_60day);
                });
                return sum;
            },
            totalCountLateMoreThan90Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.count_late_more_than_90day);
                });
                return sum;
            },
            totalAmountLateMoreThan90Day: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.amount_late_more_than_90day);
                });
                return sum;
            },

            totalCountLateTermOfDay: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.count_late_term_of_days);
                });
                return sum;
            },
            totalCountLateMoreThan30DayOfDay: function () {
                var sum = 0;
                this.dataReports.data.forEach(function (item) {
                    sum += parseFloat(item.count_late_more_than_30day_of_day);
                });
                return sum;
            },
        },
    };
</script>
<style scoped>
    .fixed_left{
        position: sticky;
        left: 0;
        top: 0;
        z-index: 999;
        background: var(--bs-tertiary-bg);
    }
    .fixed_left::before{
        content: '';
        position: absolute;
        left: -1px;
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--bs-border-color);;
    }
    .fixed_left::after{
        content: '';
        position: absolute;
        right: -1px;
        top: 0;
        bottom: 0;
        border-left: 1px solid var(--bs-border-color);;
    }
</style>
