<template>
    <v-layout>
        <v-flex xs12>
            <v-card class="mb-2" color="white">
                <v-toolbar color="blue lighten-3" dark height="50px">
                    <v-toolbar-title>AGREEMENT [{{ xcompany.M_UserUsername }}]</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-btn @click="openFormMou(0)" icon>
                        <v-icon>library_add</v-icon>
                    </v-btn>
                </v-toolbar>
                <v-layout row style="background:#bbdefb;padding-top:5px;" justify-left>
                    <v-list-tile>
                        <input type="text" v-model="xsearch" class="textinput" label="Nama Station"
                            placeholder="Cari ..." />
                        </v-list-tile-content>
                    </v-list-tile>
                </v-layout>
                <v-divider></v-divider>
                <v-layout row wrap class="scroll-container" style="max-height:600px;overflow: auto;">
                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                        <v-data-table :headers="headers" :items="mous" :loading="isLoading" hide-actions
                            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 }}
                                    <span v-if="props.item.M_UserMouIsDefault === 'Y'">
                                        <!-- <v-chip outline color="primary">Default</v-chip> -->
                                        <v-icon color="green">check_circle</v-icon>
                                    </span>
                                </td>
                                <td class="text-xs-left pa-2"
                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                    @click="selectMe(props.item)">
                                    {{ props.item.M_UserMouAliasName }}
                                </td>
                                <td class="text-xs-left pa-2"
                                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                    @click="selectMe(props.item)">
                                    <v-icon small class="ml-3" color="primary"
                                        @click="editFormMou(props.item)">edit</v-icon>
                                    <v-icon small class="ml-3" color="error"
                                        @click="deleteFormMou(props.item)">clear</v-icon>
                                </td>
                            </template>
                        </v-data-table>
                    </v-flex>
                </v-layout>
                <v-divider></v-divider>
                <v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page"
                    :length="xtotal_page"></v-pagination>

                <template>
                    <v-layout row justify-center>
                        <v-dialog v-model="dialogmou" persistent max-width="850px">
                            <v-card>
                                <v-card-title>
                                    <span class="headline">FORM AGREEMENT {{ this.$store.state.mou.selected_mou.M_MouName }} </span>
                                </v-card-title>
                                <v-card-text class="pt-0 pb-0">
                                    <v-form ref="formcompanymou" v-model="validmou" lazy-validation>
                                        <v-layout wrap>
                                            <v-flex xs12>
                                                <v-flex xs12>
                                                    <v-autocomplete v-if="xact === 'new'"  label="Agreement*" v-model="vmou"
                                                        :items="xmoussearch" :search-input.sync="search_mou"
                                                        auto-select-first no-filter item-text="M_MouName" return-object
                                                        no-data-text="Cari Agreement" small :rules="mouRules" required>
                                                        <template slot="item" slot-scope="{ item }">
                                                            <v-list-tile-content>
                                                                <v-list-tile-title
                                                                    v-text="item.M_MouName"></v-list-tile-title>
                                                            </v-list-tile-content>
                                                        </template>
                                                    </v-autocomplete>
                                                </v-flex>
                                            </v-flex>
                                            <v-flex xs12>
                                                <v-text-field v-model="xname" label="Agreement Alias*"
                                                    :rules="xnameRules" required></v-text-field>
                                            </v-flex>
                                            <v-flex xs12>
                                                <v-checkbox v-if="xact === 'edit'" v-model="isdefault" label="IsDefault"></v-checkbox>
                                            </v-flex>
                                            <v-flex>
                                                <p v-for="(xerror, idx) in xerrors" class="error pl-2 pr-2"
                                                    style="color:#fff">{{ xerror.msg }}</p>
                                            </v-flex>
                                        </v-layout>
                                </v-card-text>
                                <v-card-actions>
                                    <v-spacer></v-spacer>
                                    <v-btn color="blue darken-1" flat @click="updateDialogFormMou()">Tutup</v-btn>
                                    <v-btn v-if="xact === 'new'" color="blue darken-1" flat
                                        @click="saveFormMou()">Simpan</v-btn>
                                    <v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormMou()">Simpan
                                        Perubahan</v-btn>
                                </v-card-actions>
                                </v-form>
                            </v-card>
                        </v-dialog>
                    </v-layout>
                </template>

            </v-card>
        </v-flex>

        <one-dialog-print :title="printtitle" :width="printwidth" :height="500" :status="openprint" :urlprint="urlprint"
            @close-dialog-print="closePrint"></one-dialog-print>
        <template>

            <v-dialog v-model="dialogdeletealertmou" max-width="30%">
                <v-card>
                    <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                        Peringatan !
                    </v-card-title>
                    <v-card-text class="pt-2 pb-2">
                        <v-layout row>
                            <v-flex xs12 d-flex>
                                <v-layout row>
                                    <v-flex pb-1 xs12>
                                        <v-layout row>
                                            <v-flex pt-2 pr-2 xs12>
                                                {{ msgalertmou }}
                                            </v-flex>
                                        </v-layout>
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-card-text>
                    <v-divider></v-divider>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary" flat @click="dialogdeletealertmou = false">
                            Tutup
                        </v-btn>
                        <v-btn color="primary" flat @click="closeDeleteAlertMou()">
                            Yakin lah
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

        </template>

    </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;
}

