<template>
    <theme-table :permisName="'User Create'" :route="'UserCreate'" @input="Searching">
        <span slot="main-title">
            {{ $t('User') }}
        </span>
        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-bordered">
                    <thead class="text-nowrap fixed_table">
                        <tr>
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t("Code") }}</th>
                            <th>{{ $t("Name") }}</th>
                            <!-- <th>{{ $t("Nickname") }}</th> -->
                            <th>{{ $t("Gender") }}</th>
                            <!-- <th>{{ $t("Date of Birth") }}</th> -->
                            <th>{{ $t("Contact Number") }}</th>
                            <th>{{ $t("User Or Email") }}</th>
                            <th>{{ $t("Role") }}</th>
                            <th>{{ $t("Type") }}</th>
                            <th>{{ $t("Status") }}</th>
                            <th>{{ $t("Branch") }}</th>
                            <th v-show="user_branch != -1">{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(user, index) in userData.data" :key="index">
                            <td> {{ index + 1 }} </td>
                            <td>{{ user.code }}</td>
                            <td>{{ user.name }}</td>
                            <!-- <td>{{ user.nickname }}</td> -->
                            <td>
                                <active-status :gender="user.gender"></active-status>
                            </td>
                            <!-- <td>{{ user.dob }}</td> -->
                            <td>{{ user.contact_number }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.role }}</td>
                            <td>
                                <active-status :type="user.type"></active-status>
                            </td>
                            <td>
                                <span v-show="user.status == 1">
                                    <active-status :status="user.status"></active-status>
                                </span>
                                <span v-show="user.status ==  2">
                                    <active-status :status="user.status"></active-status>
                                </span>
                            </td>
                            <td>{{ user.branch_name }}</td>
                            <td v-show="user_branch != -1">
                                <router-link v-if="$can('User Edit')" :to="{name:'UserCreate',params:{id:user.id}}" :title="$t('Edit')" v-show="user.status == 1 " class="btn btn-dark  s-btn-xs">
                                    <i class="fa-solid fa-pen-to-square fa-sm"></i>
                                </router-link>

                                <button v-if="$can('User Delete')" type="button" :title="$t('Active')" @click="funActive(user.id)"
                                    v-show="user.status == 1 &&  user.user_id != 1" class="btn btn-tbsmall">
                                    <div>
                                        <i class="fa fa-toggle-on text-success"
                                            :title="$t('Active')"></i>
                                    </div>
                                </button>

                                <button v-if="$can('User Delete')" type="button" :title="$t('Inactive')"
                                    @click="funActive(user.id)" v-show="user.status == 2 && user.user_id != 1"
                                    class="btn btn-tbsmall">
                                    <div>
                                        <i class="fa fa-toggle-off text-danger"
                                            :title="$t('Inactive')"></i>
                                    </div>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </theme-table>
</template>

<script>
    import ActiveStatus from '../../../components/ActiveStatus.vue'
    import CumstomPagination from '../../../components/CustomPagination.vue'
    import ThemeTable from "../../../components/ThemeTable.vue"
    import axios from 'axios'
    export default {
        components: {
            ActiveStatus,
            CumstomPagination,
            ThemeTable
        },
        data() {
            return {
                userData: {},
                user_branch  : '',
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: '',
                    type: 1
                }
            }
        },
        created() {
            this.funGetData();
            this.funComUserBranch();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios.get('system/users', {
                    params: this.params
                }).then((res) => {
                    this.userData = 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();
            },
            funActive(id) {
                axios.get("system/active-action/" + id).then((res) => {
                    if (res.data.status == 1) {
                        this.funGetData();
                        this.$toast.success(res.data.message);
                    }
                    else if (res.data.status == 2) {
                        this.funGetData();
                        this.$toast.success(res.data.message);
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
        }
    }
</script>
