<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" table-title="Send Campaign SMS List" :default-filter="false" :default-object="{sender_id:'',status: '',start_date: '',end_date: ''}">
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <input type="text" class="form-control" v-model="formFilter.phone" placeholder="Search By Phone Number">
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.camping_id">
                                <option value="">All Campaign</option>
                                <template v-for="(eachData, index) in requiredData.CampaignData">
                                    <option :value="eachData.id">{{ eachData.campaign_name }}</option>
                                </template>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" v-model="formFilter.status">
                                <option value="">All Status</option>
                                <option value="pending">Pending</option>
                                <option value="delivered">Delivered</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="Send Campaign SMS List" :default-add-button="false"  page-modal-title="Quick SMS Add/Edit" :default-object="{}">
                            <router-link to="/admin/campaign_sms_add/form" class="btn btn-primary">
                                <i class="fa fa-plus"></i> Send SMS
                            </router-link>
                        </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.numbers,'phone')}}</td>
                            <td>{{showData(data.message,'body')}}</td>
                            <td>
                                <template v-if="data.sender !== null">
                                    <span v-if="parseInt(data.sender.sender_id_type) === 1">Masking</span>
                                    <span v-else-if="parseInt(data.sender.sender_id_type) === 2">Non Masking</span>
                                </template>
                            </td>
                            <td>{{smsCost(data)}}</td>
                            <td>{{showData(data,'created_at')}}</td>
<!--                            <td>{{showData(data,'time')}}</td>-->
                            <td>{{showData(data.message,'ip_address')}}</td>
<!--                            <td>-->
<!--                                <template v-if="parseInt(data.job_status) === 0">-->
<!--                                    <span class="badge badge-soft-warning">Pending</span>-->
<!--                                </template>-->
<!--                                <template v-else>-->
<!--                                    <span :title="data.status" v-if="parseInt(data.api_status) === 9000" class="badge badge-soft-success">Success</span>-->
<!--                                    <span :title="data.status" v-else class="badge badge-soft-danger">Failed</span>-->
<!--                                </template>-->
<!--                            </td>-->
                            <td>
                                <template v-if="parseInt(data.job_status) === 0">
                                    <span class="badge badge-soft-warning">Pending</span>
                                </template>
                                <template v-else>
                                    <span :title="data.status" v-if="parseInt(data.api_status) === 9000 && parseInt(data.mno_status) === 1000" class="badge badge-soft-success">Success</span>
                                    <span :title="data.status" v-else class="badge badge-soft-danger">Failed</span>
                                </template>
                            </td>
                            <td>
                                <template v-if="data.check_api_status === 'Delivered'">
                                    <span class="badge badge-soft-success">{{data.check_api_status}}</span>
                                </template>

                                <template v-if="data.check_api_status === 'UnDelivered'">
                                    <span class="badge badge-soft-danger">{{data.check_api_status}}</span>
                                </template>
                                <template v-if="data.check_api_status == null">
                                    <span class="badge badge-soft-warning">Pending</span>
                                </template>
                            </td>
                            <td class="action">
                                <action-component :message-data="data" :message-index="index"></action-component>
                            </td>
                        </tr>
                    </template>
                    <template v-slot:modal>
                        <message-details></message-details>
                        <check-message-details></check-message-details>
                    </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 ActionComponent from "../actionComponent";
    import MessageDetails from "../messageDetails";
    import CheckMessageDetails from "../checkMessageDetails.vue";
export default {
    name:"campaign_sms_list",
    components: {CheckMessageDetails, MessageDetails, ActionComponent, DataTable,Pagination,PageTop,formModal},
    data() {
            return {
                tableHeading: ['Sl', 'Number', 'Message','Type', 'Per SMS','Time', 'Login IP',  'Request Status','Deliver Status',  'Action'],
                formModalId : 'formModal',
            }
    },
    mounted(){
        this.getDataList();
        this.getGeneralData(['SenderId']);
        this.$set(this.formFilter,'camping_id','');
    }
}
</script>
<style scoped>

</style>
