<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 -->
        <v-layout row wrap>
            <v-flex xs12 fill-height>
                <v-toolbar color="primary" dark>
                <v-toolbar-title class="white--text"
                    >DEPARTEMENT</v-toolbar-title
                >
                <v-spacer></v-spacer>
                <v-btn icon @click="openDialogDepartement()">
                    <v-icon>add_box</v-icon>
                </v-btn>
                </v-toolbar>
                <v-card class="pa-2">
                        <v-layout>
                            <v-flex xs3 pl-2>
                                <v-text-field
                                    label="Cari..."
                                    placeholder="Kode atau Nama"
                                    outline
                                    v-model="xsearch"
                                    hide-details
                                ></v-text-field>
                            </v-flex>
                            <v-flex pl-2 pr-2>
                                <v-btn
                                    dark
                                    color="primary"
                                    style="min-width: 50px; height: 50px; margin: 0"
                                    @click="mainTableSearch()"
                                    >
                                    <v-icon>search</v-icon>
                                </v-btn>
                            </v-flex>
                        </v-layout>
                </v-card>
                <v-card class="pa-2 mt-2">
                    <v-layout row style="max-height: 600px; overflow: auto">
                        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                            <v-data-table
                                :items="departements"
                                :headers="headers"
                                :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.rownumber }}</td>
                                    <td
                                        class="text-xs-left pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >{{ props.item.M_DepartmentCode }}</td>
                                    <td
                                        class="text-xs-left pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >{{ props.item.M_DepartmentName }}</td>

                                    <td class="text-xs-center pa-2"
                                        v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                                        @click="selectMe(props.item)"
                                    >
                                        <v-icon small @click="openUpdateSupplier(props.item)"
                                        >edit</v-icon
                                        >
                                        <v-icon small @click="deleteSupplier(props.item)"
                                        >delete</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>
                </v-card>
            </v-flex>
        </v-layout>

        <!-- form -->
        <template>
            <v-layout row justify-center>
                <v-dialog v-model="dialogForm" persistent max-width="40vw">
                    <v-card>
                        <v-card-title class="headline grey lighten-2" primary-title>
                        FORM DEPARTEMENT
                        </v-card-title>
                        <v-card-text class="pt-2 pb-0">
                            <v-layout wrap>
                                <v-flex xs12 pa-2>
                                    <v-text-field
                                        label="Kode*"
                                        v-model="codeDepartment"
                                        hide-details
                                    ></v-text-field>
                                    <p v-if="checkErrorForm('requireCode')" class="error pl-2 pr-2" style="color:#fff">Kode harus diisi</p>
                                </v-flex>
                                <v-flex xs12 pa-2>
                                    <v-text-field
                                        label="Nama Departement*"
                                        v-model="nameDepartment"
                                        hide-details
                                    ></v-text-field>
                                    <p v-if="checkErrorForm('requireDepartementName')" class="error pl-2 pr-2" style="color:#fff">Nama harus diisi</p>
                                </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>

    </div>
</template>

<style scoped>
.date-type-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

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

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

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

