<template>
    <v-layout class="fill-height" column>

        <v-card class="mb-2 pa-2 searchbox">
            <v-layout row>
                <v-flex xs12>
                    <v-text-field class="xs6 ma-1" label="" placeholder="Pencarian" single-line outline v-model="query_mou" hide-details @keyup.native="keySearch"></v-text-field>


                </v-flex>
                <v-flex xs12>
                    <v-autocomplete label="Kelompok Pelanggan" v-model="selected_company" :items="companies" :search-input.sync="query_company"
                        auto-select-first no-filter return-object clearable item-text="M_CompanyName" :loading="is_loading" no-data-text="Pilih Kel. Pelanggan"
                        hide-details outline class="ma-1">
                        <template slot="item" slot-scope="{ item }">
                            <v-list-tile-content>
                                <v-list-tile-title v-text="item.M_CompanyName"></v-list-tile-title>
                                <!-- <v-list-tile-sub-title v-text="'aaa'"></v-list-tile-sub-title> -->
                            </v-list-tile-content>
                        </template>

                    </v-autocomplete>

                    <!-- <v-autocomplete
                 class="xs6 ma-1" :items="companies" 
                  item-text="M_CompanyName"
                  item-value="M_CompanyID"
                  return-object
                  v-model="selected_company"
                  label="Company" outline   hide-details
                  @change="search_mou"></v-autocomplete> -->
                    <!-- <v-select class="xs6 ma-1" :items="companies" 
                  item-text="M_CompanyName"
                  item-value="M_CompanyID"
                  return-object
                  v-model="selected_company"
                  label="Company" outline   hide-details
                  @change="search_mou"></v-select> -->
                </v-flex>
                <v-flex xs3 pr-0 pa-1>
                    <v-btn color="success" class="ma-0 one-btn-icon" fill-height @click="search_mou">
                        <span class="icon-search"></span>
                    </v-btn>
                </v-flex>
                <!-- <v-btn class="xs3 ma-1" color="success"  @click="search_mou" >Search</v-btn> -->

                <!-- <v-btn class="xs3 ma-1" color="info"  @click="set" >Baru</v-btn> -->
            </v-layout>
        </v-card>
        <v-card>
            <v-layout row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="mous" :loading="isLoading" :pagination.sync="pagination" class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_MouName }}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_MouStartDate }}</td>
                            <td class="text-xs-center pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_MouEndDate }}</td>
                            <!-- <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.status}}</td> -->
                        </template>
                        <template>
                            <div class="text-xs-center">
                                <v-pagination :length="15" :total-visible="7"></v-pagination>
                            </div>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
        </v-card>
        <one-dialog-info :status="opendialoginfo" :msg="msginfo" @close-dialog-info="opendialoginfo = false"></one-dialog-info>
    </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .searchbox .v-btn {
        min-height: 60px;
    }

    table.v-table tbody td,
    table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }

    .one-btn-icon {
        font-size: 1.5em
    }
</style>

<script>
    module.exports = {
        components: {
            'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue')
        },

        mounted() {

            this.$store.dispatch("price/search_company")
            this.$store.dispatch("price_copy/getjpagroups")

            var url_string = window.location.href
            var url = new URL(url_string);
            var id = url.searchParams.get("id");
            if (id) {
                this.$store.dispatch('price/search_single_company', id)
            }
        },

        methods: {

            isSelected(p) {
                let x = this.$store.state.price.selected_mou
                for (let i in x)
                    if (p.M_MouID == x.M_MouID)
                        return true
                return false
            },

            search_mou() {
                this.$store.dispatch("price/search_mou")
            },

            selectMe(doc) {
                this.$store.commit('price/update_selected_mou', doc)
                this.$store.dispatch('price/search_price')
            },

            keySearch(e) {
                if (e.which == 13) {
                    this.search_mou()
                }
            },

            thr_search: _.debounce(function () {
                this.$store.dispatch("price/search_company")

            }, 700)
        },

        computed: {
            opendialoginfo: {
                get() {
                    return this.$store.state.price_copy.open_dialog_info
                },
                set(val) {
                    this.$store.commit("price_copy/update_open_dialog_info", val)
                }
            },
            msginfo() {
                return this.$store.state.price_copy.msg_info
            },
            companies: {
                get() {
                    return this.$store.state.price.companies
                },
                set(v) {
                    this.$store.commit('price/update_companies', v)
                }
            },

            mous: {
                get() {
                    return this.$store.state.price.mous
                },
                set(v) {
                    this.$store.commit('price/update_mous', v)
                }
            },

            selected_company: {
                get() {
                    return this.$store.state.price.selected_company
                },
                set(v) {
                    this.$store.commit('price/update_selected_company', v)
                    this.$store.dispatch('price/search_mou')
                }
            },

            selected_mou: {
                get() {
                    return this.$store.state.price.selected_mou
                },
                set(v) {
                    this.$store.commit('price/update_selected_mou', v)
                }
            },

            query_mou: {
                get() {
                    return this.$store.state.price.query_mou
                },
                set(v) {
                    this.$store.commit('price/update_query_mou', v)
                }
            },

            isLoading() {
                return false
            },

            is_loading() {
                return false
            },

            query_company: {
                get() {
                    return this.$store.state.price.query_company
                },
                set(v) {
                    this.$store.commit('price/update_query_company', v)
                }
            }
        },
        data() {
            return {
                headers: [{
                        text: "NAMA",
                        align: "left",
                        sortable: false,
                        value: "mr",
                        width: "25%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "START DATE",
                        align: "center",
                        sortable: false,
                        value: "lab",
                        width: "10%",
                        class: "pa-2 blue lighten-3 white--text"
                    },
                    {
                        text: "END DATE",
                        align: "center",
                        sortable: false,
                        value: "name",
                        width: "10%",
                        class: "pa-2 blue lighten-3 white--text"
                    }
                ],

                pagination: {
                    descending: false,
                    page: 1,
                    rowsPerPage: 5,
                    sortBy: 'M_MouName',
                    totalItems: this.$store.state.price.total_mous
                }
            };
        },

        watch: {
            query_company(val, old) {

                if (val == null || typeof val == 'undefined') val = ""
                // console.log("1-val:"+val)
                if (val == old) return
                // console.log("2-val:"+val)
                // if (! val) return
                // console.log("3-val:"+val)
                // if (val.length < 1 ) return
                // console.log("4-val:"+val)
                if (this.$store.state.price.search_status == 1) return
                // console.log("5-val:"+val)
                this.$store.commit("price/update_query_company", val)
                this.thr_search()
            }
        }
    }
</script>