<template>
    <v-card class="pa-2">
        <v-layout row wrap>
            <v-flex xs class="px-1">
                <v-menu
                    v-model="menuStartDate"
                    lazy offset-y full-width
                    max-width="290px" min-width="290px"
                    transition="scale-transition"
                    :close-on-content-click="false"
                    :nudge-right="40"
                >
                    <template v-slot:activator="{ on }">
                        <v-text-field
                            v-model="computedStartDate" label="Start Date"
                            readonly v-on="on" outline hide-details
                        ></v-text-field>
                    </template>
                    <v-date-picker v-model="startdate" @input="menuStartDate = false" no-title></v-date-picker>
                </v-menu>
            </v-flex>
            <v-flex xs class="px-1">
                <v-menu
                    v-model="menuEndDate"
                    lazy offset-y full-width
                    max-width="290px" min-width="290px"
                    transition="scale-transition"
                    :close-on-content-click="false"
                    :nudge-right="40"
                >
                    <template v-slot:activator="{ on }">
                        <v-text-field
                            v-model="computedEndDate" label="End Date"
                            readonly v-on="on" outline hide-details
                        ></v-text-field>
                    </template>
                    <v-date-picker v-model="enddate" @input="menuEndDate = false" no-title></v-date-picker>
                </v-menu>
            </v-flex>
            <v-flex xs class="px-1">
                <v-autocomplete
                    outline v-model="selected_regional"
                    :items="regional" label="Regional" hide-details
                    item-text="S_RegionalName" return-object @input="changeRegional"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs class="px-1">
                <v-autocomplete
                    outline v-model="selected_branch"
                    :items="branch" label="Cabang" hide-details
                    item-text="M_BranchName" return-object :clearable="true"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs class="px-1">
                <v-autocomplete
                    outline v-model="selected_status"
                    :items="l_status" label="Status" 
                    :clearable="true" hide-details
                ></v-autocomplete>
            </v-flex>
            <v-flex xs>
                <v-btn color="primary" class="white--text" @click="search_pr()">CARI</v-btn>
            </v-flex>
        </v-layout>
    </v-card>
</template>

<style scoped>
    
</style>

<script>
    module.exports = {
        mounted() {
            this.$store.dispatch("listingpr/getregional", {search: ""})
        },
        data() {
            return {
                menuStartDate: false,
                menuEndDate: false,
                l_status: ["SEMUA", "NEW", "READ"]
            }
        },
        computed: {
            startdate: {
                get() {
                    return this.$store.state.listingpr.startdate
                },
                set(val) {
                    this.$store.commit("listingpr/update_startdate", val)
                }
            },
            computedStartDate() {
                return this.formatDate(this.startdate)
            },
            enddate: {
                get() {
                    return this.$store.state.listingpr.enddate
                },
                set(val) {
                    this.$store.commit("listingpr/update_enddate", val)
                }
            },
            computedEndDate() {
                return this.formatDate(this.enddate)
            },
            regional() {
                return this.$store.state.listingpr.regional
            },
            selected_regional: {
                get() {
                    return this.$store.state.listingpr.selected_regional
                },
                set(val) {
                    this.$store.commit("listingpr/update_selected_regional", val)
                }
            },
            branch() {
                return this.$store.state.listingpr.branch
            },
            selected_branch: {
                get() {
                    return this.$store.state.listingpr.selected_branch
                },
                set(val) {
                    this.$store.commit("listingpr/update_selected_branch", val)
                }
            },
            selected_status: {
                get() {
                    return this.$store.state.listingpr.selected_status
                },
                set(val) {
                    this.$store.commit("listingpr/update_selected_status", val)
                }
            }
        },
        methods: {
            formatDate(date) {
                if (!date) return null
                const [year, month, day] = date.split('-')
                return `${day}-${month}-${year}`
            },
            async search_pr() {
                if (Object.keys(this.selected_regional).length === 0) {
                    return
                }

                let params = {
                    currpage: 1,
                    startdate: this.startdate,
                    enddate: this.enddate,
                    regional: this.selected_regional.S_RegionalID,
                    branch: !this.selected_branch ? "" : this.selected_branch.M_BranchCode,
                    status: this.selected_status
                }
                this.$store.dispatch("listingpr/getlistingpurchase", params)
            },
            async changeRegional(item) {
                this.selected_branch = {}
                let params = {regionalID: item.S_RegionalID}
                await this.$store.dispatch("listingpr/getbranch", params)
            }
        },
        watch: {
            
        },
    }
</script>