<script>
module.exports = {
    components: {
        "dialog-form-voucher": httpVueLoader("./dialogFormVoucher.vue"),
        "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
        "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue")
    },
    data() {
        return {
            nameDepartment: "",
            IsPpn: false,
            IsPph: false,
            PpnPercent: 0,
            PphPercent: 0,
            xid: 0,
            dialogdeletealert: false,
            msgalertname: "",
            codeDepartment: "",
            headers: [
                {
                    text: "NO",
                    align: "left",
                    sortable: false,
                    value: "no",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "KODE",
                    align: "left",
                    sortable: false,
                    value: "date",
                    width: "30%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "NAMA",
                    align: "left",
                    sortable: false,
                    value: "total",
                    width: "50%",
                    class: "blue lighten-3 white--text",
                },
                {
                    text: "AKSI",
                    align: "left",
                    sortable: false,
                    value: "status",
                    width: "10%",
                    class: "blue lighten-3 white--text",
                },
            ],
        }
    },
    mounted() {
        this.$store.dispatch("departemen/search")
    },
    computed: {
        departements() {
            return this.$store.state.departemen.departements
        },
        isLoading() {
            return this.$store.state.departemen.search_status == 1
        },
        xsearch: {
            get() {
                return this.$store.state.departemen.xsearch
            },
            set(val) {
                this.$store.commit("departemen/update_xsearch", val)
            }
        },
        curr_page: {
            get() {
                return this.$store.state.departemen.current_page
            },
            set(val) {
                this.$store.commit("departemen/update_current_page", val)
                this.$store.commit("departemen/update_last_id", -1)
                this.$store.dispatch("departemen/search")
            }
        },
        xtotal_page: {
            get() {
                return this.$store.state.departemen.total_page
            },
            set(val) {
                this.$store.commit("departemen/update_total_page", val)
            }
        },
        dialogForm: {
            get() {
                return this.$store.state.departemen.dialog_form
            },
            set(val) {
                this.$store.commit("departemen/update_dialog_form", val)
            }
        },
        xact: {
            get() {
                return this.$store.state.departemen.act
            },
            set(val) {
                this.$store.commit("departemen/update_act", val)
            }
        },
        snackbar: {
            get() {
                return this.$store.state.departemen.alert_success
            },
            set(val) {
                this.$store.commit("departemen/update_alert_success", val)
            }
        },
        msgSnackbar() {
            return this.$store.state.departemen.msg_success;
        },
        dialog_error: {
            get() {
                return this.$store.state.departemen.alert_error
            },
            set(val) {
                this.$store.commit("departemen/update_alert_error", val)
            },
        },
        msgError() {
            return this.$store.state.departemen.save_error_message
        },
    },
    methods: {
        isSelected(p) {
            return p.M_DepartmentID == this.$store.state.departemen.selected_departement.M_DepartmentID
        },
        selectMe(sc) {
            this.$store.commit("departemen/update_selected_departement", sc)
        },
        thr_search: _.debounce(function () {
            this.$store.dispatch("departemen/search")
        }, 1000),
        mainTableSearch() {
            this.$store.dispatch("departemen/search")
            this.$store.commit("departemen/update_selected_departement", {})
        },
        openDialogDepartement() {
            this.$store.commit("departemen/update_dialog_form", true)
            this.$store.commit("departemen/update_act", "new")
            this.$store.commit("departemen/update_errors", [])
            this.codeDepartment = ""
            this.nameDepartment = ""
        },
        closeDialogForm() {
            this.$store.commit("departemen/update_dialog_form", false)
        },
        // check error form
        checkErrorForm(value) {
            var errors = this.$store.state.departemen.errors
            if (errors.includes(value)) {
                return true
            } else {
                return false
            }
        },

        clearPpnPercent() {
            if (this.PpnPercent === 0) {
                this.PpnPercent = ''
            }
        },
        resetPpnPercent() {
            if (this.PpnPercent === '' || this.PpnPercent === null) {
                this.PpnPercent = 0
            }
        },
        
        clearPphPercent() {
            if (this.PphPercent === 0) {
                this.PphPercent = ''
            }
        },
        resetPphPercent() {
            if (this.PphPercent === '' || this.PphPercent === null) {
                this.PphPercent = 0
            }
        },

        // save
        saveForm() {
            this.$store.commit("departemen/update_errors", [])
            var errors = this.$store.state.departemen.errors
            
            if(_.isEmpty(this.codeDepartment)){
                errors.push("requireCode")
            }
            if(_.isEmpty(this.nameDepartment)){
                errors.push("requireDepartementName")
            }

            if (errors.length === 0) {
                this.$store.commit("departemen/update_errors", [])

                var prm = {
                    codeDepartment: this.codeDepartment,
                    nameDepartment: this.nameDepartment
                }
                this.$store.dispatch("departemen/save", prm)  
            }
        },

        openUpdateSupplier(val) {
            this.$store.commit("departemen/update_errors", [])
            this.$store.commit("departemen/update_dialog_form", true)
            this.$store.commit("departemen/update_act", "edit")
            this.codeDepartment = val.M_DepartmentCode
            this.nameDepartment = val.M_DepartmentName
            this.xid = val.M_DepartmentID
        },

        updateForm() {
            this.$store.commit("departemen/update_errors", [])
            var errors = this.$store.state.departemen.errors
            
            if(_.isEmpty(this.codeDepartment)){
                errors.push("requireCode")
            }
            if(_.isEmpty(this.nameDepartment)){
                errors.push("requireDepartementName")
            }

            if (errors.length === 0) {
                this.$store.commit("departemen/update_errors", [])

                var prm = {
                    codeDepartment: this.codeDepartment,
                    nameDepartment: this.nameDepartment,
                    departmentId: this.xid
                }
                this.$store.dispatch("departemen/update", prm)  
            }
        },

        deleteSupplier(val) {
            this.xid = val.M_DepartmentID
            this.msgalertname = val.M_DepartmentCode + " " + val.M_DepartmentName
            this.dialogdeletealert = true
        },
        closeDeleteAlert() {
            this.dialogdeletealert = false
            this.$store.dispatch("departemen/deleteDep", {
                departmentId: this.xid
            })
        }
    },
    watch: {
        xsearch(val, old) {
            this.xsearch = val
            this.thr_search()
        },
    }
}
</script>