.textinput {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid #607d8b;

}

.textinput:focus {
    width: 100%;
}

.textinput:focus::-webkit-input-placeholder {
    color: transparent;
}

.textinput:focus::-moz-placeholder {
    color: transparent;
}

.textinput:-moz-placeholder {
    color: transparent;
}

.boxoutline {
    color: red;
    border: 1px solid red;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
}

.boxoutline:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    font-size: 15px;
    font-weight: 700;
}

.boxsolid {
    color: #ffffff;
    border: 1px solid #ffffff;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #f44336;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
}

.boxsolid:hover {
    background: #f44336de;
    font-size: 15px;
    font-weight: 700;
}

.scroll-container {
    scroll-padding: 50px 0 0 50px;
}

::-webkit-scrollbar {
    width: 7px;
}

/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
    background-color: #73baf3;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
    background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
    background-color: #0079da;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
    background-color: black;
}

/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
module.exports = {
    components: {
        'one-date-picker': httpVueLoader('../../../common/oneDatePicker.vue'),
        'one-dialog-print': httpVueLoader('../../../common/oneDialogPrintX.vue')
    },
    data() {
        return {
            query: "",
            items: [],
            openprint: false,
            urlprint: '',
            printtitle: '',
            printwidth: 600,
            formatreport: 'pdf',
            readonlydefault: true,
            page: 1,
            xphone: '',
            xcode: '',
            xaddress: '',
            xipaddress: '',
            xbasename: '',
            isdefault: false,
            search_company: '',
            search_mou: '',
            search_city: '',
            search_district: '',
            search_kelurahan: '',
            mouRules: [
                v => !!v || 'Agreement harus dipilih'
            ],
            xnameRules: [
                v => !!v || 'Nama harus diisi'
            ],
            xcodeRules: [
                v => !!v || 'Kode harus diisi'
            ],
            addressRules: [
                v => !!v || 'Alamat harus diisi'
            ],
            xipaddressRules: [
                v => !!v || 'Alamat IP harus diisi'
            ],
            companyRules: [
                v => !!v || 'Company harus dipilih'
            ],
            cityRules: [
                v => !!v || 'Kota harus dipilih'
            ],
            districtRules: [
                v => !!v || 'Kecamatan harus dipilih'
            ],
            kelurahanRules: [
                v => !!v || 'Kelurahan harus dipilih'
            ],
            headers: [{
                text: "AGREEMENT",
                align: "left",
                sortable: false,
                value: "name",
                width: "40%",
                class: "blue lighten-3 white--text"
            },
            {
                text: "AGREEMENT (ALIAS)",
                align: "left",
                sortable: false,
                value: "name",
                width: "40%",
                class: "blue lighten-3 white--text"
            },
            {
                text: "AKSI",
                align: "left",
                sortable: false,
                value: "status",
                width: "20%",
                class: "blue lighten-3 white--text"
            }
            ],
            pagination: {
                descending: false,
                page: 1,
                rowsPerPage: 100,
                sortBy: 'T_MouName ASC',
                totalItems: this.$store.state.mou.total_transactions
            },
            statuss: [{
                waktu: '16-07-2019 10:00',
                status: 'Order Dibuat',
                mou: 'Nagita Slavina'
            },
            {
                waktu: '16-07-2019 11:00',
                status: 'Order Dikirim',
                mou: 'Nagita Slavina'
            },
            {
                waktu: '16-07-2019 12:00',
                status: 'Order dikonfirmasi',
                mou: 'Chacha Frederica'
            },
            {
                waktu: '16-07-2019 13:00',
                status: 'Telah dibuat Surat Jalan',
                mou: 'Chacha Frederica'
            },
            {
                waktu: '16-07-2019 14:00',
                status: 'Kurir akan mengambil sampel',
                mou: 'Satria Subiantoro'
            }
            ],
            color: "success",
            validmou: false,
            xid: 0,
            isinput: "N",
            countprice: 0,
            moumouid: 0,
            mouxname: "",
            moulang: "",
            moutext: "",
            isadvance: "N",
            mouformatadvance: "",
            issenttocompany: "N",
            menustartdate: false,
            menuenddate: false,
            date: new Date().toISOString().substr(0, 10),

            dialogdeletealertmou: false,
            dialogverifyalertmou: false,
            dialogreleasealertmou: false,
            alertverify: false,
            dialogunreleasealertmou: false,
            dialogunverifyalertmou: false,
            msgalertmou: ""
        };
    },
    mounted() { },
    computed: {
        mous() {
            return this.$store.state.mou.mous
        },
        xmoussearch() {
            return this.$store.state.mou.mous_search
        },
        xcompany() {
            return this.$store.state.company.selected_company
        },
        dialogmou() {
            return this.$store.state.mou.dialog_form_mou
        },
        xerrors() {
            return this.$store.state.mou.errors
        },
        isLoading() {
            return this.$store.state.mou.search_status == 1
        },
        startComputedDateFormatted() {
            return this.formatDate(this.xstartdate)
        },
        xact() {
            return this.$store.state.mou.act
        },
        xstartdate: {
            get() {
                return this.$store.state.mou.startdate
            },
            set(val) {
                this.$store.commit("mou/update_startdate", val)
            }
        },
        endComputedDateFormatted() {
            return this.formatDate(this.xenddate)
        },
        xenddate: {
            get() {
                return this.$store.state.mou.enddate
            },
            set(val) {
                this.$store.commit("mou/update_enddate", val)
            }
        },
        xname: {
            get() {
                return this.$store.state.mou.name
            },
            set(val) {
                this.$store.commit("mou/update_name", val)
            }
        },
        xminvalueR: {
            get() {
                return this.$store.state.mou.minvalueR
            },
            set(val) {
                this.$store.commit("mou/update_minvalueR", val)
            }
        },
        xmaxvalueR: {
            get() {
                return this.$store.state.mou.maxvalueR
            },
            set(val) {
                this.$store.commit("mou/update_maxvalueR", val)
            }
        },
        isminvalueinclusiveR: {
            get() {
                return this.$store.state.mou.isminvalueinclusiveR
            },
            set(val) {
                this.$store.commit("mou/update_isminvalueinclusiveR", val)
            }
        },
        ismaxvalueinclusiveR: {
            get() {
                return this.$store.state.mou.ismaxvalueinclusiveR
            },
            set(val) {
                this.$store.commit("mou/update_ismaxvalueinclusiveR", val)
            }
        },
        xnoteR: {
            get() {
                return this.$store.state.mou.noteR
            },
            set(val) {
                this.$store.commit("mou/update_noteR", val)
            }
        },
        xminvalueS: {
            get() {
                return this.$store.state.mou.minvalueS
            },
            set(val) {
                this.$store.commit("mou/update_minvalueS", val)
            }
        },
        xmaxvalueS: {
            get() {
                return this.$store.state.mou.maxvalueS
            },
            set(val) {
                this.$store.commit("mou/update_maxvalueS", val)
            }
        },
        isminvalueinclusiveS: {
            get() {
                return this.$store.state.mou.isminvalueinclusiveS
            },
            set(val) {
                this.$store.commit("mou/update_isminvalueinclusiveS", val)
            }
        },
        ismaxvalueinclusiveS: {
            get() {
                return this.$store.state.mou.ismaxvalueinclusiveS
            },
            set(val) {
                this.$store.commit("mou/update_ismaxvalueinclusiveS", val)
            }
        },
        xnoteS: {
            get() {
                return this.$store.state.mou.noteS
            },
            set(val) {
                this.$store.commit("mou/update_noteS", val)
            }
        },
        xminvalueI: {
            get() {
                return this.$store.state.mou.minvalueI
            },
            set(val) {
                this.$store.commit("mou/update_minvalueI", val)
            }
        },
        xmaxvalueI: {
            get() {
                return this.$store.state.mou.maxvalueI
            },
            set(val) {
                this.$store.commit("mou/update_maxvalueI", val)
            }
        },
        isminvalueinclusiveI: {
            get() {
                return this.$store.state.mou.isminvalueinclusiveI
            },
            set(val) {
                this.$store.commit("mou/update_isminvalueinclusiveI", val)
            }
        },
        ismaxvalueinclusiveI: {
            get() {
                return this.$store.state.mou.ismaxvalueinclusiveI
            },
            set(val) {
                this.$store.commit("mou/update_ismaxvalueinclusiveI", val)
            }
        },
        xnoteI: {
            get() {
                return this.$store.state.mou.noteI
            },
            set(val) {
                this.$store.commit("mou/update_noteI", val)
            }
        },
        xmoutypes() {
            return this.$store.state.mou.moutypes
        },
        xmoutype: {
            get() {
                return this.$store.state.mou.moutype
            },
            set(val) {
                this.$store.commit("mou/update_moutype", val)
            }

        },
        xagingtypes() {
            return this.$store.state.mou.agingtypes
        },
        xagingtype: {
            get() {
                return this.$store.state.mou.agingtype
            },
            set(val) {
                this.$store.commit("mou/update_agingtype", val)
            }

        },
        xstatuss() {
            return this.$store.state.mou.statuss
        },
        dialogstatusorder() {
            return this.$store.state.mou.dialog_status_order
        },
        xautocompanys() {
            return this.$store.state.mou.autocompanys
        },
        xautocompany: {
            get() {
                return this.$store.state.mou.autocompany
            },
            set(val) {
                this.$store.commit("mou/update_autocompany", val)
            }
        },
        xsearch: {
            get() {
                return this.$store.state.mou.x_search
            },
            set(val) {
                this.$store.commit("mou/update_x_search", val)
            }
        },
        curr_page: {
            get() {
                return this.$store.state.mou.current_page
            },
            set(val) {
                this.$store.commit("mou/update_current_page", val)
                this.$store.dispatch("mou/lookupbyidname", {
                    id: this.$store.state.company.selected_company.id,
                    search: this.xsearch,
                    current_page: val,
                    lastid: -1
                })
                

            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.mou.total_data
            },
            set(val) {
                this.$store.commit("mou/update_total_data", val)
            }
        },
        vmou: {
            get() {
                return this.$store.state.mou.vmou
            },
            set(val) {
                this.$store.commit("mou/update_vmou", val)
            }
        }
    },
    methods: {
        isSelected(p) {
            return p.id == this.$store.state.mou.selected_mou.id
        },
        selectMe(sc) {
            this.$store.commit("mou/update_selected_mou", sc)

        },
        updateDialogFormMou() {
            this.$store.commit("mou/update_dialog_form_mou", false)
        },
        updateDialogStatusOrder() {
            this.$store.commit("mou/update_dialog_status_order", false)
        },
        setStatusOrder(val) {
            this.$store.commit("mou/update_mous", {})
            this.$store.commit("mou/update_dialog_status_order", true)
            this.$store.commit("mou/update_statuss", val.statuss)
        },
        doPriceList(val) {
            console.log(location)
            var id = val.id
            location.replace("/one-ui/company/vuex/one-md-price/" + "?id=" + id)
        },
        doPrice() {
            console.log(location)
            var id = this.xid
            location.replace("/one-ui/company/vuex/one-md-price/" + "?id=" + id)
        },
        thr_search_company: _.debounce(function () {
            this.$store.dispatch("mou/searchcompany", {
                tes: this.search_company
            })
        }, 2000),
        thr_search_mou: _.debounce(function () {
            this.$store.dispatch("mou/searchmou", {
                companyId: this.$store.state.company.selected_company.M_CompanyID,
                muserId: this.$store.state.company.selected_company.id,
                search: this.search_mou
            })
        }, 2000),
        thr_search_city: _.debounce(function () {
            this.$store.dispatch("mou/searchcity", {
                search: this.search_city
            })
        }, 2000),
        thr_search_district: _.debounce(function () {
            this.$store.dispatch("mou/searchdistrict", {
                search: this.search_district,
                id: this.xautocity.M_CityID
            })
        }, 2000),
        thr_search_kelurahan: _.debounce(function () {
            this.$store.dispatch("mou/searchkelurahan", {
                search: this.search_kelurahan,
                id: this.xautodistrict.M_DistrictID
            })
        }, 2000),
        thr_search: _.debounce(function () {
            /* this.$store.dispatch("company/lookupbyname", {
                 company: this.$store.state.company.x_search,
                 mou: this.xsearch,
                 current_page: 1,
                 lastid: -1
             })
             this.$store.dispatch("mou/lookupbyname", {
                 company: this.$store.state.company.x_search,
                 mou: this.xsearch,
                 current_page: 1,
                 lastid: -1
             })
             */
            this.$store.dispatch("mou/lookupbyidname", {
                id: this.$store.state.company.selected_company.id,
                search: this.xsearch,
                current_page: 1,
                lastid: -1
            })
            
        }, 1000),
        searchCompany() {
            this.$store.dispatch("mou/lookup", {
                id: this.xcompany.name === "" ? "0" : this.$store.state.company.selected_company
                    .id,
                search: this.xsearch,
                current_page: 1,
                lastid: -1
            })
        },
        doPrint() {
            console.log('doprint')
            this.printwidth = 1028
            this.printtitle = ""
            let mou = one_mou()
            var id = this.xid
            var d = new Date();
            var n = d.getTime()
            var rptname = 'company_price'
            var formatrpt = this.formatreport

            this.urlprint = "/birt/run?__report=report/one/md/" + rptname +
                ".rptdesign&__format=" +
                formatrpt + "&PMouID=" + id + "&mouxname=" + mou.T_MouMouname +
                "&tm=" + n

            this.openprint = true
        },
        closePrint() {
            this.openprint = false
        },
        openFormMou(val) {
            this.xid = val
            this.$refs.formcompanymou.reset()
            this.$refs.formcompanymou.resetValidation()
            this.$store.commit("mou/update_act", 'new')
            this.$store.commit("mou/update_dialog_form_mou", true)
        },
        editFormMou(val) {
            // console.log(val)
            this.xid = val.id
            this.$store.commit("mou/update_mous_search", [{
                M_MouID: val.M_MouID,
                M_MouName: val.M_MouName
            }])
            this.$store.commit("mou/update_vmou", {
                M_MouID: val.M_MouID,
                M_MouName: val.M_MouName
            })
            // this.vmou = val.M_MouID
            this.xname = val.M_UserMouAliasName
            this.isdefault = val.M_UserMouIsDefault === 'N' ? false : true
            this.$store.commit("mou/update_act", 'edit')
            this.$store.commit("mou/update_dialog_form_mou", true)
        },
        updateFormMou() {
            if (this.$refs.formcompanymou.validate()) {
                this.$store.dispatch("mou/update", {
                    isdefault: this.isdefault === true ? "Y" : "N",
                    muserId: this.$store.state.company.selected_company.id,
                    usermoId: this.$store.state.company.selected_company.M_UserM_MouID,
                    mouId: this.$store.state.mou.selected_mou.M_MouID,
                    id: this.xid,
                    name: this.xname,
                    search: this.xsearch
                })
            }

        },
        checkError(value) {
            var errors = this.$store.state.mou.errors
            if (errors.includes(value)) {
                return true
            } else {
                return false
            }
        },
        saveFormMou() {
            if (this.$refs.formcompanymou.validate()) {
                this.$store.dispatch("mou/save", {
                    id: this.xid,
                    muserId: this.$store.state.company.selected_company.id,
                    mouId: this.vmou.M_MouID,
                    name: this.xname,
                    search: this.xsearch
                })
            }

        },
        set_date2(x) {
            this.startdate = x.new_date
        },
        set_date3(x) {
            this.enddate = x.new_date
        },
        formatDate(date) {
            if (!date) return null

            const [year, month, day] = date.split('-')
            return `${day}-${month}-${year}`
        },
        deFormatedDate(date) {
            if (!date) return null

            const [day, month, year] = date.split('-')
            return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
        },
        updateAlert_success(val) {
            this.$store.commit("company/update_alert_success", val)
        },
        deleteFormMou(data) {
            this.xid = data.id

            this.msgalertmou = "Yakin, mau hapus mou ini?"
            this.dialogdeletealertmou = true
        },
        closeDeleteAlertMou() {
            this.$store.dispatch("mou/delete", {
                muserId: this.$store.state.company.selected_company.id,
                xid: this.xid,
                name: this.xname,
                search: this.xsearch
            })
            this.dialogdeletealertmou = false
        }
    },
    watch: {
        xsearch(val, old) {
            console.log(val)
            this.xsearch = val
            this.thr_search()

        },
        search_company(val, old) {
            if (val == old) return
            if (!val) return
            if (val.length < 1) return
            if (this.$store.state.mou.update_autocomplete_status == 1) return
            this.thr_search_company()
        },
        search_mou(val, old) {
            if (val == old) return
            if (!val) return
            if (val.length < 1) return
            if (this.$store.state.mou.update_autocomplete_status == 1) return
            this.thr_search_mou()
        },
        search_city(val, old) {
            if (val == old) return
            if (!val) return
            if (val.length < 1) return
            if (this.$store.state.mou.update_autocomplete_status == 1) return
            this.thr_search_city()
        },
        search_district(val, old) {
            if (val == old) return
            if (!val) return
            if (val.length < 1) return
            if (this.$store.state.mou.update_autocomplete_status == 1) return
            this.thr_search_district()
        },
        search_kelurahan(val, old) {
            if (val == old) return
            if (!val) return
            if (val.length < 1) return
            if (this.$store.state.mou.update_autocomplete_status == 1) return
            this.thr_search_kelurahan()
        }
    }
}
</script>