<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Not Closing Report') }}
        </span>
        <div 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('Client') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.client_id" trackBy="name"
                            value="id" label="name" :searchable="true" :options="clients" />
                    </div>
                    <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('Received Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('Received 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>
                    <div class="list-group mb-3">
                        <button type="button" class="btn btn-success" @click="funGetData"><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>
        </div>
        <div slot="body">
            <TabsHeader></TabsHeader>
            <div id="show-print">
                <div class="table-responsive report_print overflow-auto" style="height: calc(100vh - 250px)">
                    <header-report :title="$t('Not Closing Report')" :date="current_date" :type="1" style="display: none;"></header-report>
                    <table class="table table-bordered m-0" id="excel-table">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th class="fixed_start">{{ $t("#") }}</th>
                                <th class="fixed_start">{{ $t("Client Name") }}</th>
                                <th>{{ $t("CO Name") }}</th>
                                <th>{{ $t("Loan Code") }}</th>
                                <th>{{ $t("Installment Date") }}</th>
                                <th>{{ $t("Start Date") }}</th>
                                <th>{{ $t("Type Payment") }}</th>
                                <th>{{ $t("Duration") }}</th>
                                <th>{{ $t("Loan Out") }}</th>
                                <th>{{ $t("Total Interest") }}</th>
                                <th>{{ $t("Total Operating Services") }}</th>
                                <th class="text-success">{{ $t("Total Loan Amount") }}</th>
                                <th>{{ $t("Total Service") }}</th>
                                <th>{{ $t("Total Insurance") }}</th>
                                <th>{{ $t("Total Received") }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(loan, index) in dataLoans.data" :key="index">
                                <td class="fixed_start">{{ index + 1 }}</td>
                                <td class="fixed_start">{{ loan.client_name }}</td>
                                <td>{{ loan.co_name }}</td>
                                <td>{{ loan.loan_code }}</td>
                                <td>{{ loan.installment_date | onlyDate }}</td>
                                <td>{{ loan.start_date | onlyDate }}</td>
                                <td>{{ funConditionPay(loan.condition_pay, loan.term_type) }}</td>
                                <td>{{ loan.period }}</td>
                                <td>{{ loan.loan_out | numberFomartValue }}</td>
                                <td>{{ loan.total_interest | numberFomartValue }}</td>
                                <td>{{ loan.total_operating_service | numberFomartValue }} </td>
                                <td>{{ loan.loan_receive | numberFomartValue }}</td>
                                <td>{{ loan.total_service | numberFomartValue }}</td>
                                <td>{{ loan.total_insurance | numberFomartValue }}</td>
                                <td>{{ loan.loan_in | numberFomartValue }}</td>
                            </tr>
                            <tr class="table-active">
                                <td colspan="8" class="text-end">{{ $t("Total") }}</td>
                                <td>{{ totalLoanOut | numberFomartValue }}</td>
                                <td>{{ totalInterest | numberFomartValue }}</td>
                                <td>{{ totalMemberSer | numberFomartValue }}</td>
                                <td>{{ totalLoanReceived | numberFomartValue }}</td>
                                <td>{{ totalService | numberFomartValue }}</td>
                                <td>{{ totalInsurance | numberFomartValue }}</td>
                                <td>{{ totalLoanIn | numberFomartValue }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display: none;"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dataLoans" @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 TabsHeader from "./TabsHeader.vue";
    import ThemeTable from "../../../components/ThemeTable.vue";
    import { exportTableToExcel } from "../../../exportExcel.js";
    import HeaderReport from "../../../components/report/header.vue";
    import FooterReport from "../../../components/report/footer.vue";
    import CumstomPagination from "../../../components/CustomPagination.vue";
    import CustomDateFilter from '../../../components/report/CustomDateFilter.vue';
    export default {
        components: {
            CumstomPagination,
            HeaderReport,
            FooterReport,
            ThemeTable,
            TabsHeader,
            CustomDateFilter,
        },
        data() {
            return {
                moment: moment,
                format: "YYYY-MM-DD",
                dataLoans: { data: [] },
                current_date: new Date().toISOString(),
                clients: [],
                coes: [],
                form: new Form({}),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: "",

                    client_id: [],
                    co_id: [],
                    date: [],
                    deatail: 1,
                    client_type: 1,
                },
            };
        },
        created() {
            this.funGetData();
            this.getClient();
            this.getCO();
        },
        methods: {
            chooseDate(value){
                this.params.date = value.data;
                this.funGetData();
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios
                    .get("admin-api/loan-not-closing-report", {
                        params: this.params,
                    })
                    .then((res) => {
                        this.dataLoans = res.data;
                    })
                    .catch((error) => {
                        if (error.message == "Request failed with status code 403") {
                            this.$router.push({ name: "permissionTest" });
                        } else {
                            console.log(error.message);
                        }
                    });
            },
            getClient() {
                axios
                    .get("admin-api/com-client")
                    .then((res) => {
                        this.clients = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            getCO() {
                axios
                    .get("admin-api/com-co")
                    .then((res) => {
                        this.coes = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            myClickEvent() {
                this.$emit('my-custom-event')
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
            funTerm(status) {
                if (status == 1) {
                    return "ថ្ងៃ";
                } else if (status == 2) {
                    return "សប្ដាហ៍";
                } else if (status == 3) {
                    return "កន្លះខែ";
                } else if (status == 4) {
                    return "ខែ";
                }
            },
            funConditionPay(ConPay,status){
                    if(ConPay==1){
                        return 'បង់ប្រចាំ'+'-'+this.funTerm(status)+'-'+'ថេរ';
                    }else if(ConPay==2){
                        return 'បង់រំលោះប្រចាំ'+'-'+this.funTerm(status)+'-'+'ថយ(ដើមថេរ)';
                    }else if(ConPay==3){
                        return 'បង់ប្រាក់ដើមនិងការប្រាក់ថេរ'+'-'+this.funTerm(status);
                    }else if(ConPay==4){
                        return 'បង់តែការប្រាក់ប្រចាំ'+'-'+this.funTerm(status);
                    }
            },
            async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "ExportBorrow",
                        reportTitle: "របាយការណ៍អតិថិជនជំពាក់",
                        subDate: this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            }
        },
        computed: {
            totalLoanOut: function () {
                var sum = 0;
                this.dataLoans.data.forEach(function (item) {
                    sum += parseFloat(item.loan_out);
                });
                return sum;
            },
            totalInterest: function () {
                var sum = 0;
                this.dataLoans.data.forEach(function (item) {
                    sum += parseFloat(item.total_interest);
                });
                return sum;
            },
            totalMemberSer: function () {
                var sum = 0;
                this.dataLoans.data.forEach(function (item) {
                    sum += parseFloat(item.total_operating_service);
                });
                return sum;
            },
            totalLoanReceived: function () {
                var sum = 0;
                this.dataLoans.data.forEach(function (item) {
                    sum += parseFloat(item.loan_receive);
                });
                return sum;
            },
            totalService: function () {
                var sum = 0;
                this.dataLoans.data.forEach(function (item) {
                    sum += parseFloat(item.total_service);
                });
                return sum;
            },
            totalLoanIn: function () {
                var sum = 0;
                this.dataLoans.data.forEach(function (item) {
                    sum += parseFloat(item.loan_in);
                });
                return sum;
            },
            totalInsurance: function () {
                var sum = 0;
                this.dataLoans.data.forEach(function (item) {
                    sum += parseFloat(item.total_insurance);
                });
                return sum;
            },
        },
    };
</script>