<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="8">
                <h3>USER LOGS</h3>
            </el-col>
            <el-col :span="16">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button @click="clearLog" type="danger"><i class="el-icon-delete"></i> CLEAR LOG</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-select class="pager-options" v-model="pageSize" placeholder="Page Size">
                            <el-option v-for="item in pagerOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-right:0;">
                        <el-input placeholder="Search" prefix-icon="el-icon-search" v-model="keyword">
                            <el-button @click="refreshData" slot="append" icon="el-icon-refresh"></el-button>
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-table :data="tableData" stripe
        :default-sort = "{prop: sort, order: order}"
        v-loading="loading"
        @sort-change="sortChange">
            <el-table-column prop="created_at" label="Time" width="150px" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.created_at | readableTime}}
                </template>
            </el-table-column>
            <el-table-column prop="user" label="Username" width="100px"></el-table-column>
            <el-table-column prop="module" label="Module" width="100px"></el-table-column>
            <el-table-column prop="action" label="Action" width="100px"></el-table-column>
            <el-table-column prop="module_id" label="Module ID" width="100px" align="center"></el-table-column>
            <el-table-column prop="description" label="Description"></el-table-column>
            <el-table-column fixed="right" width="40px">
                <template slot-scope="scope">
                    <a href="#" @click.prevent="deleteData(scope.row.id)"><i class="el-icon-delete"></i></a>
                </template>
            </el-table-column>
        </el-table>

        <br>

        <el-row>
            <el-col :span="12">
                <el-pagination @current-change="goToPage"
                    :page-size="pageSize"
                    background
                    layout="prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </el-col>
            <el-col :span="12" style="text-align:right">
                Showing {{ rowFrom }} to {{ rowTo }} of {{ totalRow }} rows
            </el-col>
        </el-row>

    </el-card>

</template>

<script>
export default {
    filters: {
        readableTime: function(v) {
            return moment(v).format('DD-MMM-YYYY HH:mm')
        }
    },
    watch: {
        keyword: function(v, o) {
            this.requestData()
        },
        pageSize: function(v, o) {
            this.requestData()
        }
    },
    computed: {
        loading() {
            return this.$store.state.loading
        },
        pagerOptions() {
            return this.$store.state.pagerOptions
        }
    },
    data: function() {
        return {
            sortOrder: 'id',
            sortDirection: 'ASC',
            rowFrom: 0,
            rowTo: 0,
            totalRow: 0,
            keyword: '',
            page: 1,
            pageSize: 10,
            tableData: [],
            sort: 'created_at',
            order: 'descending',
        }
    },
    methods: {
        sortChange: function(column) {
            if (this.sort !== column.prop || this.order !== column.order) {
                this.sort = column.prop;
                this.order = column.order;
                this.requestData();
            }
        },
        goToPage: function(p) {
            this.page = p;
            this.requestData();
        },
        deleteData: function(id) {
            let _this = this;

            _this.$confirm('Are you sure?')
                .then(() => {
                    let params = { api_token: USER.api_token }
                    axios.delete(API_URL + '/userLog/' + id, { params: params })
                        .then(function(r) {
                            _this.requestData();
                            _this.$message({
                                message: 'Data BERHASIL dihapus.',
                                type: 'success'
                            });
                        })
                        .catch(function(e) {
                            _this.$message({
                                message: 'Data GAGAL dihapus.',
                                type: 'error'
                            });
                        })
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        clearLog: function() {
            let _this = this;
            _this.$confirm('Are you sure you want to clear all logs?')
                .then(() => {
                    let params = { api_token: USER.api_token }
                    axios.delete(API_URL + '/userLog/clear', { params: params })
                        .then(function(r) {
                            _this.requestData();
                            _this.$message({
                                message: 'Logs has been cleared.',
                                type: 'success'
                            });
                        })
                        .catch(function(e) {
                            _this.$message({
                                message: 'Failed to clear logs',
                                type: 'error'
                            });
                        })
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        refreshData: function() {
            this.keyword = '';
            this.page = 1;
            this.requestData();
        },
        requestData: function() {
            let _this = this;
            let params = {
                page: _this.page,
                keyword: _this.keyword,
                pageSize: _this.pageSize,
                sort: _this.sort,
                order: _this.order,
                api_token: USER.api_token
            }

            _this.$store.state.loading = true;
            axios.get(API_URL + '/userLog', {params: params})
                .then(function(r) {
                    _this.$store.state.loading = false;
                    _this.tableData = r.data.data
                    _this.totalRow = r.data.total
                    _this.rowFrom = r.data.from
                    _this.rowTo = r.data.to
                })
                .catch(function(e) {
                    _this.$store.state.loading = false;
                    if (e.response.status == 500) {
                        _this.$message({
                            message: e.response.data.message + '\n' + e.response.data.file + ':' + e.response.data.line,
                            type: 'error'
                        });
                    }
                })
        }
    },
    mounted: function() {
        this.requestData();
    }
}
</script>

<style lang="css" scoped>
.el-form {
    text-align: right;
}
</style>
