cmc_fe/\

<template>
    <h3>Complaints</h3>
    <v-tabs v-model="tab" >
        <v-tab title="List" v-model="list"></v-tab>
        <v-tab title="Edit" v-model="edit" v-if="edit"></v-tab>
        <v-tab title="Report" v-model="report" v-if="report" ></v-tab>
    </v-tabs>
        <v-window v-model="tab">
            <v-window-item v-model="list">
                <v-col cols="12" xs="12" sm="12" md="12" lg=8>
                    <v-text-field 
                                                 clearable
                                                 label="Search"
                                                 variant="outlined"
                                                 v-model="searchQuery"
                                                 density="compact"
                                                 append-inner-icon="mdi-magnify"></v-text-field>
                    <v-row justify="space-between">
                        <v-col cols=4>
                            <v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text" @click="showAddComplaint">Add</v-btn>
                        </v-col>
                        <v-col cols=3>
                            <v-btn align="end" variant="text" @click="showActive = !showActive">
                                Showing <span v-if="showActive">Active Only</span><span v-else>Inactive</span>
                            </v-btn>
                        </v-col>
                    </v-row>
                    <v-progress-linear indeterminate color="orange" :active="loading"></v-progress-linear>
                    <v-card variant="outlined">
                        <RecycleScroller class="scroller"
                                         :items="filteredComplaints"
                                         :item-size="100"
                                         v-slot="{ item }" 
                                         key-field="id">
                        <v-row dense class="item" :class="{ 'bg-red-lighten-4' : item.at_risk }">
                            <v-col cols="4">
                                Complaint : {{ item.id }}<br/>
                                <span class="text-caption">
                                    Complaint Date : {{ item.complaint_date }}<br/>
                                    Sales Order: {{ item.sop.doc_no }}<br/>
                                </span>
                            </v-col>
                            <v-col cols="4" class="text-body-2">
                                {{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
                                Reason : {{ item.reason }}<br/>
                                Driver : {{ item.driver.name }}
                            </v-col>
                            <v-col cols=4>
                                <div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
                                    <v-row>
                                        <v-icon icon="mdi-exclamation" v-if="item.at_risk" color="red" title="At Risk"></v-icon>
                                        <v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon>
                                    </v-row>
                                    <v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn>
                                    <v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
                                </div>
                            </v-col>
                        </v-row>
                        </RecycleScroller>
                    </v-card>
                </v-col>
            </v-window-item>
            <v-window-item value="edit">
                <ComplaintEdit ref="edit" :setcomplaint="selected_cmplaint" @closetab="tab = 'list'" @complaintupdate="complaintUpdated"></ComplaintEdit>
            </v-window-item>
        </v-window>
        <v-dialog v-model="showComplaintInfo">
            <ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" />
        </v-dialog>
</template>
<script>
import axios from 'axios'
import ComplaintInfo from '@/components/ComplaintInfo.vue'
export default {
    props: {
        site_info:{},
        user_info:{}
    },
    components: {
        ComplaintInfo
    },
    data() {
        return {
            tab: "list",
            list: [],
            listreceived: false,
            showActive: true,
            loading: true,
            limit: 300,
            searchQuery: "",
            edit: false,
            report: false,
            showComplaintInfo: false,
            selected_complaint: {}
        }
    },
    computed: {
        filteredComplaints() {
            let query = this.searchQuery.toLowerCase()
            if (!this.listreceived){
                this.getComplaintsList()
            }
            let clist = this.list.filter(q =>
                q.customer.name.toLowerCase().includes(query) ||
                q.customer.acc_no.includes(query) ||
                q.id == query ||
                q.reason.toLowerCase().includes(query)
            )
            if (this.showActive) {
                clist = clist.filter(q => 
                    q.active == true
                )
            }
            return clist
        }
    },
    methods: {
        getComplaintsList(){
            this.loading = true
            let url = this.$api_url + "/customers/complaints/list"
            let c_id = this.$route.params.id || ""
            console.log("Getting Contracts list..." + c_id)
            axios.get(url,{
                params: {
                    limit: this.limit,
                    query: this.searchQuery,
                    c_id: c_id
                }
            }).then(resp => {
                this.list = resp.data
                console.log(this.list)
                this.listreceived = true
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                this.loading = false
            })
        },
        showInfo(complaint) {
            this.showComplaintInfo = true
            this.selected_complaint = complaint
            complaint.info_loaded = false
        },
        doInfoReturn(code) {
            console.log(code)
        },
        showAddComplaint() {
            this.edit = true
            this.tab = "edit"
        }
    }
}
</script>
<style>
.scroller {
    height:600px;
}
.item {
    height: 100px;
    overflow-y:hidden;
    padding: 0 1em;
    margin-bottom:2px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
}
</style>