<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" :defaultFilter="false" table-title="Notification List">
                    <template v-slot:page_top>
                        <page-top topPageTitle="Notification" :defaultAddButton="false"></page-top>
                    </template>
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.date_from" input_class="form-control" validate="required" name="date_from" placeholder="date_from"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.date_to" input_class="form-control" validate="required" placeholder="date_to" name="date_to"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <input v-model="formFilter.keyword" name="keyword" class="form-control form-control-sm" placeholder="Search by title">
                        </div>
                    </template>
                    <template v-slot:data>
                        <tr v-for="(data, index) in dataList.data">
                            <td class="fw-medium">{{parseInt(dataList.from)+index}}</td>
                            <td>{{data.title}}</td>
                            <td>{{data.notification}}</td>
                            <td>{{data.created_at}}</td>
                            <td>
                            <div class="hstack gap-3 fs-15">
                                <button class="btn btn-sm btn-success" @click="notificationDetails(data)"><i class="fa fa-eye"></i></button>
                            </div>
                            </td>
                        </tr>
                    </template>
                </data-table>
            </div>
        </div>
        <formModal modalSize="modal-md" :isEnablePrintSubmit="false" @submit="submitForm(formObject,'formModal')">
            <div class="row">
                <div class="col-4">
                    <strong>Title</strong>
                </div>
                <div class="col-8">
                    {{Details.title}}
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <strong>Notification</strong>
                </div>
                <div class="col-8">
                    {{Details.notification}}
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <strong>Date</strong>
                </div>
                <div class="col-8">
                    {{Details.created_at}}
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <strong>Link</strong>
                </div>
                <div class="col-8 mt-2">
                    <button type="button" @click="goToLink(Details.link)" class="btn sm btn btn-success">Go to Link</button>
                </div>
            </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: "notificationList",
        components: {PageTop, Pagination, DataTable, formModal},
        data() {
            return {
                tableHeading: ['Sl', 'Title','Notification','Date','Action'],
                formModalId : 'formModal',
                Details:{},
            }
        },
        methods: {
            notificationDetails(data){
                const _this = this;
                _this.Details = data;
                _this.openModal('formModal')

            },
            goToLink(link){
                const _this = this;
                _this.closeModal('formModal');
                _this.$router.push({path:link});

            }
        },
        mounted(){
            const _this = this;
            _this.$set(_this.formFilter, 'date_from', '');
            _this.$set(_this.formFilter, 'date_to', '');
            _this.getDataList();
        }
    }
</script>

<style scoped>

</style>
