<template :key="$route.meta.name">
    <div class="main_component">
        <div class="row">
            <div class="col">
                <data-table :table-heading="tableHeading" :defaultFilter="false" table-title="Ticket">
                    <template v-slot:page_top>
                        <page-top topPageTitle="Ticket"  page-modal-title="Ticket Add/Edit" :default-object="{category_id:''}"></page-top>
                    </template>
                    <template v-slot:filter>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.date_from" name="date_from" input_class="form-control" validate="required" placeholder="date_from"></datepicker>
                        </div>
                        <div class="col-md-2">
                            <datepicker v-model="formFilter.date_to" name="date_to" input_class="form-control" validate="required" placeholder="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>{{showData(data,'title')}}</td>
                            <td>{{showData(data.users,'name')}}</td>
                            <td>{{showData(data,'ticket_id')}}</td>
                            <td>{{ data.created_at }}</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/ticket_details/'+data.id" title="Edit"><i class="fa fa-eye" aria-hidden="true"></i></router-link>
                            </div>
                            </td>
                        </tr>
                    </template>
                </data-table>
            </div>
        </div>
        <formModal modalSize="modal-lg" @submit="submitForm(formObject,'formModal')">
            <div class="row">
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-12 mb-2">
                            <input type="text" v-validate="'required'" v-model="formObject.title" name="title" placeholder="Title" class="form-control">
                        </div>
                        <div class="col-md-12 mb-2">
                            <select v-model="formObject.category_id" v-validate="'required'" name="category_id" class="form-control">
                                <option value="">Ticket Category</option>
                                <template v-for="(data, index) in requiredData.TicketCategory">
                                    <option :value="data.id">{{data.category}}</option>
                                </template>
                            </select>
                        </div>
                        <div class="col-md-12 mb-2">
                            <input type="text" v-validate="'required'" v-model="formObject.phone" name="phone" placeholder="Mobile Number" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-2">
                        <div @click="clickImageInput('files')" class="mb-2">
                            <div class="form-group image_upload"
                                 :style="{backgroundImage: 'url(' + getImage(null, 'images/upload.png') + ')',}">
                                <img v-if="formObject.files" :src="getImage(formObject.files)"/>
                                <input name="thumbnail" :v-validate="formType === 1 ? 'required' : 'sometimes'" style="display: none" id="files" type="file" @change="UploadImage($event, formObject, 'files')"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="mb-2 col-md-12">
                    <label class="col-form-label">Message :</label>
                    <editor v-model="formObject.message" name="message" v-validate="'required'" api-key="no-api-key" :init="tinyMCESetup" />
                </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";
    import Editor from '@tinymce/tinymce-vue';
    export default {
        name: "ticket",
        components: {PageTop, Pagination, DataTable, formModal,Editor},
        data() {
            return {
                tableHeading: ['Sl','Title','User Name','Ticket ID','Date','Status','Action'],
                formModalId : 'formModal',
            }
        },
        mounted(){
            const _this = this;
            _this.$set(_this.formFilter, 'date_from', '');
            _this.$set(_this.formFilter, 'date_to', '');
            _this.getGeneralData(['TicketCategory']);
            _this.getDataList();
        }
    }
</script>

<style scoped>

</style>
