<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            <!-- NET PROFIT/LOSS STATEMENT FOR <span class="text-uppercase">{{ current_month }}</span>_{{ current_year }} / {{ funBranchCode(user_branch) }} -->
        </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">
                    <label class="form-label">{{ $t('Journal Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('Journal Date')" v-model="params.journal_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>
        </template>
        <div slot="body">
            <div id="show-print">
                <div class="table-responsive tbscroll_nopaginat custom_report">
                    <h5 class="mb-4 d-block d-print-none"> 
                        NET PROFIT/LOSS STATEMENT FOR 
                        <span v-if="params.journal_date!=[]">
                            <span v-if="params.journal_date[0]!=params.journal_date[1]">
                                <strong>{{ $t("From ") }}{{funDate(params.journal_date[0])}} {{ $t("To") }} {{funDate(params.journal_date[1])}}</strong>
                            </span>
                            <span v-else>
                                <strong>{{funDate(params.journal_date[0])}}</strong>
                            </span>
                        </span>
                        <span v-else>
                            <span class="text-uppercase">{{ current_month }}</span>_{{ current_year }}
                        </span> / {{ branch_name }}
                    </h5>
                    <h5 class="mb-4 text-center d-none d-print-block"> 
                        NET PROFIT/LOSS STATEMENT FOR 
                        <span v-if="params.journal_date!=[]">
                            <span v-if="params.journal_date[0]!=params.journal_date[1]">
                                <strong>{{ $t("From ") }}{{funDate(params.journal_date[0])}} {{ $t("To") }} {{funDate(params.journal_date[1])}}</strong>
                            </span>
                            <span v-else>
                                <strong>{{funDate(params.journal_date[0])}}</strong>
                            </span>
                        </span>
                        <span v-else>
                            <span class="text-uppercase">{{ current_month }}</span>_{{ current_year }}
                        </span> / {{ branch_name }}
                    </h5>
                    <table class="table table-custom" id="excel-table">
                        <tbody>
                            <tr class="text-center">
                                <th>#</th>
                                <th>ACCOUNT NUMBER</th>
                                <th>ACCOUNT NAME</th>
                                <th>DEBIT</th>
                                <th>CREDIT</th>
                            </tr>
                            <tr>
                                <th colspan="5"><i><u>I-REVENUE</u></i></th>
                            </tr>
                            <tr v-for="(income,index)  in incomes" :key="index">
                                <td class="text-center">{{ index +1}}</td>
                                <td class="text-center">{{income.chart_code}}</td>
                                <td>{{income.chart_name}}</td>
                                <td></td>
                                <td class="text-end">{{(income.total) | numberFomartValue}}</td>
                            </tr>
                            <tr>
                                <th colspan="3">TOTAL REVENUE</th>
                                <th></th>
                                <th class="text-end">{{total_income | numberFomartValue}}</th>
                            </tr>
                            <tr>
                                <th colspan="5"><i><u>II-EXPENSE</u></i></th>
                            </tr>
                            <tr v-for="(expense,index) in  expenses" :key="index">
                                <td class="text-center">{{ index +1}}</td>
                                <td class="text-center">{{expense.chart_code}}</td>
                                <td>{{expense.chart_name}}</td>
                                <td class="text-end">{{(expense.total) | numberFomartValue}}</td>
                                <td class="text-end"></td>
                            </tr>
                            <tr>
                                <th colspan="3">TOTAL EXPENSE</th>
                                <th class="text-end">{{ total_expense | numberFomartValue}}</th>
                                <th class="text-end"></th>
                            </tr>
                            <tr class="table-success">
                                <th colspan="3"><i>Net Income/Loss</i></th>
                                <th class="text-end"></th>
                                <th class="text-end">{{ net_profit | numberFomartValue}}</th>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display: none;"></footer-report>
                </div>
            </div>
        </div>

        <div slot="modal-custom">
            <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
        </div>
    </theme-table>
</template>
<script>
    var moment = require("moment"); 
    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: {
            FooterReport,
            HeaderReport,
            CustomDateFilter,
            ThemeTable,
        },
        data() {
            return {
                format: "YYYY-MM-DD",
                branch_name:"",
                incomes: [],
                expenses: [],
                net_profit: 0,
                total_income: 0,
                total_expense: 0,
                total_cost_ogs: 0,
                current_month:'',
                current_year:'',
                user_branch :'',
                form: new Form({}),
                params: {
                    journal_date: [],
                },
            };
        },
        created() {
            this.funGetData();
            this.funComUserBranch();
        },
        methods: {
            funGetData() {
                axios
                    .get("accounting/netprofit-loss", {
                        params: this.params,
                    })
                    .then((res) => {
                        this.branch_name = res.data.branch_name;
                        this.incomes = res.data.incomes;
                        this.total_income = res.data.total_income;
                        this.total_cost_ogs = res.data.total_cost_ogs;
                        this.expenses = res.data.glexspenses;
                        this.total_expense = res.data.total_glexpense;
                        this.net_profit = res.data.net_profit;
                        this.current_month = res.data.current_month;
                        this.current_year  = res.data.current_year;
                    });
            },
            chooseDate(value) {
                this.params.journal_date = value.data;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
           
            async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "ExportNetProfitLoss",
                        reportTitle: "របាយការណ៍ចំណេញ/ខាត",
                        subDate:this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            },
            funDate(date) {
                return moment(date).format("DD")+'_'+moment(date).format("MMMM")+'_'+moment(date).format("YYYY");
            },
            // funMonth(mon) {
            //     if (mon == "Jan") {
            //         return "មករា";
            //     } else if (mon == "Feb") {
            //         return "កុម្ភៈ";
            //     } else if (mon == "Mar") {
            //         return "មីនា";
            //     } else if (mon == "Apr") {
            //         return "មេសា";
            //     } else if (mon == "May") {
            //         return "ឧសភា";
            //     } else if (mon == "Jun") {
            //         return "មិថុនា";
            //     } else if (mon == "Jul") {
            //         return "កក្កដា";
            //     } else if (mon == "Aug") {
            //         return "សីហា";
            //     } else if (mon == "Sep") {
            //         return "កញ្ញា";
            //     } else if (mon == "Oct") {
            //         return "តុលា";
            //     } else if (mon == "Nov") {
            //         return "វិច្ឆិកា";
            //     } else if (mon == "Dec") {
            //         return "ធ្នូ";
            //     }
        },
    };
</script>
