<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Summary Asset Depreciation 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">ឈ្មោះទ្រព្យសកម្ម</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.asset_id" trackBy="asset_name" value="id" label="asset_name" :searchable="true" :options="group_assets" />
                    </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('Summary Asset Depreciation Report')" :date="params.date" :date_title="'កាលបរិច្ឆេទព្រីន'" style="display: none;"></header-report>
                    <table class="table table-bordered" id="excel-table">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th>ល.រ</th>
                                <th>ប្រភេទទ្រព្យសកម្ម</th>
                                <th>តម្លៃទិញ</th>
                                <th>ទឹកប្រាក់រំលស់ប្រចាំខែ</th>
                                <th>ទឹកប្រាក់បានរំលស់</th>
                                <th>ទឹកប្រាក់នៅសល់</th>
                                <th>សាខា</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(value, index) in dataPayments" :key="index">
                                <td>{{ index + 1 }}</td>
                                <td>{{ value.asset_name}}</td>
                                <td>{{ value.sum_amount | numberFomartValue }}</td>
                                <td>{{ value.sum_first_payment | numberFomartValue }}</td>
                                <td>{{ value.sum_paid | numberFomartValue }}</td>
                                <td>{{ value.sum_loan_balance | numberFomartValue }}</td>
                                <td>{{ value.branch_name}}</td>
                            </tr>
                            <tr class="table-active">
                                <td colspan="2" class="text-end">{{ $t("Total") }}</td>
                                <td>{{sumAmount | numberFomartValue}}</td>
                                <td>{{sumFirstPayment | numberFomartValue}}</td>
                                <td>{{sumPaid | numberFomartValue}}</td>
                                <td>{{sumLoanBalance | numberFomartValue}}</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display: none;"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dataPayments" @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 ThemeTable from "../../../components/ThemeTable.vue";
    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 { exportTableToExcel } from "../../../exportExcel.js";
    export default {
        components: {
            ThemeTable,
            CumstomPagination,
            CustomDateFilter,
            HeaderReport,
            FooterReport,
        },
        data() {
            return {
                moment : moment,
                format : "YYYY-MM-DD",
                dataPayments: { data: [] },
                group_assets : [],
                form: new Form({

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

                    asset_id: [],
                },
            };
        },
        created() {
            this.funGetData();
            this.getGroupAsset();
        },
        methods: {
            getGroupAsset() {
                axios.get('accounting/get-asset').then((res) => {
                    this.group_assets = res.data;
                }).catch((error) => {
                    console.log(error);
                });
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios.get("accounting/summary-asset-depreciation-report", {
                    params: this.params,
                }).then((res) => {
                    this.dataPayments = res.data.depreciation;
                }).catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            funSearchData(){
                this.params.pagin = 'true';
                this.funGetData();
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            chooseDate(value) {
                this.params.date = value.data;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
            async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "LoanApprovalRejectedReport",
                        reportTitle: "របាយការណ៍អនុម័តកម្ចី",
                        subDate:this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            }
        },
        computed: {
            sumAmount: function () {
                var sum = 0;
                this.dataPayments.forEach(function (item) {
                    sum += parseFloat(item.sum_amount);
                });
                return sum;
            },
            sumFirstPayment: function () {
                var sum = 0;
                this.dataPayments.forEach(function (item) {
                    sum += parseFloat(item.sum_first_payment);
                });
                return sum;
            },  
            sumPaid: function () {
                var sum = 0;
                this.dataPayments.forEach(function (item) {
                    sum += parseFloat(item.sum_paid);
                });
                return sum;
            },  
            sumLoanBalance: function () {
                var sum = 0;
                this.dataPayments.forEach(function (item) {
                    sum += parseFloat(item.sum_loan_balance);
                });
                return sum;
            },
        },
    };
</script>