<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('List of Loan Approve') }} BM
        </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('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('Installment Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('Installment 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="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="'បញ្ជីស្នើរអនុម័តកម្ចី​ BM'" style="display: none;"></header-report>
                    <table class="table table-bordered" id="excel-table">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th>{{ $t("#") }}</th>
                                <th>{{ $t("Loan Code") }}</th>
                                <th>{{ $t("CO Name") }}</th>
                                <th class="fixed_left">{{ $t("Client Name") }}</th>
                                <th>{{ $t("Phone") }}</th>
                                <th>{{ $t("Address") }}</th>
                                <th>{{ $t("Installment Date") }}</th>
                                <th>{{ $t("Start Date") }}</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 style="color:#3579c1">{{ $t('Amount To Client') }}</th>
                                <th>{{ $t("Duration") }}</th>
                                <th>{{ $t("Term Condition") }}</th>
                                <th>{{ $t("Type Payment") }}</th>
                                <th>{{ $t("Status") }}</th>
                                <th>{{ $t("Branch") }}</th>
                                <th class="display-none">{{ $t("Action") }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(loan, index) in dataLoans.data" :key="index">
                                <td>{{ index + 1 }}</td>
                                <td>{{ loan.loan_code }}</td>
                                <td>{{ loan.co_name }}</td>
                                <td class="fixed_left">{{ loan.client_name }}</td>
                                <td>{{ loan.client_phone }}</td>
                                <td>{{ loan.address }}</td>
                                <td>{{ loan.installment_date | onlyDate }}</td>
                                <td>{{ loan.start_date | onlyDate }}</td>
                                <td>{{ loan.loan_out | numberFomartValue }}</td>
                                <td>
                                    {{ loan.total_interest | numberFomartValue }}
                                    <span><sup class="text-success">({{loan.interest | numberFomartValue}}%)</sup></span>
                                </td>
                                <!-- <td>
                                    {{ loan.total_operating_service | numberFomartValue }}
                                    <span><sup class="text-success">({{loan.operating_service | numberFomartValue}}%)</sup></span>
                                </td> -->
                                <td>{{ loan.loan_receive | numberFomartValue }}</td>
                                <td>
                                    {{ loan.total_service | numberFomartValue }}
                                    <span><sup class="text-success">({{loan.service | numberFomartValue}}%)</sup></span>
                                </td>
                                <!-- <td>
                                    {{ loan.total_insurance | numberFomartValue }}
                                    <span><sup class="text-success">({{loan.insurance | numberFomartValue}}%)</sup></span>
                                </td> -->
                                <td>{{ loan.amount_client_receive | numberFomartValue }}</td>
                                <td>{{ loan.period}}</td>
                                <td>{{ loan.term_condi_name}}</td>
                                <td>{{ funConditionPay(loan.condition_pay,loan.term_type)}}</td>
                                <td>
                                    <span :style="{ 'color': loan.color }">{{loan.loan_status}}</span>
                                </td>
                                <td>{{ loan.branch_name}}</td>
                                <td class="d-flex align-items-center">
                                    <div class="actions d-flex align-items-center flex-nowrap me-3">
                                        <button type="button" v-if="$can('Loan Request BM')" v-show="user_branch != -1" @click="funRequest(loan.id)" :title="$t('Loan Request BM')" class="btn btn-primary s-btn-xs me-2">
                                                    <i class="fa-solid fa-check-to-slot fa-sm"></i> 
                                        </button>
                                        <button type="button" class="btn btn-success s-btn-xs" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa-solid fa-ellipsis fa-sm"></i>
                                        </button>
                                        <ul class="dropdown-menu shadow me-2">
                                            <li class="dropdown-item bg-secondary text-white">
                                                <p><i class="fa-solid fa-user fa-sm me-2 text-white"></i> {{ loan.client_name }}</p>
                                            </li>

                                            <!-- ================== ផ្នែកកម្ចីប្រាក់ (Loan Section) ================== -->
                                            <!-- <li>
                                                <button type="button" @click="funContractLoan(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-file-signature fa-sm me-2 text-primary"></i> {{ $t('Loan Contract') }}
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" @click="funContractLoanFixed(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-handshake fa-sm me-2 text-primary"></i> {{ $t('កិច្ចសន្យាខ្ចីប្រាក់និងប្រគល់ប្រាក់') }}
                                                </button>
                                            </li>
                                            <li><hr class="dropdown-divider"></li> -->

                                            <!-- ================== ផ្នែករថយន្ត (Vehicle Section) ================== -->
                                            <!-- <li>
                                                <button type="button" @click="funReceiptPurchaseSaleCar(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-car fa-sm me-2 text-info"></i> {{ $t('លិខិតទិញ-លក់រថយន្ត') }}
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" @click="funContractRentalCar(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-car-on fa-sm me-2 text-warning"></i> {{ $t('កិច្ចសន្យាជួលរថយន្ត') }}
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" @click="funContractTerminateRentalCar(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-ban fa-sm me-2 text-danger"></i> {{ $t('កិច្ចសន្យាពមព្រៀងបញ្ចប់ភតិសន្យា(កិច្ចសន្យាជួលរថយន្ត)') }}
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" @click="funReceiptPaymentVehicle(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-car-side fa-sm me-2 text-success"></i> {{ $t('លិខិតប្រគល់-ទទួលប្រាក់ និងរថយន្ត') }}
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" @click="funReceiptDebtCar(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-file-circle-exclamation fa-sm me-2 text-warning"></i> {{ $t('លិខិតជំពាក់ឯកសាររថយន្ត') }}
                                                </button>
                                            </li>

                                            <li><hr class="dropdown-divider"></li> -->

                                            <!-- ================== ផ្នែកដីធ្លី (Land Section) ================== -->
                                            <!-- <li>
                                                <button type="button" @click="funContractLandPurchaseSale(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-map-location-dot fa-sm me-2 text-success"></i> {{ $t('កិច្ចសន្យាទិញ-លក់ដី') }}
                                                </button>
                                            </li>
                                            <li><hr class="dropdown-divider"></li> -->
                                            <!-- ================== ផ្នែកបង្កាន់ដៃ និងបញ្ចប់កិច្ចសន្យាទូទៅ (Receipts & Terminations) ================== -->
                                            <!-- <li>
                                                <button type="button" @click="funReceiptPayment(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-money-bill-wave fa-sm me-2 text-success"></i> {{ $t('លិខិតប្រគល់- ទទួលប្រាក់') }}
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" @click="funContractTerminatPayment(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-file-circle-xmark fa-sm me-2 text-danger"></i> {{ $t('លិខិតប្រគល់និងទទួលប្រាក់រំលាយកិច្ចសន្យា') }}
                                                </button>
                                            </li>
                                            <li><hr class="dropdown-divider"></li> -->
                                           

                                            <li>
                                                <router-link v-if="$can('Loan Table Schedule')" :to="{ name: 'TableSchedule',params:{id:loan.id} }" class="dropdown-item">
                                                    <i class="fa-solid fa-list fa-sm me-2 text-success"></i> {{ $t('Schedule Repayment') }}
                                                </router-link>
                                            </li>


                                            <li>
                                                <button v-if="$can('Loan Request BM')" v-show="user_branch != -1" type="button" :title="$t('Return')" @click="funRejectRequest(loan.id)" class="dropdown-item" >
                                                    <i class="fa-solid fa-arrow-left fa-sm me-2 text-warning"></i> {{$t('Return')}}
                                                </button>
                                            </li>
                                            <li>
                                                <button type="button" v-if="$can('Loan Delete')" v-show="user_branch != -1" @click="funDelete(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-trash-can fa-sm me-2 text-danger"></i> {{ $t('Delete') }}
                                                </button>
                                            </li>
                                            <!-- <li>
                                                <router-link v-if="$can('Loan Edit')" :to="{ name: 'LoanCreate',params:{id:loan.id} }" class="dropdown-item" >
                                                    <i class="fa-solid fa-pen-to-square fa-sm me-2 text-dark"></i> {{ $t('Edit') }}
                                                </router-link>
                                            </li>
                                            <li>
                                                <button type="button" v-if="$can('Loan Delete')" @click="funDelete(loan.id)" class="dropdown-item">
                                                    <i class="fa-solid fa-trash-can fa-sm me-2 text-danger"></i> {{ $t('Delete') }}
                                                </button>
                                            </li> -->
                                            <!-- <li>
                                                <router-link v-if="$can('Loan Collateral Create')" :to="{ name: 'CollateralDetailCreate',params:{id:loan.id} }" class="dropdown-item">
                                                    <i class="fa-solid fa-plus fa-sm me-2 text-secondary"></i> {{ $t('Collateral Create') }}
                                                </router-link>
                                            </li> -->
                                        </ul>
                                        
                                    </div>
                                </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>

            <ContractLoan :obj="obj"></ContractLoan>
            <ContractLandPurchaseSale :obj="obj"></ContractLandPurchaseSale>
            <ContractTerminatPayment :obj="obj"></ContractTerminatPayment>
            <ReceiptPayment :obj="obj"></ReceiptPayment>
            <ContractRentalCar :obj="obj"></ContractRentalCar>
            <ContractTerminateRentalCar :obj="obj"></ContractTerminateRentalCar>
            <ReceiptDebtCar :obj="obj"></ReceiptDebtCar>
            <ReceiptPaymentVehicle :obj="obj" />
            <ContractLoanFixed :obj="obj" />
            <ReceiptPurchaseSaleCar :obj="obj"></ReceiptPurchaseSaleCar>

        </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";
    // =================== Contract and Receipt =================== //
    import ContractLoan from "../loan/show-loan/ContractLoan.vue";
    import ContractLandPurchaseSale from "../loan/show-loan/ContractLandPurchaseSale.vue";
    import ContractTerminatPayment from "../loan/show-loan/ContractTerminatPayment.vue";
    import ReceiptPayment from "../loan/show-loan/ReceiptPayment.vue";
    import ContractRentalCar from "../loan/show-loan/ContractRentalCar.vue";
    import ContractTerminateRentalCar from "../loan/show-loan/ContractTerminateRentalCar.vue";
    import ReceiptDebtCar from "../loan/show-loan/ReceiptDebtCar.vue";
    import ReceiptPurchaseSaleCar from "../loan/show-loan/ReceiptPurchaseSaleCar.vue";
    import ContractLoanFixed from "../loan/show-loan/ContractLoanFixed.vue";
    import ReceiptPaymentVehicle from "../loan/show-loan/ReceiptPaymentVehicle.vue";

    import { exportTableToExcel } from "../../exportExcel.js";
    export default {
        components: {
            CumstomPagination,
            CustomDateFilter,
            HeaderReport,
            FooterReport,
            ThemeTable,

            ContractLoan,
            ContractLandPurchaseSale,
            ContractTerminatPayment,
            ReceiptPayment,
            ContractRentalCar,
            ContractTerminateRentalCar,
            ReceiptDebtCar,
            ReceiptPurchaseSaleCar,
            ReceiptPaymentVehicle,
            ContractLoanFixed,
        },
        data() {
            return {
                moment: moment,
                dataLoans: [],
                clients: [],
                coes: [],
                obj  : [],
                user_branch: '',
                form: new Form({

                }),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: "",
                    pagin : false,
                    check_list_loan:1,
                    loan_status_id : 8,

                    client_id: [],
                    date     : [],
                    co_id    : [],
                },
            };
        },
        created() {
            this.funGetData();
            this.getClient();
            this.getCO();
            this.funComUserBranch();
        },
        methods: {
            funContractLoan(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                        this.obj = {
                            loan : res.data.loan,
                            client : res.data.client,
                            garuantor1 : res.data.garuantor1,
                            garuantor2 : res.data.garuantor2,
                            garuantor3 : res.data.garuantor3,
                            collateral_land_first : res.data.collateral_land_first,
                            collateral_land_second : res.data.collateral_land_second,
                            collateral_motor_first : res.data.collateral_motor_first,
                            collateral_motor_second : res.data.collateral_motor_second,
                        }
                        }).catch((error) => {
                            console.log(error);
                        });
                $("#showContractLoan").modal("show");
            },
            
            funContractLoanFixed(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                        collateral_all : res.data.collateral_all,
                        data : res.data.data,
                        currency : res.data.currency,
                        co : res.data.co,
                        countPay : res.data.countPay,
                        repre_name : res.data.repre_name,
                    }
                }).catch((error) => {
                    console.log(error);
                });
                $("#showContractLoanFixed").modal("show");
            },
            funReceiptPurchaseSaleCar(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                    }
                    }).catch((error) => {
                        console.log(error);
                    });
                $("#showReceiptPurchaseSaleCar").modal("show");
            },

            funContractRentalCar(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                    }
                    }).catch((error) => {
                        console.log(error);
                    });
                $("#showContractRentalCar").modal("show");
            },

            funContractTerminateRentalCar(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                    }
                    }).catch((error) => {
                        console.log(error);
                    });
                $("#showContractTerminateRentalCar").modal("show");
            },

            funReceiptPaymentVehicle(id) {
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan: res.data.loan,
                        client: res.data.client,
                        garuantor1: res.data.garuantor1,
                        garuantor2: res.data.garuantor2,
                        garuantor3: res.data.garuantor3,
                        collateral_land_first: res.data.collateral_land_first,
                        collateral_land_second: res.data.collateral_land_second,
                        collateral_motor_first: res.data.collateral_motor_first,
                        collateral_motor_second: res.data.collateral_motor_second,
                        collateral_all: res.data.collateral_all,
                        data: res.data.data,
                        currency: res.data.currency,
                        co: res.data.co,
                        countPay: res.data.countPay,
                        repre_name: res.data.repre_name,
                    };
                }).catch((error) => {
                    console.log(error);
                });
                $("#showReceiptPaymentVehicle").modal("show");
            },

            funReceiptDebtCar(id){
                 axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                    }
                    }).catch((error) => {
                        console.log(error);
                    });
                $("#showReceiptDebtCar").modal("show");
            },

            funContractLandPurchaseSale(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                    }
                    }).catch((error) => {
                        console.log(error);
                    });
                $("#showContractLandPurchaseSale").modal("show");
            },

            funReceiptPayment(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                    }
                    }).catch((error) => {
                        console.log(error);
                    });
                $("#showReceiptPayment").modal("show");
            },

            funContractTerminatPayment(id){
                axios.get("admin-api/loans/show-payment/" + id).then((res) => {
                    this.obj = {
                        loan : res.data.loan,
                        client : res.data.client,
                        garuantor1 : res.data.garuantor1,
                        garuantor2 : res.data.garuantor2,
                        garuantor3 : res.data.garuantor3,
                        collateral_land_first : res.data.collateral_land_first,
                        collateral_land_second : res.data.collateral_land_second,
                        collateral_motor_first : res.data.collateral_motor_first,
                        collateral_motor_second : res.data.collateral_motor_second,
                    }
                    }).catch((error) => {
                        console.log(error);
                    });
                $("#showContractTerminatPayment").modal("show");
            },


            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);
                    });
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios
                    .get("admin-api/loans", {
                        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);
                        }
                    });
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            funSearchData() {
                this.params.pagin = 'true';
                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);
                }
            },
            chooseDate(value) {
                this.params.date = value.data;
                this.funGetData();
            },
            funRequest(id) {
                this.form.status_approve = 1;
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.put("admin-api/loans/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
            funRejectRequest(id) {
                this.form.status_approve = 7;
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.put("admin-api/loans/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
            funDelete(id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.delete("admin-api/loans/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
            async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "ListRequestBM",
                        reportTitle: "បញ្ជីស្នើរអនុម័តកម្ចី​ BM",
                        subDate:this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            }
        },
    };
</script>

<style scoped>
    .fixed_left{
        position: sticky;
        left: 0;
        top: 0;
        z-index: 999;
        background: #f8f8f8;
    }
    .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>
