<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Logactivity List') }}
        </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('User') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.user_id" trackBy="name" value="id" label="name" :searchable="true" :options="users" />
                    </div>
                
                    <label class="form-label">{{ $t('Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('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="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>
            </div>
        </template>

        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="'សកម្មភាពទូទៅនៅក្នុងប្រព័ន្ធ'" style="display: none;"></header-report>
                    <table class="table table-bordered">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th class="text-nowrap">{{ $t('#') }}</th>
                                <th class="text-nowrap">{{ $t('User') }}</th>
                                <th class="text-nowrap">{{ $t('Title') }}</th>
                                <th class="text-nowrap">{{ $t('Date Log') }}</th>
                                <th class="text-nowrap">{{ $t('Created At') }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(loan, index) in dataReports.data" :key="index">
                                <td class="text-nowrap">{{ index + 1 }}</td>
                                <td class="text-nowrap">{{ loan.user_name }}</td>
                                <td class="text-nowrap">{{ loan.description }}</td>
                                <td class="text-nowrap">{{ loan.created_at | onlyDate }}</td>
                                <td class="text-nowrap">{{ loan.created_at | dateTime }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display: none;"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dataReports" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
        <div slot="modal-custom">
            <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
        </div>
    </theme-table>
</template>
<script>
    import ActiveStatus from "../../components/ActiveStatus.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 ThemeTable from "../../components/ThemeTable.vue";
    import moment from "moment";
    export default {
        props: ["id"],
        components: {
            ActiveStatus,
            
            CumstomPagination,
            CustomDateFilter,
            HeaderReport,
            FooterReport,
            ThemeTable
        },
        data() {
            return {
                moment: moment,
                format: "YYYY-MM-DD",
                dataReports: { data: [] },
                users: [],
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: "",

                    user_id: [],
                    date: [],
                },
            };
        },

        created() {
            this.funGetData();
            this.getUser();
        },
        methods: {
            getUser() {
                axios
                    .get("admin-api/com-user")
                    .then((res) => {
                        this.users = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            chooseDate(value) {
                this.params.date = value.data;
                this.funGetData();
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios
                    .get("admin-api/getLogactivity", {
                        params: this.params,
                    })
                    .then((res) => {
                        this.dataReports = 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();
            },
            Searching(e) {
                // this.params.search_text = e.target.value;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
        },
    };
</script>
