<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" table-title="Ticket Category">
                    <template v-slot:page_top>
                        <page-top topPageTitle="Ticket Category"  page-modal-title="Category Add/Edit"></page-top>
                    </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,'category')}}</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">Category:</label>
                <input type="text" v-model="formObject.category" 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: "ticket_category",
        components: {PageTop, Pagination, DataTable, formModal},
        data() {
            return {
                tableHeading: ['Sl','Ticket Category','Status','Action'],
                formModalId : 'formModal',
            }
        },
        mounted(){
            this.getDataList();
        }
    }
</script>

<style scoped>

</style>
