<template>
    <div style="width: 100%;">

        <!-- SNACKBAR -->
        <v-snackbar v-model="snackbar" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
            {{ msgSnackbar }}
            <v-btn flat @click="updateAlertSuccess(false)"> Tutup </v-btn>
        </v-snackbar>

        <!-- ERROR DIALOG -->
        <v-dialog v-model="dialog_error" max-width="500px">
            <v-card>
                <v-card-title>
                    <span>ERROR !</span>
                    <v-spacer></v-spacer>
                </v-card-title>
                <v-divider></v-divider>
                <div class="ma-3 red--text">{{ msgError }}</div>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog_error = false">Tutup</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- END ERROR DIALOG -->


        <!-- table list start -->
        <v-toolbar color="primary" dark>
            <v-toolbar-title class="white--text">MASTERDATA ITEM</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon @click="openDialogAdd()">
                <v-icon>add_box</v-icon>
            </v-btn>
        </v-toolbar>

        <v-card class="pa-2">
            <v-layout row>
                <v-flex xs2 pl-2>
                    <v-autocomplete :items="groups" v-model="selected_group" return-object item-text="Nat_GroupName"
                        label="Group" outline hide-details></v-autocomplete>
                </v-flex>
                <v-flex xs2 pl-2>
                    <v-text-field v-model="xsearch" label="Cari" outline hide-details></v-text-field>
                </v-flex>
                <v-flex pl-2>
                    <v-btn class="ml-2" dark color="primary" style="min-width: 50px; height: 50px; margin: 0;"
                        @click="searchItem()">
                        <v-icon>search</v-icon>
                    </v-btn>
                </v-flex>
            </v-layout>
        </v-card>

        <v-card class="pa-2 mt-2">
            <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="items" :loading="isLoading" hide-actions
                        class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                {{ props.item.itemCategoryName }}
                            </td>
                            <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                {{ props.item.Nat_GroupName }}
                            </td>
                            <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                {{ props.item.M_ItemCode }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                {{ props.item.M_ItemDesc }}
                            </td>
                            <td class="text-xs-left pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                {{ props.item.ItemUnitName }}
                            </td>
                            <td class="text-xs-center pa-2" v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                @click="selectMe(props.item)">
                                <v-tooltip bottom>
                                    <template v-slot:activator="{ on, attrs }">
                                        <v-icon v-bind="attrs" v-on="on" small class="ml-3"
                                            @click="openDelete(props.item)">delete</v-icon>
                                    </template>
                                    <span>Hapus</span>
                                </v-tooltip>
                                <v-tooltip bottom>
                                    <template v-slot:activator="{ on, attrs }">
                                        <v-icon v-bind="attrs" v-on="on" small class="ml-3"
                                            @click="openEditForm(props.item)">edit</v-icon>
                                    </template>
                                    <span>Edit</span>
                                </v-tooltip>
                            </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>
        </v-card>
        <!-- table list end -->

        <!-- form -->
        <template>
            <v-layout row justify-center>
                <v-dialog v-model="dialogForm" persistent max-width="50vw">
                    <v-card>
                        <v-card-title class="headline grey lighten-2" primary-title>
                            FORM ITEM
                        </v-card-title>
                        <v-card-text class="pt-2 pb-0">
                            <v-layout wrap>
                                <v-flex xs12>
                                    <v-layout>
                                        <v-flex xs6 pa-2>
                                            <v-text-field v-model="itemname" label="Nama*" hide-details></v-text-field>
                                            <p v-if="checkErrorForm('requireItemname')" class="error pl-2 pr-2"
                                                style="color:#fff">Nama harus diisi</p>
                                        </v-flex>
                                        <v-flex xs6 pa-2>
                                            <v-text-field v-model="inventory_code" label="Inventory Code"
                                                hide-details></v-text-field>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                                <v-flex xs12>
                                    <v-layout>
                                        <v-flex xs12 pa-2>
                                            <v-select label="Item Kategori*" :items="categories"
                                                v-model="selected_category" :search-input.sync="search_category"
                                                auto-select-first no-filter item-text="itemCategoryName" return-object
                                                no-data-text="Pilih Kategori" hide-details required>
                                                <template slot="item" slot-scope="{ item }">
                                                    <v-list-tile-content>
                                                        <v-list-tile-title
                                                            v-text="item.itemCategoryName"></v-list-tile-title>
                                                    </v-list-tile-content>
                                                </template>
                                            </v-select>
                                            <p v-if="checkErrorForm('requireCategory')" class="error pl-2 pr-2"
                                                style="color:#fff">Kategori harus diisi</p>
                                        </v-flex>
                                    </v-layout>
                                </v-flex>
                                <v-flex xs12>
                                    <v-layout>
                                        <template v-if="checkClassType()">
                                            <v-flex xs12 pa-2>
                                                <v-autocomplete label="Type Asset" :items="class_type"
                                                    v-model="selected_class_type" item-text="Fa_ClassType" return-object
                                                    no-data-text="Pilih Type Asset" hide-details>
                                                </v-autocomplete>
                                                <p v-if="checkErrorForm('requireClassType')" class="error pl-2 pr-2"
                                                    style="color:#fff">Anda belum memilih tipe asset</p>
                                            </v-flex>
                                        </template>
                                    </v-layout>
                                </v-flex>
                                <v-flex xs12>
                                    <v-layout>
                                        <template v-if="checkCategoryFaClass()">
                                            <v-flex xs12 pa-2>
                                                <v-autocomplete label="FA Class*" :items="fa_class"
                                                    v-model="selected_fa_class" :search-input.sync="search_fa_class"
                                                    auto-select-first no-filter item-text="Fa_ClassName" return-object
                                                    no-data-text="Pilih Fixed Asset Class" hide-details required>
                                                    <template slot="item" slot-scope="{ item }">
                                                        <v-list-tile-content>
                                                            <v-list-tile-title
                                                                v-text="item.Fa_ClassName"></v-list-tile-title>
                                                        </v-list-tile-content>
                                                    </template>
                                                </v-autocomplete>
                                                <p v-if="checkErrorForm('requireFaClass')" class="error pl-2 pr-2"
                                                    style="color:#fff">FA Class harus diisi</p>
                                            </v-flex>
                                        </template>
                                    </v-layout>
                                </v-flex>
                                <v-flex xs12>
                                    <v-layout>
                                        <template v-if="checkCategoryGroup()">
                                            <v-flex xs6 pa-2>
                                                <v-autocomplete label="Item Group*" :items="group_x"
                                                    v-model="selected_group_x" :search-input.sync="search_group_x"
                                                    auto-select-first no-filter item-text="Nat_GroupName" return-object
                                                    no-data-text="Pilih Item Group" hide-details required>
                                                    <template slot="item" slot-scope="{ item }">
                                                        <v-list-tile-content>
                                                            <v-list-tile-title
                                                                v-text="item.Nat_GroupName"></v-list-tile-title>
                                                        </v-list-tile-content>
                                                    </template>
                                                </v-autocomplete>
                                                <p v-if="checkErrorForm('requireGroup')" class="error pl-2 pr-2"
                                                    style="color:#fff">Group harus diisi</p>
                                            </v-flex>
                                        </template>
                                        <template v-if="checkCategorySubGroup()">
                                            <v-flex xs6 pa-2>
                                                <v-autocomplete label="Item Product*" :items="subgroups"
                                                    v-model="selected_subgroup" :search-input.sync="search_subgroup"
                                                    auto-select-first no-filter item-text="Nat_SubGroupName"
                                                    return-object no-data-text="Pilih Item Product" hide-details
                                                    required>
                                                    <template slot="item" slot-scope="{ item }">
                                                        <v-list-tile-content>
                                                            <v-list-tile-title
                                                                v-text="item.Nat_SubGroupName"></v-list-tile-title>
                                                        </v-list-tile-content>
                                                    </template>
                                                </v-autocomplete>
                                                <p v-if="checkErrorForm('requireSubGroup')" class="error pl-2 pr-2"
                                                    style="color:#fff">Sub Product harus diisi</p>
                                            </v-flex>
                                        </template>
                                        <template v-if="checkFaInventaris()">
                                            <v-flex xs6 pa-2>
                                                <v-autocomplete label="Golongan Inventaris*" :items="fa_inventaris"
                                                    v-model="selected_fa_inventaris"
                                                    :search-input.sync="search_fa_inventaris" auto-select-first
                                                    no-filter item-text="M_InventarisGolName" return-object
                                                    no-data-text="Pilih Item Product" hide-details required>
                                                    <template slot="item" slot-scope="{ item }">
                                                        <v-list-tile-content>
                                                            <v-list-tile-title
                                                                v-text="item.M_InventarisGolName"></v-list-tile-title>
                                                        </v-list-tile-content>
                                                    </template>
                                                </v-autocomplete>
                                                <p v-if="checkErrorForm('requireFaInventaris')" class="error pl-2 pr-2"
                                                    style="color:#fff">FA Inventaris harus diisi</p>
                                            </v-flex>
                                        </template>
                                    </v-layout>
                                </v-flex>
                            </v-layout>

                            <!-- itemunit start -->
                            <v-layout>
                                <v-flex xs12 mt-2>
                                    <v-card>
                                        <v-card-title class="blue-grey white--text title"> Satuan
                                            <v-spacer></v-spacer><v-icon @click="showHideSatuan()" v-ripple
                                                class="white--text"
                                                style="cursor:pointer">library_add</v-icon></v-card-title>
                                        <v-card-text class="pa-3">
                                            <p v-if="checkErrorForm('requireitemunitsatuan')" class="error pl-2 pr-2"
                                                style="color:#fff">Satuan
                                                masih kosong</p>

                                            <div v-if="show_form_satuan">
                                                <v-flex xs12>
                                                    <v-layout row>
                                                        <!-- autocomplete itemunit start -->
                                                        <v-flex xs6 pa-1>
                                                            <v-autocomplete label="Item Unit*"
                                                                v-model="selected_item_unit" :items="item_units"
                                                                :search-input.sync="search_item_unit" auto-select-first
                                                                no-filter item-text="ItemUnitName" return-object
                                                                no-data-text="Pilih Item Unit">
                                                                <template slot="item" slot-scope="{ item }">
                                                                    <v-list-tile-content>
                                                                        <v-list-tile-title
                                                                            v-text="item.ItemUnitName"></v-list-tile-title>
                                                                    </v-list-tile-content>
                                                                </template>
                                                            </v-autocomplete>
                                                            <p v-if="checkErrorForm('requireitemunit')"
                                                                class="error pl-2 pr-2" style="color:#fff">
                                                                Item Unit harus diisi</p>
                                                        </v-flex>
                                                        <!-- autocomplete itemunit end -->

                                                        <!-- radio button start -->
                                                        <v-flex xs6 pa-1>
                                                            <v-radio-group v-model="detail_tipe_itemunit" row>
                                                                <v-radio label="Satuan Purchase"
                                                                    value="purchase"></v-radio>
                                                                <v-radio label="Satuan Penggunaan"
                                                                    value="base"></v-radio>
                                                                <v-radio label="Satuan Pelaporan"
                                                                    value="report"></v-radio>
                                                            </v-radio-group>
                                                        </v-flex>
                                                        <!-- radio button end -->

                                                        <!-- item min & max start -->
                                                        <!--<v-flex xs6 pa-1>
                                                                <v-text-field v-model="xmin" label="Min" type="number" min="0"
                                                                    @focus="clearXmin"
                                                                    @blur="resetXmin"
                                                                    hide-details></v-text-field>
                                                            </v-flex>-->
                                                        <!-- item min & max end -->
                                                    </v-layout>
                                                </v-flex>

                                                <v-divider class="mb-2"></v-divider>
                                                <v-btn small depressed @click="batalForm">batal</v-btn>
                                                <v-btn small depressed v-if="act_satuan === 'add'"
                                                    @click="saveSatuanForm">tambahkan</v-btn>
                                                <v-btn small depressed v-if="act_satuan === 'edit'"
                                                    @click="editSatuanForm">ubah</v-btn>
                                            </div>

                                            <div v-if="show_form_satuan_data">
                                                <v-card class="mb-2 mt-2" v-for="(satuan, key_satuan) in satuans"
                                                    :key="key_satuan" elevation="1">
                                                    <v-card-text>
                                                        <p><kbd>{{ satuan.item_unit_name }}</kbd></p>
                                                        <p class="mb-1"
                                                            v-if="satuan.detail_tipe_itemunit === 'purchase'">
                                                            Satuan Purchase
                                                        </p>
                                                        <p class="mb-1" v-if="satuan.detail_tipe_itemunit === 'base'">
                                                            Satuan Penggunaan
                                                        </p>
                                                        <p class="mb-1" v-if="satuan.detail_tipe_itemunit === 'report'">
                                                            Satuan Pelaporan
                                                        </p>
                                                        <!--<p>Min : {{ satuan.item_unit_min }} </p>-->
                                                    </v-card-text>
                                                    <v-divider></v-divider>
                                                    <v-card-actions>
                                                        <v-spacer></v-spacer>
                                                        <v-btn @click="editSatuan(key_satuan)" small depressed
                                                            color="primary" dark>ubah <v-icon small right
                                                                dark>edit</v-icon></v-btn>
                                                        <v-btn @click="deleteSatuan(key_satuan)" small depressed
                                                            color="danger" dark>hapus <v-icon small right
                                                                dark>clear</v-icon></v-btn>
                                                    </v-card-actions>
                                                </v-card>
                                            </div>
                                        </v-card-text>
                                    </v-card>
                                </v-flex>
                            </v-layout>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="error" flat @click="closeDialogForm()">
                                Tutup
                            </v-btn>
                            <v-btn v-if="xact === 'new'" color="primary" @click="saveForm()">Simpan</v-btn>
                            <v-btn v-if="xact === 'edit'" color="primary" @click="updateForm()">Simpan Perubahan</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-layout>
        </template>
        <!-- end form -->

        <template>
            <v-dialog v-model="dialogdeletealert" 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>
                                                Yakin, mau hapus Item : <span class="font-weight-bold">{{ msgalertname
                                                    }}</span> ?
                                            </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="error" flat @click="dialogdeletealert = false">
                            Tutup
                        </v-btn>
                        <v-btn color="primary" @click="closeDeleteAlert()">
                            Yakin lah
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>

        <template>
            <one-dialog-info :status="opendialoginfo" :msg="msginfo"
                @close-dialog-info="opendialoginfo = false"></one-dialog-info>
        </template>
    </div>
</template>

<style scoped>
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;
}

