<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" :default-object="{type:'',sender_id:'',status: '',start_date: '',end_date: ''}" :default-filter="false">
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.sender_id">
                                <option value="">Search By Sender ID</option>
                                <template v-for="(eachData, index) in requiredData.SenderId">
                                    <option :value="eachData.id">{{ eachData.title }}</option>
                                </template>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.type" name="type">
                                <option value="">Search By Type</option>
                                <option value="1">Quick SMS</option>
                                <option value="3">Group SMS</option>
                                <option value="2">Campaign SMS</option>
                                <option value="4">File to SMS</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.status">
                                <option value="">Search By Status</option>
                                <option value="waiting">Waiting</option>
                                <option value="failed">Failed</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.start_date" input_class="form-control" validate="required" placeholder="Start Date"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.end_date" input_class="form-control" validate="required" placeholder="End Date"></datepicker>
                        </div>
                    </template>
                    <template v-slot:page_top>
                        <page-top topPageTitle="Schedule SMS List" :default-add-button="false" :default-object="{}">
                        </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.sender_id,'title')}}</td>
                            <td>
                                <span v-if="data.type === 1">Quick sms</span>
                                <span v-if="data.type === 2">Campaign sms</span>
                                <span v-if="data.type === 3">Group sms</span>
                                <span v-if="data.type === 4">File To sms</span>
                            </td>
                            <td>{{showData(data.numbers,'phone')}}</td>
                            <td>{{showData(data.message,'body')}}</td>
                            <td>{{showData(data,'rate')}}</td>
                            <td>{{showData(data.message,'ip_address')}}</td>
                            <td>{{showData(data,'date')}}</td>
                            <td>{{showData(data,'time')}}</td>
                            <td>
                                <template v-if="parseInt(data.status) === 0">
                                    <span class="badge badge-soft-success">Waiting</span>
                                </template>
                                <template v-else-if="parseInt(data.status) === 1">
                                    <span class="badge badge-soft-success">Processed</span>
                                </template>
                            </td>
                            <td>
                                <template v-if="parseInt(data.status) !== 1">
                                    <div class="hstack gap-3 fs-15">
                                        <a class="btn btn-outline-info"><i class="fa fa-rotate-right"></i> Send Again</a>
                                    </div>
                                </template>
                            </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";
export default {
    name:"scheduleSmsList",
    components: {DataTable,Pagination,PageTop},
    data() {
        return {
            tableHeading: ['Sl', 'Sender ID','SMS Type', 'Number', 'Message', 'Per SMS', 'Login IP', 'Sending Date','Sending Time', 'Status', 'Action'],
            formModalId: 'formModal',
        }
    },
    mounted() {
        this.getDataList();
        this.getGeneralData(['SenderId']);
    }
}
</script>
<style scoped>

</style>
