<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" :default-filter="false" :table-responsive="false"
                            :default-object="{operator_id:''}">
                    <template v-slot:page_top>
                        <page-top topPageTitle="User Wise Details Report" :default-add-button="false">
                            <div @click="printData('printDiv')">
                                <button class="btn btn-outline-primary"><i class="fa-sharp fa-solid fa-print"></i> Print
                                </button>
                            </div>
                        </page-top>
                    </template>
                    <template v-slot:filter>
                        <div class="col-md-3">
                            <input class="form-control" v-model="formFilter.name" placeholder="Search by User Name">
                        </div>
                        <div class="col-md-3">
                            <datepicker v-model="formFilter.start_date" input_class="form-control" validate="required" placeholder="Start Date"></datepicker>
                        </div>
                        <div class="col-md-3">
                            <datepicker v-model="formFilter.end_date" input_class="form-control" validate="required" placeholder="End Date"></datepicker>
                        </div>
                    </template>
                    <template v-slot:reportHeader>
                        <div class="row mb-3 mt-3 report_header">
                            <div class="col-12 text-center"><h4>User Wise Details</h4></div>
                            <div class="col-12 text-start">
                                <strong>Date : {{requiredData.date}}</strong>
                            </div>
                        </div>
                    </template>
                    <template v-slot:data>
                        <tr v-for="(data, index) in dataList">
                            <td class="fw-medium">{{index+1}}</td>
                            <td>{{data.user_name}}</td>
                            <td>{{data.message_count || '0'}}</td>
                            <td>{{data.api_delivered || '0'}}</td>
                            <td>{{data.api_pending || '0'}}</td>
                            <td>{{data.failed_sms || '0'}}</td>
                            <td>{{ (data.api_delivered * data.rate).toFixed(2) }}</td>
                        </tr>
                    </template>
                </data-table>
            </div>
        </div>
    </div>
</template>

<script>
    import DataTable from "../../components/dataTable";
    import Pagination from "../../plugins/pagination/pagination";
    import PageTop from "../../components/pageTop";

    export default {
        name: "userwiseDetails",
        components: {PageTop, Pagination, DataTable},
        data() {
            return {
                tableHeading: ['Sl', 'User Name', 'Total Send SMS', 'Total Delivered', 'Total Pending', 'Total Failed','total Usage amount'],
            }
        },
        methods: {
            getFirstDayOfMonth:function() {
                const today = new Date();
                const year = today.getFullYear();
                const month = (today.getMonth() + 1).toString().padStart(2, '0');
                const day = '01';
                return `${year}-${month}-${day}`;
            },
            getCurrentDate() {
                const today = new Date();
                const year = today.getFullYear();
                const month = (today.getMonth() + 1).toString().padStart(2, '0');
                const day = today.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
            },
        },
        mounted() {
            this.getDataList();
            this.$set(this.formFilter, 'start_date',this.getFirstDayOfMonth());
            this.$set(this.formFilter, 'end_date', this.getCurrentDate());
        }
    }
</script>

<style scoped>

</style>
