<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 -->

        <!-- dialog error -->
        <v-dialog v-model="dialoggagal" persistent max-width="290">
            <v-card>
                <v-card-title class="headline yellow darken-2 white--text">
                    ERROR !
                </v-card-title>
                <v-card-text>
                    {{ msggagal }}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="black--text" text @click="closeDialogGagal">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- dialog error -->

        <!-- dialog success -->
        <v-dialog v-model="dialogsuccess" persistent max-width="290">
            <v-card>
                <v-card-title color="success" class="headline">Berhasil !</v-card-title>
                <v-card-text>
                    {{ msgsuccess }}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- dialog success -->

        <v-layout row wrap>
            <!-- kiri start -->
            <v-flex xs12 md6 style="padding: 10px;">
                <v-card>
                    <!-- table list start -->
                    <v-toolbar color="primary" dark>
                        <v-toolbar-title class="white--text">ITEM DIVISION</v-toolbar-title>
                    </v-toolbar>
                    <v-card class="pa-2">
                        <v-layout row>
                            <v-flex xs2 pl-2>
                                <v-select item-text="itemCategoryName" return-object :items="xcategorys"
                                    v-model="selected_category" hide-details label="Category" outlined></v-select>
                            </v-flex>
                            <v-flex xs8 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="xitems" :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.itemCategoryName }}
                                        </td>
                                        <td class="text-xs-left 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>
                                    </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 -->
                </v-card>
            </v-flex>
            <!-- kiri end -->
            <!-- kanan start -->
            <v-flex xs12 md6 style="padding: 10px;">
                <v-card>
                    <!-- table list start -->
                    <v-toolbar color="blue darken-1" dark>
                        <v-toolbar-title class="white--text">ITEM TERPILIH</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-btn v-if="selected_item && selected_item.M_ItemID > 0 && itemDivisionArr.length > 0"
                            class="ma-1" color="white" elevation="2" @click="updateItemDivision()">
                            <v-icon color="green darken-2">edit</v-icon>
                        </v-btn>
                        <v-btn v-else disabled class="ma-1" color="white" elevation="2" @click="updateItemDivision()">
                            <v-icon color="green darken-2">edit</v-icon>
                        </v-btn>
                    </v-toolbar>
                    <v-card elevation="0">
                        <p v-if="selected_item && selected_item.M_ItemID > 0" class="pa-2" style="color: blue;">
                            Item Terpilih : {{ selected_item.M_ItemDesc }}
                        </p>
                        <p v-else class="pa-2" style="color: blue;">
                            Item Terpilih : -
                        </p>

                        <v-divider></v-divider>

                        <v-data-table :headers="headersl" :items="vitemdivisions" :loading="isLoadingr" hide-actions>
                            <template slot="items" slot-scope="props">
                                <td class="text-xs-left pa-2"
                                    v-bind:class="{ 'green lighten-4': isSelectedDivisionList(props.item) }"
                                    @click="selectedMeDivisionList(props.item)">
                                    <v-checkbox class="mt-2" :input-value="props.item.IsChecked == '1'"
                                        @change="onSelectedChecked(props.item)" />
                                </td>
                                <td class="text-xs-left pa-2"
                                    v-bind:class="{ 'green lighten-4': isSelectedDivisionList(props.item) }"
                                    @click="selectedMeDivisionList(props.item)">{{ props.item.DivisionName }}</td>
                            </template>
                        </v-data-table>

                        <v-divider></v-divider>
                        <!-- <v-flex xs12 class="text-xs-left pt-3 pb-3">
                            <v-pagination v-model="curr_pager" :length="xtotal_pager"></v-pagination>
                        </v-flex> -->
                    </v-card>
                    <!-- table list end -->
                </v-card>
            </v-flex>
            <!-- kanan end -->
        </v-layout>


        <!-- dialog delete start -->
        <template>
            <v-dialog v-model="dialogdeletealecoa" 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>
                                                {{ msgalertcoa }}
                                            </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="dialogdeletealecoa = false">
                            Tutup
                        </v-btn>
                        <v-btn color="primary" @click="closeDeleteAlertCoa()">
                            Ya
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </template>
        <!-- dialog delete end -->

        <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 {
            formatreport: "pdf",
            urlprint: "",
            printtitle: "",
            printwidth: "100%",
            page: 1,
            headers: [
                {
                    text: "CATEGORY",
                    align: "center",
                    sortable: false,
                    value: "date",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "CODE",
                    align: "center",
                    sortable: false,
                    value: "jurnal",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NAME",
                    align: "center",
                    sortable: false,
                    value: "location",
                    width: "20%",
                    class: "blue lighten-3 white--text",
                },
            ],

            headersl: [
                {
                    text: "#",
                    align: "start",
                    sortable: false,
                    value: "M_ItemDivisionID",
                    width: "20%",
                    class: "pa-3 blue darken-3 white--text"
                },
                {
                    text: "DIVISION NAME",
                    align: "left",
                    sortable: false,
                    sort: false,
                    value: "DivisionName",
                    width: "80%",
                    class: "pa-2 blue darken-3 white--text"
                },
            ],
            dialogdeletealecoa: false,
            msgalertcoa: "",
        }
    },
    mounted() {
        this.$store.dispatch("a_itemdiv/searchItemA", {
            current_page: this.$store.state.a_itemdiv.a_current_page,
            search_item: this.$store.state.a_itemdiv.a_x_search,
            itemCategoryID: -1,
            last_id: -1,
        });

        this.$store.dispatch("a_itemdiv/getDropdownCategoryA");
    },
    computed: {
        dialoggagal: {
            get() {
                return this.$store.state.a_itemdiv.dialog_gagal;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_dialog_gagal", val);
            },
        },
        dialogsuccess: {
            get() {
                return this.$store.state.a_itemdiv.dialog_success;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_dialog_success", val);
            },
        },
        msgsuccess() {
            return this.$store.state.a_itemdiv.msg_success;
        },
        msggagal() {
            return this.$store.state.a_itemdiv.msg_gagal;
        },
        opendialoginfo: {
            get() {
                return this.$store.state.a_itemdiv.a_open_dialog_info;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_a_open_dialog_info", false);
            },
        },
        msginfo: {
            get() {
                return this.$store.state.a_itemdiv.a_msg_info;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_a_msg_info", false);
            },
        },
        snackbar: {
            get() {
                return this.$store.state.a_itemdiv.a_alert_success;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_a_alert_success", val);
            },
        },
        msgSnackbar() {
            return this.$store.state.a_itemdiv.a_msg_success;
        },
        dialog_error: {
            get() {
                return this.$store.state.a_itemdiv.a_alert_error;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_a_alert_error", val);
            },
        },
        msgError() {
            return this.$store.state.a_itemdiv.a_save_error_message;
        },

        // search table start
        xitems() {
            return this.$store.state.a_itemdiv.items;
        },
        isLoading() {
            return this.$store.state.a_itemdiv.a_search_status === 1;
        },
        isLoadingr() {
            return this.$store.state.a_itemdiv.a_search_statusr === 1;
        },
        xsearch: {
            get() {
                return this.$store.state.a_itemdiv.a_x_search;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_a_x_search", val);
            },
        },
        curr_page: {
            get() {
                return this.$store.state.a_itemdiv.a_current_page;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_a_current_page", val);
                this.$store.commit("a_itemdiv/update_a_last_id", -1);
                this.searchItem();
            },
        },
        xtotal_page: {
            get() {
                return this.$store.state.a_itemdiv.total_item;
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_total_item", val);
            },
        },
        // search table end

        // selected item
        selected_item() {
            return this.$store.state.a_itemdiv.selected_item
        },

        // dropdown category
        xcategorys() {
            return this.$store.state.a_itemdiv.categorys
        },
        selected_category: {
            get() {
                return this.$store.state.a_itemdiv.selected_category
            },
            set(val) {
                this.$store.commit("a_itemdiv/update_selected_category", val)
            }
        },

        // array itemdivision
        itemDivisionArr() {
            return this.$store.state.a_itemdiv.item_division_arr;
        },

        vitemdivisions() {
            return this.$store.state.a_itemdiv.itemdivisions;
        }
    },
    methods: {
        closeDialogGagal() {
            this.$store.commit("a_itemdiv/update_dialog_gagal", false);
        },

        closeDialogSuccess() {
            this.$store.commit("a_itemdiv/update_dialog_success", false);
        },

        updateItemDivision() {
            // console.log("selected_item", this.selected_item);
            // console.log("itemDivisionArr.length", this.itemDivisionArr.length);
            // console.log('item division add ', this.$store.state.a_itemdiv.item_division_arr)
            this.$store.dispatch("a_itemdiv/updateItemDivisionA");
        },
        onSelectedChecked(item) {
            const updatedItem = {
                ...item,
                IsChecked: item.IsChecked === "1" ? "0" : "1"
            }

            this.$store.commit("a_itemdiv/update_itemdivision_arr", updatedItem);
        },
        searchItem() {
            let itemCategoryID = 0;

            const selected = this.$store.state.a_itemdiv.selected_category;

            if (selected && typeof selected === 'object' && Object.keys(selected).length > 0) {
                itemCategoryID = selected.itemCategoryID;
            }

            this.$store.dispatch("a_itemdiv/searchItemA", {
                current_page: this.$store.state.a_itemdiv.a_current_page,
                search_item: this.$store.state.a_itemdiv.a_x_search,
                itemCategoryID: itemCategoryID,
                last_id: -1,
            });
        },
        updateAlertSuccess(val) {
            this.$store.commit("a_itemdiv/update_a_alert_success", val);
        },
        isSelected(p) {
            return p.M_ItemID == this.$store.state.a_itemdiv.selected_item.M_ItemID
        },
        selectMe(selected) {
            if (selected && typeof selected === 'object' && Object.keys(selected).length > 0) {
                this.$store.commit("a_itemdiv/update_selected_item", selected);
                this.$store.dispatch("a_itemdiv/itemDivisionListA");
            } else {
                console.log('Object Item Selected');
            }
        },

        // division check
        isSelectedDivisionList(p) {
            return p.M_ItemDivisionID == this.$store.state.a_itemdiv.selected_itemdivision.M_ItemDivisionID
        },

        selectedMeDivisionList(selected) {
            if (selected && typeof selected === 'object' && Object.keys(selected).length > 0) {
                this.$store.commit("a_itemdiv/update_selected_itemdivision", selected);
            } else {
                console.log('Object Division List Not Selected');
            }
        },
    },
    watch: {
    },
};