<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" :default-filter="false">
                    <template v-slot:page_top>
                        <page-top topPageTitle="Sender ID List" :default-add-button="false" page-modal-title="Sender ID Add/Edit">
                            <router-link :to="`/admin/sender_id/create`" v-if="can('sender_id_add')" class="btn btn-primary"><i class="fa fa-plus"></i> Add New</router-link>
                        </page-top>
                    </template>
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <input type="text" class="form-control" placeholder="Search by Username" v-model="formFilter.username" name="search username">
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.user_id" name="user_id">
                                <option value="">All User</option>
                                <template v-for="(data, index) in requiredData.users">
                                    <option :value="data.id">{{data.name}}</option>
                                </template>
                            </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.users,'name')}}</td>
                            <td>{{data.title}}</td>
                            <td>
                                <span v-if="data.sender_id_type === 1">Masking</span>
                                <span v-else-if="data.sender_id_type === 2">Non Masking</span>
                            </td>
                            <td>{{showData(data.operator,'name')}}</td>
                            <td>{{data.sms_rates}}</td>
                            <td>{{data.username}}</td>
                            <td>{{data.billMsisdn}}</td>
                            <td>{{data.cli}} ({{data.masking_name}})</td>
                            <td>
                                <a @click="changeStatus(data)" v-html="showStatus(data.status)"></a>
                            </td>
                            <td>
                                <div class="hstack gap-3 fs-15">
                                    <router-link :to="`/admin/sender_id/create/${data.id}`" v-if="can('sender_id_update')" title="EDIT" class="link-primary"><i class="fa fa-edit"></i></router-link>
                                    <router-link :to="`/admin/sender_id/create/${data.id}?copy=yes`" v-if="can('sender_id_update')" title="Make Duplicate" class="link-primary" @click="cloneData(data, exceptClone)"><i class="fa fa-clone"></i></router-link>
                                    <a v-if="can('sender_id_delete') && data.type !== 0" title="DELETE" class="link-danger" @click="deleteInformation(index, data.id)"><i class="fa fa-trash"></i></a>
                                </div>
                            </td>
                        </tr>
                    </template>
                </data-table>
            </div>
        </div>
    </div>
</template>

<script>
    import DataTable from "../../../components/dataTable";
    import Pagination from "../../../plugins/pagination/pagination";
    import PageTop from "../../../components/pageTop";
    import formModal from "../../../components/formModal";
    import SenderRequestForm from "./SenderRequestForm";
    export default {
        name: "senderIdRequest",
        components: {SenderRequestForm, PageTop, Pagination, DataTable, formModal},
        data() {
            return {
                tableHeading: ['Sl','User','Sender iD', 'Sender Type','Operator','SMS Rate','Username','billMsisdn','CLI','Status','Action'],
                exceptClone : ['id','created_at','updated_at','operator','users','user_id'],
            }
        },
        methods:{
            setDefaultSenderID: function (data) {
                const _this = this;
                var url = `${_this.urlGenerate('api/default_sender_id')}/${data.id}`;
                _this.getData(url, "post", {}, {}, function (retData) {
                    _this.getDataList();
                });
            },
        },
        mounted(){
            this.$set(this.formFilter, 'user_id', '');
            this.$store.commit('modalTitle', 'Sender Add/Edit');
            this.getGeneralData(['users']);
            this.getDataList();
        }
    }
</script>

<style scoped>

</style>
