<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :defaultObject="{user_id:''}" :table-heading="tableHeading" table-title="Ticket Category">
                    <template v-slot:page_top>
                        <page-top :defaultObject="{user_id:''}" topPageTitle="Ticket Category"  page-modal-title="Category Add/Edit"></page-top>
                    </template>
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.user_id">
                                <option value="">Select</option>
                                <option v-for="(user, uIndex) in requiredData.users" :value="user.id">{{user.name}}</option>
                            </select>
                        </div>
                    </template>
                    <template v-slot:data>
                        <tr v-for="(data, index) in dataList.data">
                            <td class="fw-medium">{{parseInt(dataList.from)+index}}</td>
                            <td>{{showData(data.user,'name')}}</td>
                            <td>{{showData(data,'name')}}</td>
                            <td>{{showData(data,'key')}}</td>
                            <td>
                                <a @click="changeStatus(data)" v-html="showStatus(data.status)"></a>
                            </td>
                            <td>
                            <div class="hstack gap-3 fs-15">
                                <a class="link-primary" v-if="can('ticket_category_update')"  @click="editData(data, data.id)"><i class="fa fa-edit"></i></a>
                                <a class="link-danger" v-if="can('ticket_category_delete')"  @click="deleteInformation(index, data.id)"><i class="fa fa-trash"></i></a>
                            </div>
                            </td>
                        </tr>
                    </template>
                </data-table>
            </div>
        </div>
        <formModal modalSize="modal-xs" @submit="submitForm(formObject,'formModal')">
            <div class="mb-2">
                <label class="col-form-label">Users:</label>
                <select class="form-control" v-model="formObject.user_id">
                    <option value="">Select</option>
                    <option v-for="(user, uIndex) in requiredData.users" :value="user.id">{{user.name}}</option>
                </select>
            </div>
            <div class="mb-2">
                <label class="col-form-label">Masking Name:</label>
                <input type="text" v-model="formObject.name" v-validate="'required'" name="category" class="form-control">
            </div>
            <div class="mb-2">
                <label class="col-form-label">Key:</label>
                <input type="text" v-model="formObject.key" v-validate="'required'" name="category" class="form-control">
            </div>
        </formModal>
    </div>
</template>

<script>
    import DataTable from "../../components/dataTable";
    import Pagination from "../../plugins/pagination/pagination";
    import PageTop from "../../components/pageTop";
    import formModal from "../../components/formModal";
    export default {
        name: "maskingName",
        components: {PageTop, Pagination, DataTable, formModal},
        data() {
            return {
                tableHeading: ['Sl','User', 'Name','key','Status','Action'],
                formModalId : 'formModal',
            }
        },
        mounted(){
            this.getDataList();
            this.getGeneralData(['users']);
        }
    }
</script>

<style scoped>

</style>
