<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Expense 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('Invoice Number') }}</label>
                        <input type="text" class="form-control border-1" v-model="params.invoice_number" :placeholder="$t('Invoice Number')" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Chart Code') }}</label>
                        <Multiselect
                            :placeholder="$t('Chart Code')"
                            :searchable="true"
                            :options="chart_of_account"
                            label="chart_code_name"
                            trackBy="chart_code_name"
                            value="id"
                            v-model="params.chart_of_acc_id" />
                    </div>
                    <label class="form-label">{{ $t('Expense Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('Expense Date')" v-model="params.expense_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 table_scroll report_print">
                    <header-report :title="$t('Expense Report')" style="display:none"></header-report>
                    <table class="table table-bordered" id="excel-table">
                        <thead class="fixed_head sm_head">
                            <tr>
                                <th>{{ $t("#") }}</th>
                                <th class="text-nowrap">{{ $t("Invoice Number") }}</th>
                                <th class="text-nowrap">{{ $t("Expense Date") }}</th>
                                <th class="text-nowrap">{{ $t("Description") }}</th>
                                <th class="text-nowrap">{{ $t("Chart Name") }}</th>
                                <th class="text-nowrap">{{ $t("Debit") }}</th>
                                <th class="text-nowrap">{{ $t("Credit") }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template v-for="(value,index) in expense_data.data">
                                <tr  v-for="(sub,sub_index) in value.sub_expense" :key="sub_index">
                                    <td><template v-if="(sub_index==0)">{{index+1}} </template></td>
                                    <td><template v-if="(sub_index==0)">{{value.invoice_number}} </template></td>
                                    <td><template v-if="(sub_index==0)">{{value.expense_date | onlyDate}} </template></td>
                                    <td><template v-if="(sub_index==0)">{{value.desc}} </template></td>
                                    <td class="text-nowrap">({{sub.chart_code}}) {{sub.chart_name}}</td>
                                    <td class="text-nowrap">{{sub.debit==0?0: sub.debit | numberFomartValue}}</td>
                                    <td class="text-nowrap">{{sub.credit==0?0: sub.credit | numberFomartValue}}</td>
                                </tr>
                            </template>
                            <tr class="table-active">
                                <td colspan="5" class="text-end">{{ $t("Total") }}</td>
                                <td>{{totalCreditExpense | numberFomartValue}}</td>
                                <td>{{totalDebitExpense | numberFomartValue}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display:none"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="expense_data" @onChangePage="funGetData($event)"> </cumstom-pagination>
        </div>
        <div slot="modal-custom">
            <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
        </div>
    </theme-table>
</template>

<script>
    import HeaderReport from '../../../components/report/header.vue'
    import CumstomPagination from '../../../components/CustomPagination.vue'
    import CustomDateFilter from '../../../components/report/CustomDateFilter.vue'
    import FooterReport from '../../../components/report/footer.vue'
    import ThemeTable from "../../../components/ThemeTable.vue"
    import { exportTableToExcel } from "../../../exportExcel.js"
    export default {
        components:{
            HeaderReport,
            CumstomPagination,
            CustomDateFilter,
            FooterReport,
            ThemeTable
        },
        data() {
            return {
                format: 'YYYY-MM-DD',
                expense_data: {data:[]},
                chart_of_account:[],
                form: new Form({
                }),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: '',
                    expense_list: 2,

                    invoice_number:'',
                    chart_of_acc_id:'',
                    expense_date:[],
                },
            }
        },
        created() {
            this.funGetData();
            this.funGetDataChartOfAcc();
        },
        methods: {
            funGetDataChartOfAcc(){
                axios.get('accounting/com-expense').then((res) => {
                    this.chart_of_account  = res.data;
                }).catch((error) =>{
                    console.log(error);
                });
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios.get('accounting/expenses', {
                    params: this.params
                }).then((res) => {
                    this.expense_data = 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.expense_date = value.data;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper('show-print');
            },

             async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "ExportExpense",
                        reportTitle: "របាយការណ៍ចំណាយ",
                        subDate:this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            },
        },
        computed:{
            totalDebitExpense: function(){
                var sum = 0;
                this.expense_data.data?.forEach(e => {
                    sum += e.sum_debit;
                });
                return sum;
            },
            totalCreditExpense:function(){
                var sum = 0;
                this.expense_data.data?.forEach(e => {
                    sum += e.sum_credit;
                });
                return sum;
            },
        },
    }
</script>