<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" table-title="Student List">
                    <template v-slot:page_top>
                        <page-top topPageTitle="Module List" page-modal-title="Module Add/Edit" :default-object="{operator_id:''}"></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.operator, 'name')}}</td>
                            <td>{{data.number}}</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" @click="editData(data, data.id)"><i class="fa fa-edit"></i></a>
                                    <a class="link-danger"  @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">Operator:</label>
                <select v-model="formObject.operator_id" v-validate="'required'" name="display_name" class="form-control">
                    <option value="">Select</option>
                    <template v-for="(operator, index) in requiredData.operators">
                        <option :value="operator.id">{{operator.name}}</option>
                    </template>
                </select>
            </div>
            <div class="mb-2">
                <label class="col-form-label">Number:</label>
                <input type="text" v-model="formObject.number" v-validate="'required'" name="name" 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: "operatorNumber",
        components: {PageTop, Pagination, DataTable, formModal},
        data() {
            return {
                tableHeading: ['Sl','Operator','Number','Status', 'Action'],
                formModalId : 'formModal',
            }
        },
        mounted(){
            this.getDataList();
            this.getGeneralData(['operators']);
        }
    }
</script>

<style scoped>

</style>
