<template>
    <theme-table :permisName="'User Role Create'" :route="'RoleCreate'" @input="Searching">
        <span slot="main-title">
            {{ $t('Role') }}
        </span>

        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-borderless table-striped">
                    <thead>
                        <tr class="border-top border-bottom">
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t('Name') }}</th>
                            <th>{{ $t('Created At') }}</th>
                            <th>{{ $t('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody :class="roledata.length == 0 && isLoading == false ? 'no-data' : ''">
                        <tr v-for="(role, index) in roledata" :key="index">
                            <td>{{ index + 1 }}</td>
                            <td>{{ role.name }}</td>
                            <td>{{ role.created_at }}</td>
                            <td>
                                <router-link :to="{name:'RoleCreate',params:{id:role.id}}" :title="$t('Edit')" @click="editRole(role.id)" class="btn btn-dark s-btn-xs"><i class="fa-solid fa-pen-to-square fa-sm"></i></router-link>
                                <button v-show="role.id != 1" type="button" :title="$t('Delete')" @click="funDelete(role.id)" class="btn btn-danger s-btn-xs">
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </theme-table>
</template>
<script>

    import ThemeTable from "../../../components/ThemeTable.vue";
    export default {
        components: {

            ThemeTable,
        },
        data() {
            return {
                isLoading: false,
                roledata: [],
                params: {
                    searching: "",
                },
            };
        },
        mounted() {
            this.getAllRole();
        },
        methods: {
            getAllRole() {
                axios
                    .get("system/roles", {
                        params: this.params,
                    })
                    .then((res) => {
                        if (res.data == this.noPermission) {
                            this.$router.push({ name: "noPermission" });
                        }
                        this.roledata = res.data;
                    });
            },
            funDelete(id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            axios
                                .delete("system/roles/" + id)
                                .then((res) => {
                                    if (res.data.status == 1) {
                                        this.getAllRole();
                                        this.$toast.success(res.data.message);
                                    } else {
                                        this.$toast.warning(res.data.message);
                                    }
                                })
                                .catch((error) => {
                                    console.log(error);
                                });
                        }
                    },
                });
            },
            Searching: function (e) {
                this.params.searching = e.target.value;
                this.getAllRole();
            },
        },
    };
</script>
<style scoped>
    .user-role {
        background: #f5f5ff;
        padding: 15px;
        margin-bottom: 15px;
    }

    table.user-roles tr td {
        vertical-align: top !important;
        background: rgb(233, 236, 239);
    }

    label {
        vertical-align: top;
        padding-top: 7px;
        padding-left: 5px;
    }
</style>
