<template>
    <v-layout row justify-center>
        <v-dialog v-model="dialog" persistent max-width="600px">

            <v-card>
                <v-card-title>
                    <span class="headline">Tambah Data Paket</span>
                </v-card-title>

                <v-card-text>
                    <v-layout row wrap>
                        <v-flex xs12 pa-1>
                            <v-text-field label="Nama Paket" v-model="packet_name"></v-text-field>
                        </v-flex>

                        <v-flex xs6 pa-1>
                            <v-select :items="types" v-model="packet_type" label="Tipe" item-value="code" item-text="label" :disabled="state_edit"></v-select>
                        </v-flex>

                        <v-flex xs6 pl-3 pa-1>
                            <v-select :items="is_notas" v-model="packet_is_nota" label="Cetak Nota" item-value="code" item-text="label"></v-select>
                        </v-flex>

                        <v-flex xs12 pa-1>

                            <v-autocomplete label="Perusahaan" 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 Company"
                                hide-details v-show="!state_edit">
                                <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-text-field label="Perusahaan" v-model="curr_company_name" disabled v-show="state_edit"></v-text-field>

                        </v-flex>

                        <v-flex xs12 pt-3 pa-1>
                            <v-select :items="mous" item-text="M_MouName" item-value="M_MouID" return-object v-model="selected_mou" label="MOU" hide-details
                                v-show="!state_edit">
                            </v-select>

                            <v-text-field label="MOU" v-model="curr_mou_name" disabled v-show="state_edit"></v-text-field>
                        </v-flex>


                    </v-layout>
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="red" dark flat @click="dialog=false">Tutup</v-btn>
                    <v-btn color="primary" :disabled="in_saving" dark @click="save">Simpan</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
    module.exports = {
        data() {
            return {
                packet_name: "",
                packet_type: "",
                packet_is_nota: "N",
                types: [{
                    "code": "PR",
                    "label": "Profile"
                }, {
                    "code": "PN",
                    "label": "Panel"
                }],
                is_notas: [{
                    "code": "Y",
                    "label": "Ya"
                }, {
                    "code": "N",
                    "label": "Tidak"
                }],
                is_loading: false
            }
        },

        computed: {
            dialog: {
                get() {
                    return this.$store.state.packet_new.dialog_packet
                },
                set(v) {
                    this.$store.commit('packet_new/update_dialog_packet', v)
                }
            },

            query_company: {
                get() {
                    return this.$store.state.packet_new.query_company
                },
                set(v) {
                    this.$store.commit('packet_new/update_query_company', v)
                }
            },

            search_mou: {
                get() {
                    return this.$store.state.packet_new.search_mou
                },
                set(v) {
                    this.$store.commit('packet_new/update_search_mou', v)
                }
            },

            companies: {
                get() {
                    return this.$store.state.packet_new.companies
                },
                set(v) {
                    this.$store.commit('packet_new/update_companies', v)
                }
            },

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

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

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

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

            state_edit() {
                return this.$store.state.packet_new.state_edit
            },

            curr_mou_name() {
                if (this.$store.state.packet.selected_mou)
                    return this.$store.state.packet.selected_mou.M_MouName
                return ""
            },

            curr_company_name() {
                if (this.$store.state.packet.selected_company)
                    return this.$store.state.packet.selected_company.M_CompanyName
                return ""
            },
            in_saving: {
                get() {
                    return this.$store.state.packet_new.in_saving
                },
                set(val) {
                    this.$store.commit("packet_new/update_in_saving", val)
                }
            },
        },

        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.packet_new.search_status == 1) return
                console.log("5-val:" + val)
                this.$store.commit("packet_new/update_query_company", val)
                this.thr_search()
            },

            dialog(val, old) {
                if (val && !old) {
                    let sc = this.$store.state.packet.selected_company
                    let sm = this.$store.state.packet.selected_mou
                    this.packet_name = ""
                    this.packet_type = ""
                    this.query_company = ""
                    // this.selected_company = {}
                    this.selected_company = sc
                    this.$store.commit('packet_new/update_companies', {
                        records: [sc],
                        total: 1
                    })
                    this.$store.commit('packet_new/update_selected_mou', sm)
                }

                let se = this.$store.state.packet_new.state_edit
                if (se) {
                    let sp = this.$store.state.packet.selected_packet
                    this.packet_name = sp.T_PacketName
                    this.packet_is_nota = sp.T_PacketIsNota
                    this.packet_type = sp.T_PacketType
                }
            }
        },

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

            }, 700),

            async save() {
                if (this.in_saving) return;
                this.in_saving = true;
                let se = this.$store.state.packet_new.state_edit
                if (!se) {
                    this.$store.dispatch('packet_new/save', {
                        packet_name: this.packet_name,
                        packet_type: this.packet_type,
                        packet_is_nota: this.packet_is_nota,
                        packet_company: this.$store.state.packet_new.selected_company.M_CompanyID,
                        packet_mou: this.$store.state.packet_new.selected_mou.M_MouID
                    })
                } else {
                    this.$store.dispatch('packet_new/save', {
                        packet_name: this.packet_name,
                        packet_is_nota: this.packet_is_nota,
                        packet_id: this.$store.state.packet.selected_packet.T_PacketID,
                        edit: true
                    })
                }

            }
        }
    }
</script>