.scroll-container {
    scroll-padding: 50px 0 0 50px;
}
</style>

<script>
module.exports = {
    components: {
        "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
        "one-dialog-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
    },
    data() {
        return {
            validationitem: false,
            search_category: "",
            search_group_x: "",
            search_subgroup: "",
            search_fa_class: "",
            search_fa_inventaris: "",
            itemname: "",
            inventory_code: "",

            // satuan
            search_item_unit: "",
            show_form_satuan: false,
            show_form_satuan_data: false,
            act_satuan: "add",

            detail_tipe_itemunit: "rupiah",
            satuans: [],
            xmin: 0,
            satuan_id: 0,
            idx_satuan: -1,

            xid: 0,
            msgalertname: "",
            dialogdeletealert: false,
            headers: [
                {
                    text: "KATEGORI",
                    align: "center",
                    sortable: false,
                    value: "date",
                    width: "15%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "GROUP",
                    align: "center",
                    sortable: false,
                    value: "date",
                    width: "15%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "KODE",
                    align: "center",
                    sortable: false,
                    value: "jurnal",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NAMA",
                    align: "center",
                    sortable: false,
                    value: "location",
                    width: "35%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "UNIT",
                    align: "center",
                    sortable: false,
                    value: "info",
                    width: "15%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI",
                    align: "center",
                    sortable: false,
                    value: "status",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    mounted() {
        this.$store.dispatch("item/getGroup")
        this.$store.dispatch("item/get_inventaris_gol", {
            search: this.search_fa_inventaris
        })
        this.$store.dispatch("item/search", {
            current_page: this.curr_page,
            search: this.xsearch,
            group_id: this.selected_group != undefined ? this.selected_group.Nat_GroupID : ''
        })
        this.$store.dispatch("item/getCategory", this.search_category)
        this.$store.dispatch("item/getGroupX", this.search_group_x)
        this.$store.dispatch("item/get_unit", {
            search: this.search_item_unit
        })
    },
    computed: {
        groups() {
            return this.$store.state.item.groups
        },
        selected_group: {
            get() {
                return this.$store.state.item.selected_group
            },
            set(val) {
                this.$store.commit("item/update_selected_group", val)
            }
        },
        items() {
            return this.$store.state.item.items
        },
        isLoading() {
            return this.$store.state.item.search_status === 1
        },
        curr_page: {
            get() {
                return this.$store.state.item.current_page
            },
            set(val) {
                this.$store.commit("item/update_current_page", val)
                this.searchItem()
            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.item.total_page
            },
            set(val) {
                this.$store.commit("item/update_total_page", val)
            }
        },
        xsearch: {
            get() {
                return this.$store.state.item.xsearch
            },
            set(val) {
                this.$store.commit("item/update_xsearch", val)
            }
        },
        dialogForm: {
            get() {
                return this.$store.state.item.dialog_form
            },
            set(val) {
                this.$store.commit("item/update_dialog_form", val)
            }
        },
        xact: {
            get() {
                return this.$store.state.item.act
            },
            set(val) {
                this.$store.commit("item/update_act", val)
            }
        },
        categories() {
            return this.$store.state.item.categories
        },
        selected_category: {
            get() {
                return this.$store.state.item.selected_category
            },
            set(val) {
                this.$store.commit("item/update_selected_category", val)

                if (val.itemCategoryID == '2') {
                    let item_unit = this.item_units.find(item_unit => item_unit.ItemUnitName == 'PCS')
                    this.selected_item_unit = { ItemUnitID: item_unit.ItemUnitID, ItemUnitName: item_unit.ItemUnitName }

                    let satuans = this.satuans
                    satuans = []
                    let arr_val = ['purchase', 'base', 'report']
                    arr_val.forEach(val => {
                        satuans.push({
                            item_unit_id: this.selected_item_unit.ItemUnitID,
                            item_unit_name: this.selected_item_unit.ItemUnitName,
                            detail_tipe_itemunit: val,
                            item_unit_min: 0,
                            id: 0,
                        })
                    })
                    this.satuans = satuans

                    this.show_form_satuan = true
                    this.show_form_satuan_data = true
                }


                if (val == undefined) {
                    this.$store.commit("item/update_selected_fa_class", {})
                    this.$store.commit("item/update_fa_class", [])
                    this.$store.commit("item/update_selected_group_x", {})
                    this.$store.commit("item/update_group_x", [])
                    this.$store.commit("item/update_selected_subgroup", {})
                    this.$store.commit("item/update_subgroups", [])
                    this.$store.commit("item/update_selected_fa_inventaris_gol", {})
                    this.$store.commit("item/update_fa_inventaris_gol", [])
                    this.$store.commit("item/update_selected_class_type", {})
                }
            }
        },
        group_x() {
            return this.$store.state.item.group_x
        },
        selected_group_x: {
            get() {
                return this.$store.state.item.selected_group_x
            },
            set(val) {
                this.$store.commit("item/update_selected_group_x", val)
                this.$store.dispatch("item/get_subgroup", {
                    group_id: this.selected_group_x != undefined ? this.selected_group_x.Nat_GroupID : '',
                    search: this.search_subgroup
                })
                if (val == undefined) {
                    this.$store.commit("item/update_selected_subgroup", {})
                    this.$store.commit("item/update_subgroups", [])
                }
            }
        },
        subgroups() {
            return this.$store.state.item.subgroups
        },
        selected_subgroup: {
            get() {
                return this.$store.state.item.selected_subgroup
            },
            set(val) {
                this.$store.commit("item/update_selected_subgroup", val)
            }
        },
        fa_class() {
            return this.$store.state.item.fa_class
        },
        selected_fa_class: {
            get() {
                return this.$store.state.item.selected_fa_class
            },
            set(val) {
                this.$store.commit("item/update_selected_fa_class", val)
                if (val == undefined) {
                    this.$store.commit("item/update_selected_fa_inventaris_gol", {})
                    this.$store.commit("item/update_fa_inventaris_gol", [])
                }
            }
        },
        fa_inventaris() {
            return this.$store.state.item.fa_inventaris_gol
        },
        selected_fa_inventaris: {
            get() {
                return this.$store.state.item.selected_fa_inventaris_gol
            },
            set(val) {
                this.$store.commit("item/update_selected_fa_inventaris_gol", val)
            }
        },
        item_units() {
            return this.$store.state.item.item_units
        },
        selected_item_unit: {
            get() {
                return this.$store.state.item.selected_item_unit
            },
            set(val) {
                this.$store.commit("item/update_selected_item_unit", val)
            }
        },
        class_type() {
            return this.$store.state.item.class_type
        },
        selected_class_type: {
            get() {
                return this.$store.state.item.selected_class_type
            },
            set(val) {
                this.$store.commit("item/update_selected_class_type", val)
                this.$store.dispatch("item/get_fa_class", {
                    flag_type: this.selected_class_type != undefined ? this.selected_class_type.flagtype : '',
                    search: ""
                })
                if (val == undefined) {
                    this.$store.commit("item/update_selected_group_x", {})
                    this.$store.commit("item/update_group_x", [])
                }
            }
        },
        snackbar: {
            get() {
                return this.$store.state.item.alert_success
            },
            set(val) {
                this.$store.commit("item/update_alert_success", val)
            }
        },
        msgSnackbar() {
            return this.$store.state.item.msg_success;
        },
        dialog_error: {
            get() {
                return this.$store.state.item.alert_error
            },
            set(val) {
                this.$store.commit("item/update_alert_error", val)
            },
        },
        msgError() {
            return this.$store.state.item.save_error_message
        },
        opendialoginfo: {
            get() {
                return this.$store.state.item.opendialoginfo
            },
            set(val) {
                this.$store.commit("item/update_opendialoginfo", val)
            }
        },
        msginfo: {
            get() {
                return this.$store.state.item.msginfo
            },
            set(val) {
                this.$store.commit("item/update_msginfo", val)
            }
        },
    },
    methods: {
        isSelected(o) {
            return o.M_ItemID == this.$store.state.item.selected_item.M_ItemID
        },
        selectMe(sc) {
            this.$store.commit("item/update_selected_item", sc)
            this.$store.commit("item/update_last_id", sc.M_ItemID)

            // set value selected item category
            /*this.$store.commit("item/update_categories", [
                {
                    itemCategoryID: sc.itemCategoryID,
                    itemCategoryName: sc.itemCategoryName
                }
            ])*/
            this.$store.commit("item/update_selected_category", {
                itemCategoryID: sc.itemCategoryID,
                itemCategoryName: sc.itemCategoryName
            })

            // set value selected item group
            /*this.$store.commit("item/update_group_x", [
                {
                    Nat_GroupID: sc.Nat_GroupID,
                    Nat_GroupName: sc.Nat_GroupName
                }
            ])*/
            this.$store.commit("item/update_selected_group_x", {
                Nat_GroupID: sc.Nat_GroupID,
                Nat_GroupName: sc.Nat_GroupName
            })

            // set value selected item subgroup
            /*this.$store.commit("item/update_subgroups", [
                {
                    Nat_SubGroupID: sc.Nat_SubGroupID,
                    Nat_SubGroupName: sc.Nat_SubGroupName
                }
            ])*/
            this.$store.commit("item/update_selected_subgroup", {
                Nat_SubGroupID: sc.Nat_SubGroupID,
                Nat_SubGroupName: sc.Nat_SubGroupName
            })

            // set value selected fa class
            /*this.$store.commit("item/update_fa_class", [
                {
                    Fa_ClassID: sc.Fa_ClassID,
                    Fa_ClassName: sc.Fa_ClassName,
                    Fa_ClassFlagType: sc.Fa_ClassFlagType
                }
            ])*/
            this.$store.commit("item/update_selected_fa_class", {
                Fa_ClassID: sc.Fa_ClassID,
                Fa_ClassName: sc.Fa_ClassName,
                Fa_ClassFlagType: sc.Fa_ClassFlagType
            })

            // set value selected fa inventaris
            /*this.$store.commit("item/update_fa_inventaris_gol", [
                {
                    Fa_InventarisGolID: sc.Fa_InventarisGolID,
                    Fa_InventarisGolName: sc.Fa_InventarisGolName
                }
            ])*/
            this.$store.commit("item/update_selected_fa_inventaris_gol", {
                M_InventarisGolID: sc.M_InventarisGolID,
                M_InventarisGolName: sc.M_InventarisGolName
            })


        },
        thr_search: _.debounce(function () {
            this.$store.dispatch("item/getBranch", {
                current_page: this.curr_page,
                search: this.xsearch,
                group_id: this.selected_group != undefined ? this.selected_group.Nat_GroupID : ''
            })
        }, 1000),
        thr_search_category: _.debounce(function () {
            this.$store.dispatch("item/getCategory", this.search_category)
        }, 1000),
        thr_search_group_x: _.debounce(function () {
            this.$store.dispatch("item/getGroupX", this.search_group_x)
        }, 1000),
        thr_search_subgroup: _.debounce(function () {
            this.$store.dispatch("item/get_subgroup", {
                group_id: this.selected_group_x != undefined ? this.selected_group_x.Nat_GroupID : '',
                search: this.search_subgroup
            })
        }, 1000),
        thr_search_fa_class: _.debounce(function () {
            this.$store.dispatch("item/get_fa_class", {
                flag_type: this.selected_class_type != undefined ? this.selected_class_type.flagtype : '',
                search: this.search_fa_class
            })
        }, 1000),
        thr_search_fa_inventaris: _.debounce(function () {
            this.$store.dispatch("item/get_inventaris_gol", {
                search: this.search_fa_inventaris
            })
        }, 1000),
        thr_search_item_unit: _.debounce(function () {
            this.$store.dispatch("item/get_unit", {
                search: this.search_item_unit
            })
        }, 1000),
        searchItem() {
            this.$store.dispatch("item/search", {
                current_page: this.curr_page,
                search: this.xsearch,
                group_id: this.selected_group != undefined ? this.selected_group.Nat_GroupID : ''
            })
        },
        openDialogAdd() {
            this.$store.commit("item/update_dialog_form", true)
            this.$store.commit("item/update_act", "new")
            this.$store.commit("item/update_errors", [])
            this.satuans = []
            this.show_form_satuan = true
            this.xmin = 0
            this.selected_item_unit = {}
            this.itemname = ""
            this.inventory_code = ""
            this.$store.commit("item/update_selected_category", {})
            this.$store.commit("item/update_selected_fa_class", {})
            this.$store.commit("item/update_selected_group_x", {})
            this.$store.commit("item/update_selected_subgroup", {})
            this.$store.commit("item/update_selected_fa_inventaris_gol", {})
            this.$store.commit("item/update_selected_class_type", {})
        },
        closeDialogForm() {
            this.$store.commit("item/update_dialog_form", false)
            this.$store.commit("item/update_act", "")
            this.satuans = []
            this.show_form_satuan = false
            this.xmin = 0
            this.selected_item_unit = {}
            this.itemname = ""
            this.inventory_code = ""
            this.$store.commit("item/update_selected_category", {})
            //this.$store.commit("item/update_categories", [])
            this.$store.commit("item/update_selected_fa_class", {})
            //this.$store.commit("item/update_fa_class", [])
            this.$store.commit("item/update_selected_group_x", {})
            //this.$store.commit("item/update_group_x", [])
            this.$store.commit("item/update_selected_subgroup", {})
            //this.$store.commit("item/update_subgroups", [])
            this.$store.commit("item/update_selected_fa_inventaris_gol", {})
            //this.$store.commit("item/update_fa_inventaris_gol", [])
            this.$store.commit("item/update_selected_class_type", {})
        },
        updateAlertSuccess() {
            this.$store.commit("item/update_alert_success", false)
        },
        // check category group
        checkCategoryGroup() {
            if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Persediaan' : '') {
                return true
            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Inventaris' : '') {
                return true
            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Jasa' : '') {
                return true
            } else if (this.selected_fa_class != undefined ? this.selected_fa_class.Fa_ClassFlagType === 'operational' : '') {
                return true
            } else {
                return false
            }
        },
        // check category subgroup
        checkCategorySubGroup() {
            if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Persediaan' : '') {
                return true
            } else {
                return false
            }
        },
        // check category fa class
        checkCategoryFaClass() {
            if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'vehicle' : '') {
                return true
            } else if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'operational' : '') {
                return true
            } else if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'building' : '') {
                return true
            } else if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'meit' : '') {
                return true
            } else if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'software' : '') {
                return true
            } else if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'office' : '') {
                return true
            } else if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'general' : '') {
                return true
            } else if (this.selected_class_type != undefined ? this.selected_class_type.flagtype === 'land' : '') {
                return true
            } else {
                return false
            }
        },
        // check category fa inventaris
        checkFaInventaris() {
            if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Inventaris' : '') {
                return true
            } else {
                return false
            }
        },
        // check category class type
        checkClassType() {
            if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Asset' : '') {
                return true
            } else {
                return false
            }
        },
        // check error form
        checkErrorForm(value) {
            var errors = this.$store.state.item.errors
            if (errors.includes(value)) {
                return true
            } else {
                return false
            }
        },

        //  tambah satuan start
        clearXmin() {
            if (this.xmin === 0) {
                this.xmin = ''
            }
        },
        resetXmin() {
            if (this.xmin === '' || this.xmin === null) {
                this.xmin = 0
            }
        },
        batalForm() {
            this.resetSatuan()

            if (this.show_form_satuan == true) {
                this.show_form_satuan = false
            } else {
                this.show_form_satuan = true
            }
        },
        resetSatuan() {
            this.selected_item_unit = {}
            this.xmin = 0
            this.detail_tipe_itemunit = "purchase"

            //this.$store.commit("item/update_item_units", [])
            this.$store.commit("item/update_selected_item_unit", {})

            if (this.selected_category.itemCategoryID == '2') {
                console.log('tambahan satuan')
                console.log(this.item_units)
                let item_unit = this.item_units.find(item_unit => item_unit.ItemUnitName == 'PCS')
                console.log(item_unit)
                this.selected_item_unit = { ItemUnitID: item_unit.ItemUnitID, ItemUnitName: item_unit.ItemUnitName }
            }

        },
        showHideSatuan() {
            this.act_satuan = 'add'
            this.resetSatuan()
            var value = this.show_form_satuan ? false : true
            this.show_form_satuan = value
        },

        saveSatuanForm() {
            this.show_form_satuan = true
            this.$store.commit("item/update_errors", [])
            var errors = this.$store.state.item.errors

            if (_.isEmpty(this.selected_item_unit)) {
                errors.push("requireitemunit")
            }

            if (errors.length === 0) {
                this.$store.commit("item/update_errors", [])
                let satuans = this.satuans
                let check_satuan_sama = satuans.some(satuan => this.detail_tipe_itemunit === satuan.detail_tipe_itemunit);
                if (check_satuan_sama == false) {
                    satuans.push({
                        item_unit_id: this.selected_item_unit.ItemUnitID,
                        item_unit_name: this.selected_item_unit.ItemUnitName,
                        detail_tipe_itemunit: this.detail_tipe_itemunit,
                        item_unit_min: this.xmin,
                        id: 0,
                    })
                }

                console.log(satuans)

                if (this.satuans.length > 0) {
                    this.show_form_satuan = true
                    this.show_form_satuan_data = true
                    this.resetSatuan()
                }
            }
        },

        editSatuan(idx) {
            let satuans = this.satuans
            let satuan = satuans[idx]

            console.log(satuan);

            this.idx_satuan = idx
            this.satuan_id = satuan.id
            this.act_satuan = 'edit'
            this.detail_tipe_itemunit = satuan.detail_tipe_itemunit
            this.xmin = satuan.item_unit_min

            this.$store.commit("item/update_item_units", [
                {
                    ItemUnitID: satuan.item_unit_id,
                    ItemUnitName: satuan.item_unit_name
                }
            ])

            this.$store.commit("item/update_selected_item_unit",
                {
                    ItemUnitID: satuan.item_unit_id,
                    ItemUnitName: satuan.item_unit_name
                }
            )

            this.show_form_satuan = true
        },
        deleteSatuan(idx) {
            this.act_satuan = 'add'
            let satuans = this.satuans
            satuans.splice(idx, 1)
            this.satuans = satuans

            if (this.satuans.length === 0) {
                this.show_form_satuan = true
            }
        },
        editSatuanForm() {
            this.$store.commit("item/update_errors", [])
            var errors = this.$store.state.item.errors

            if (_.isEmpty(this.selected_item_unit)) {
                errors.push("requireitemunit")
            }

            if (errors.length === 0) {
                this.$store.commit("item/update_errors", [])
                let satuans = this.satuans
                let edited_satuan = {
                    item_unit_id: this.selected_item_unit.ItemUnitID,
                    item_unit_name: this.selected_item_unit.ItemUnitName,
                    detail_tipe_itemunit: this.detail_tipe_itemunit,
                    item_unit_min: this.xmin,
                    id: this.satuan_id,
                }
                satuans[this.idx_satuan] = edited_satuan
                this.satuans = satuans

                if (this.satuans.length > 0) {
                    this.show_form_satuan = true
                    this.resetSatuan()
                    this.act_satuan = 'add'
                }
            }
        },


        // save form start
        saveForm() {
            this.$store.commit("item/update_errors", [])
            var errors = this.$store.state.item.errors
            if (_.isEmpty(this.itemname)) {
                errors.push("requireItemname")
            }
            if (_.isEmpty(this.selected_category)) {
                errors.push("requireCategory")
            }

            if (this.satuans.length === 0) {
                errors.push("requireitemunitsatuan")
            }

            let prm = {}
            prm.itemgroupid = 0;
            prm.itemsubgroupid = 0;
            prm.itemfaclassid = 0;
            prm.itemfainventarisid = 0;

            // cek kategori
            if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Persediaan' : '') {
                if (_.isEmpty(this.selected_group_x)) {
                    errors.push("requireGroup")
                }
                if (_.isEmpty(this.selected_subgroup)) {
                    errors.push("requireSubGroup")
                }

                prm.itemgroupid = this.selected_group_x.Nat_GroupID;
                prm.itemsubgroupid = this.selected_subgroup.Nat_SubGroupID;

            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Inventaris' : '') {
                if (_.isEmpty(this.selected_group_x)) {
                    errors.push("requireGroup")
                }
                if (_.isEmpty(this.selected_fa_inventaris)) {
                    errors.push("requireFaInventaris")
                }
                prm.itemgroupid = this.selected_group_x.Nat_GroupID;
                prm.itemfainventarisid = this.selected_fa_inventaris.M_InventarisGolID;

            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Jasa' : '') {
                if (_.isEmpty(this.selected_group_x)) {
                    errors.push("requireGroup")
                }
                prm.itemgroupid = this.selected_group_x.Nat_GroupID;

            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Asset' : '') {
                // validasi memilih tipe asset
                if (_.isEmpty(this.selected_class_type)) {
                    errors.push("requireClassType")
                }

                // validasi memilih fa class
                if (_.isEmpty(this.selected_fa_class)) {
                    errors.push("requireFaClass")
                }

                if (this.selected_fa_class != undefined ? this.selected_fa_class.Fa_ClassFlagType === 'operational' : '') {
                    if (_.isEmpty(this.selected_group_x)) {
                        errors.push("requireGroup")
                    }

                    prm.itemfaclassid = this.selected_fa_class.Fa_ClassID;
                    prm.itemgroupid = this.selected_group_x.Nat_GroupID;

                }

                prm.itemfaclassid = this.selected_fa_class.Fa_ClassID;
            }

            if (errors.length === 0) {
                this.$store.commit("item/update_errors", [])
                prm.itemname = this.itemname;
                prm.inventory_code = this.inventory_code;
                prm.itemcategoryid = this.selected_category.itemCategoryID;

                // item unit
                prm.satuan = this.satuans
                // console.log(prm)
                this.$store.dispatch("item/save_item", prm)
            }
        },

        // edit item
        openEditForm(data) {
            this.selectMe(data)

            this.$store.dispatch("item/get_subgroup", {
                group_id: data.Nat_GroupID ?? '',
                search: ''
            })

            this.xid = data.M_ItemID
            this.itemname = data.M_ItemDesc
            this.inventory_code = data.M_ItemInventoryCode

            if (this.selected_category.itemCategoryName === 'Asset') {
                if (this.selected_fa_class.Fa_ClassFlagType === 'vehicle') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 1,
                        Fa_ClassType: "Kendaraan",
                        flagtype: "vehicle"
                    })
                } else if (this.selected_fa_class.Fa_ClassFlagType === 'operational') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 2,
                        Fa_ClassType: "Operasional",
                        flagtype: "operational"
                    })
                } else if (this.selected_fa_class.Fa_ClassFlagType === 'building') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 3,
                        Fa_ClassType: "Gedung",
                        flagtype: "building"
                    })
                } else if (this.selected_fa_class.Fa_ClassFlagType === 'meit') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 4,
                        Fa_ClassType: "Mechanical Elektrical & IT",
                        flagtype: "meit"
                    })
                } else if (this.selected_fa_class.Fa_ClassFlagType === 'software') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 5,
                        Fa_ClassType: "Software & Laboratorium System",
                        flagtype: "software"
                    })
                } else if (this.selected_fa_class.Fa_ClassFlagType === 'office') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 6,
                        Fa_ClassType: "Peralatan Kantor",
                        flagtype: "office"
                    })
                } else if (this.selected_fa_class.Fa_ClassFlagType === 'general') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 7,
                        Fa_ClassType: "Peralatan Umum",
                        flagtype: "general"
                    })
                } else if (this.selected_fa_class.Fa_ClassFlagType === 'land') {
                    this.$store.commit("item/update_selected_class_type", {
                        id: 8,
                        Fa_ClassType: "Tanah",
                        flagtype: "land"
                    })
                }
            }

            // console.log(data);
            this.satuans = JSON.parse(JSON.stringify(data.satuan))
            if (this.satuans.length > 0) {
                this.show_form_satuan_data = true
            }
            // console.log(this.satuans);
            this.detail_tipe_itemunit = 'purchase'

            this.$store.commit("item/update_act", "edit")
            this.$store.commit("item/update_dialog_form", true)
            this.show_form_satuan = true
        },

        // update data form
        updateForm() {
            this.$store.commit("item/update_errors", [])
            var errors = this.$store.state.item.errors
            if (_.isEmpty(this.itemname)) {
                errors.push("requireItemname")
            }
            if (_.isEmpty(this.selected_category)) {
                errors.push("requireCategory")
            }

            if (this.satuans.length === 0) {
                errors.push("requireitemunitsatuan")
            }

            let prm = {}
            prm.itemgroupid = 0;
            prm.itemsubgroupid = 0;
            prm.itemfaclassid = 0;
            prm.itemfainventarisid = 0;

            // cek kategori
            if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Persediaan' : '') {
                if (_.isEmpty(this.selected_group_x)) {
                    errors.push("requireGroup")
                }
                if (_.isEmpty(this.selected_subgroup)) {
                    errors.push("requireSubGroup")
                }

                prm.itemgroupid = this.selected_group_x.Nat_GroupID;
                prm.itemsubgroupid = this.selected_subgroup.Nat_SubGroupID;

            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Inventaris' : '') {
                if (_.isEmpty(this.selected_group_x)) {
                    errors.push("requireGroup")
                }
                if (_.isEmpty(this.selected_fa_inventaris)) {
                    errors.push("requireFaInventaris")
                }
                prm.itemgroupid = this.selected_group_x.Nat_GroupID;
                prm.itemfainventarisid = this.selected_fa_inventaris.M_InventarisGolID;

            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Jasa' : '') {
                if (_.isEmpty(this.selected_group_x)) {
                    errors.push("requireGroup")
                }
                prm.itemgroupid = this.selected_group_x.Nat_GroupID;

            } else if (this.selected_category != undefined ? this.selected_category.itemCategoryName === 'Asset' : '') {
                // validasi memilih tipe asset
                if (_.isEmpty(this.selected_class_type)) {
                    errors.push("requireClassType")
                }

                // validasi memilih fa class
                if (_.isEmpty(this.selected_fa_class)) {
                    errors.push("requireFaClass")
                }

                if (this.selected_fa_class != undefined ? this.selected_fa_class.Fa_ClassFlagType === 'operational' : '') {
                    if (_.isEmpty(this.selected_group_x)) {
                        errors.push("requireGroup")
                    }

                    prm.itemfaclassid = this.selected_fa_class.Fa_ClassID;
                    prm.itemgroupid = this.selected_group_x.Nat_GroupID;

                }

                prm.itemfaclassid = this.selected_fa_class.Fa_ClassID;
            }

            if (errors.length === 0) {
                this.$store.commit("item/update_errors", [])
                prm.itemname = this.itemname;
                prm.inventory_code = this.inventory_code;
                prm.itemcategoryid = this.selected_category.itemCategoryID;
                prm.itemid = this.xid

                // item unit
                prm.satuan = this.satuans
                // console.log(prm)
                this.$store.dispatch("item/update_item", prm)
            }
        },

        // delete item
        openDelete(val) {
            this.xid = val.M_ItemID
            this.itemname = val.M_ItemDesc
            this.msgalertname = val.M_ItemDesc
            this.dialogdeletealert = true
        },
        closeDeleteAlert() {
            this.dialogdeletealert = false
            this.$store.dispatch("item/delete_item", {
                itemid: this.xid,
                itemname: this.itemname
            })
        }
    },
    watch: {
        xsearch(val, old) {
            this.xsearch = val
            this.thr_search()
        },
        search_category(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.item.update_autocomplete_status == 1) return;
            this.thr_search_category();
        },
        search_group_x(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.item.update_autocomplete_status == 1) return;
            this.thr_search_group_x();
        },
        search_subgroup(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.item.update_autocomplete_status == 1) return;
            this.thr_search_subgroup();
        },
        search_fa_class(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.item.update_autocomplete_status == 1) return;
            this.thr_search_fa_class();
        },
        search_fa_inventaris(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.item.update_autocomplete_status == 1) return;
            this.thr_search_fa_inventaris();
        },
        search_item_unit(val, old) {
            if (val == old) return;
            if (!val) return;
            if (val.length < 1) return;
            if (this.$store.state.item.update_autocomplete_status == 1) return;
            this.thr_search_item_unit();
        },
    },
}
</script>
