<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Loan Loss Provision Classification Report') }}
        </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>
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Term Type') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.term_type" trackBy="title"
                            value="id" label="title" :searchable="true" :options="termTypes" />
                    </div>
                    <label class="form-label">ថ្ងៃសំវិធានធនឥណទាន</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="'ថ្ងៃសំវិធានធនឥណទាន'"
                            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>
                    <label class="form-label">{{ $t('As of day') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker :placeholder="$t('As of day')" v-model="params.as_of_date" valueType="format"
                            format="YYYY-MM-DD"> </date-picker>
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" class="btn btn-success" @click="funSearchData"><i
                                class="fa fa-search"></i> {{ $t('Search') }}</button>
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" @click="printP" class="btn btn-primary"><i class="fa fa-print"></i> {{
                            $t('Print') }}</button>
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" @click="exportExcell" class="btn btn-danger"><i class="fa fa-file-export"></i> {{ $t('Export') }}</button>
                    </div>
                </div>
            </div>
        </template>

        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('Loan Loss Provision Classification Report')" :date="params.date"
                        :date_title="$t('Completed Date')" style="display: none;"></header-report>
                    <table class="table table-bordered" id="excel-table">
                        <template v-for="(value, index) in dataReports.data">
                            <tr>
                                <td class="border-0">
                                    <table class="table table-bordered" >
                                        <tbody class="text-nowrap">
                                            <tr class="tr_head">
                                                <th colspan="8">
                                                    {{ index + 1 }}.{{ funTypeLoanLoss(value.type_loan_loss_provision) }}
                                                </th>
                                            </tr>
                                            <tr style="background-color: #f7f7f7 !important;">
                                                <th>ល.រ</th>
                                                <th>លេខសម្គាល់អតិថិជន</th>
                                                <th>ឈ្មោះអតិថិជន</th>
                                                <th>ទំហំកម្ចី</th>
                                                <th>ទឹកប្រាក់នៅជំពាក់</th>
                                                <th>ទឹកប្រាក់យឺតយ៉ាវ</th>
                                                <th>ចំនួនទឹកប្រាក់សំវិធានធន</th>
                                                <!-- <th>ចំនួនទឹកប្រាក់សំវិធានធនសរុប</th> -->
                                                <th>មន្រ្តីឥណទាន</th>
                                            </tr>
                                            <tr v-for="(val, sub_index) in value.details" :key="sub_index">
                                                <td>{{ sub_index + 1 }}</td>
                                                <td>{{ val.client_code }}</td>
                                                <td>{{ val.client_name }}</td>
                                                <td>{{ val.total_loan_out | numberFomartValue }}</td>
                                                <td>{{ val.total_loan_balance | numberFomartValue }}</td>
                                                <td>{{ val.total_amount_late | numberFomartValue }}</td>
                                                <td>{{ val.total_amount_loss_provision | numberFomartValue }}</td>
                                                <td>{{ val.co_name }}</td>
                                            </tr>
                                            <tr class="table-active">
                                                <td colspan="3" class="text-end">{{ $t("Total") }}</td>
                                                <td>{{ value.sum_total_loan_out | numberFomartValue }}</td>
                                                <td>{{ value.sum_total_loan_balance | numberFomartValue }}</td>
                                                <td>{{ value.sum_total_amount_late | numberFomartValue }}</td>
                                                <td>{{ value.sum_total_amount_loss_provision | numberFomartValue }}</td>
                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </template>
                    </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 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";
import moment from "moment";
export default {
    components: {
        CumstomPagination,
        CustomDateFilter,
        HeaderReport,
        FooterReport,
        ThemeTable,
    },
    data() {
        return {
            moment: moment,
            format: "YYYY-MM-DD",
            dataReports: { data: [] },
            coes: [],
            termTypes: [],
            form: new Form({

            }),
            params: {
                page: 1,
                per_page: 25,
                co_id: [],
                date: [],
                term_type: [],
                as_of_date: "",
            },
        };
    },
    created() {
        this.funGetData();
        axios.get("admin-api/com-co").then((res) => { this.coes = res.data });
        axios.get("admin-api/com-loan-term-type").then((res) => { this.termTypes = res.data });
    },
    methods: {
        funGetData(page = 1) {
            this.params.page = page;
            axios.get("admin-api/loan-loss-provision-classific", {
                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);
                }
            });
        },
        PageChange: function (e) {
            this.params.per_page = e.target.value;
            this.funGetData();
        },
        chooseDate(value) {
            this.params.date = value.data;
            this.funGetData();
        },
        funSearchData() {
            this.params.pagin = 'true';
            this.funGetData();
        },
        printP() {
            this.$htmlToPaper("show-print");
        },
        funTypeLoanLoss(type) {
            if (type == 2) {
                return ' របាយការណ៍អតិថិជនក្រោមស្តង់ដារ (Sub-Standard)';
            } else if (type == 3) {
                return 'របាយការណ៍អតិថិជនសង្ស័យ(Doubful)';
            } else {
                return 'របាយការណ៍អតិថិជនបាត់បង់(Loan Loss)';
            }
        },
        async exportExcell() {
            this.$isLoading(true)
            try {
                await exportTableToExcel({
                    tableId: "excel-table",
                    filename: "LoanLossProClassific",
                    reportTitle: "ចំណាត់ថ្នាក់សំវិធានធនឥណទាន",
                    subDate: this.params.date,
                })
            } catch (e) {
                this.$toast.warning(e.message);
            } finally {
                this.$isLoading(false)
            }
        }
    },
    computed: {

    }
};
</script>
