<template>
    <v-layout row wrap>
        <v-flex xs12>
            <v-toolbar color="primary" dark>
                <v-toolbar-title class="white--text">DAFTAR PERMINTAAN TRANSFER (NON PERSEDIAAN)</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-btn icon @click="newForm()">
                    <v-icon>add_box</v-icon>
                </v-btn>
            </v-toolbar>

            <v-card class="pa-2">
                <v-layout row wrap>
                    <v-flex xs2 class="pr-1">
                        <v-menu
                            v-model="menuStartDate" lazy offset-y full-width
                            :close-on-content-click="false" :nudge-right="40"
                            transition="scale-transition" max-width="290px" min-width="290px"
                        >
                            <template v-slot:activator="{on}">
                                <v-text-field 
                                    v-model="startDateFormated" label="Tanggal Awal"
                                    hide-details v-on="on" readonly outline
                                ></v-text-field>
                            </template>
                            <v-date-picker no-title v-model="filter_sdate" @input="menuStartDate = false"></v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-flex xs2 class="px-1">
                        <v-menu
                            v-model="menuEndDate" lazy offset-y full-width
                            :close-on-content-click="false" :nudge-right="40"
                            transition="scale-transition" max-width="290px" min-width="290px"
                        >
                            <template v-slot:activator="{on}">
                                <v-text-field
                                    v-model="endDateFormated" label="Tanggal Akhir"
                                    readonly outline hide-details v-on="on"
                                ></v-text-field>
                            </template>
                            <v-date-picker no-title v-model="filter_edate" @input="menuEndDate = false"></v-date-picker>
                        </v-menu>
                    </v-flex>
                    <v-flex xs3 class="px-1">
                        <v-autocomplete
                            v-model="filter_cabang" :items="listing_cabang" label="Cabang"
                            outline hide-details return-object item-text="M_BranchName"
                        ></v-autocomplete>
                    </v-flex>
                    <v-flex xs2 class="px-1">
                        <v-autocomplete
                            v-model="filter_status" :items="listing_status" 
                            outline hide-details label="Status"
                        ></v-autocomplete>
                    </v-flex>
                    <v-flex xs2 class="px-1">
                        <v-text-field v-model="filter_search" label="No Transfer" outline hide-details></v-text-field>
                    </v-flex>
                    <v-flex xs1 class="pl-1">
                        <v-btn
                            dark color="primary" @click="cariTF()"
                            style="min-width: 50px; height: 100%; margin: 0;"
                        >
                            <v-icon>search</v-icon>
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-card>

            <v-card class="pa-2 mt-2">
                <v-data-table
                    :headers="headers" :items="listing_tf_req.records" :loading="false"
                    hide-actions class="elevation-1 mb-2"
                >
                    <template v-slot:items="props">
                        <tr @click="selectTF(props.item)" :class="{'yellow lighten-4':isSelected(props.item)}">
                            <td class="text-xs-center pa-2">{{ deformatDate(props.item.T_GoodsTransferDate) }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.M_BranchName }}</td>
                            <td class="text-xs-center pa-2">{{ props.item.T_GoodsTransferNum }}</td>
                            <td class="text-xs-center pa-2">
                                <v-chip small>
                                    {{ props.item.T_GoodsTransferStatus }}
                                </v-chip>
                            </td>
                            <td class="text-xs-center pa-2">
                                <!-- <v-icon small class="mr-2" @click="updateTF(props.item)">edit</v-icon> -->
                                <!-- <v-icon 
                                    small class="ml-2" 
                                    @click="deleteTF(props.item)"
                                    :disabled="props.item.T_GoodsTransferStatus != 'Draft'"
                                >
                                    delete
                                </v-icon> -->
                                <v-tooltip bottom>
                                    <template v-slot:activator="{on}">
                                        <v-btn
                                            style="min-width: 25px; height: 25px; margin: 0;" outline 
                                            small @click="{}" color="blue lighten-2" v-on="on"
                                        >
                                            <v-icon small>picture_as_pdf</v-icon>
                                        </v-btn>
                                    </template>
                                    <span>View PDF</span>
                                </v-tooltip>
                                <v-btn
                                    style="min-width: 25px; height: 25px; margin: 0;" outline 
                                    small @click="deleteTF(props.item)" color="red lighten-2"
                                    :disabled="props.item.T_GoodsTransferStatus != 'Draft'" 
                                >
                                    <v-icon small>delete</v-icon>
                                </v-btn>
                            </td>
                        </tr>
                    </template>
                </v-data-table>
                <v-divider></v-divider>
                <div class="pa-2 mt-2 text-xs-center">
                    <v-pagination v-model="listing_tf_page" :length="listing_length" :total-visible="5"></v-pagination>
                </div>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
    module.exports = {
        components: {},
        mounted() {
            this.$store.dispatch("np_data/getBranches")
            this.$store.dispatch("np_form/newForm")
            this.$store.dispatch("np_data/cariTF")
            this.$store.dispatch("np_data/userLevel")
        },
        data() {
            return {
                menuStartDate: false,
                menuEndDate: false,
                headers: [
                    {
                        text: "TANGGAL",
                        align: "center",
                        sortable: false,
                        value: "requestDate",
                        width: "20%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "CABANG",
                        align: "center",
                        sortable: false,
                        value: "requestDate",
                        width: "25%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "NO. TRANSFER",
                        align: "center",
                        sortable: false,
                        value: "requestDate",
                        width: "20%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "STATUS",
                        align: "center",
                        sortable: false,
                        value: "requestDate",
                        width: "15%",
                        class: "blue lighten-3 white--text",
                    },
                    {
                        text: "AKSI",
                        align: "center",
                        sortable: false,
                        value: "requestDate",
                        width: "20%",
                        class: "blue lighten-3 white--text",
                    },
                ]
            }
        },
        computed: {
            filter_sdate: {
                get() {
                    return this.$store.state.np_data.filter_sdate
                },
                set(val) {
                    this.$store.commit("np_data/update_filter_sdate", val)
                }
            },
            filter_edate: {
                get() {
                    return this.$store.state.np_data.filter_edate
                },
                set(val) {
                    this.$store.commit("np_data/update_filter_edate", val)
                }
            },
            filter_cabang: {
                get() {
                    return this.$store.state.np_data.filter_cabang
                },
                set(val) {
                    this.$store.commit("np_data/update_filter_cabang", val)
                }
            },
            filter_status: {
                get() {
                    return this.$store.state.np_data.filter_status
                },
                set(val) {
                    this.$store.commit("np_data/update_filter_status", val)
                }
            },
            filter_search: {
                get() {
                    return this.$store.state.np_data.filter_search
                },
                set(val) {
                    this.$store.commit("np_data/update_filter_search", val)
                }
            },
            listing_cabang: {
                get() {
                    return this.$store.state.np_data.listing_cabang
                },
                set(val) {
                    this.$store.commit("np_data/update_listing_cabang", val)
                }
            },
            listing_status: {
                get() {
                    return this.$store.state.np_data.listing_status
                },
                set(val) {
                    this.$store.commit("np_data/update_listing_status", val)
                }
            },
            listing_tf_req: {
                get() {
                    return this.$store.state.np_data.listing_tf_req
                },
                set(val) {
                    this.$store.commit("np_data/update_listing_tf_req", val)
                }
            },
            listing_tf_page: {
                get() {
                    return this.$store.state.np_data.listing_tf_page
                },
                set(val) {
                    this.$store.commit("np_data/update_listing_tf_page", val)
                    this.$store.dispatch("np_data/cariTF")
                }
            },
            selected_tf: {
                get() {
                    return this.$store.state.np_data.selected_tf
                },
                set(val) {
                    this.$store.commit("np_data/update_selected_tf", val)
                }
            },
            snackbar: {
                get() {
                    return this.$store.state.np_data.snackbar
                },
                set(val) {
                    this.$store.commit("np_data/update_snackbar", val)
                }
            },
            startDateFormated() {
                return this.formatDate(this.filter_sdate)
            },
            endDateFormated() {
                return this.formatDate(this.filter_edate)
            },
            listing_length() {
                let total = this.listing_tf_req.total
                if (total == undefined || total == 0) {
                    return 1
                }
                return Math.ceil(total/10)
            }
        },
        methods: {
            formatDate(date) {
                if (!date) return null

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

                const [day, month, year] = date.split("-")
                return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
            },
            newForm() {
                this.$store.dispatch("np_form/newForm")
            },
            cariTF() {
                this.$store.dispatch("np_data/cariTF")
            },
            selectTF(data) {
                this.selected_tf = data
                this.$store.commit("np_form/update_type_act", 'EDIT')
                this.$store.dispatch("np_form/displayDetail", { }, { root: true })
            },
            isSelected(data) {
                return data.T_GoodsTransferID === this.selected_tf.T_GoodsTransferID
            },
            deleteTF(data) {
                if (data.T_GoodsTransferID != "") {
                    this.$store.dispatch("np_form/deleteTFReq", { GoodsTfID: data.T_GoodsTransferID })
                }
            }
        },
    }
</script>