<template>
    <div>
        <!-- first row -->
        <v-layout row wrap>
            <v-flex xs4 pa-1>
                <v-menu
                    v-model="menuPOdate" offset-y lazy min-width="290px"
                    transition="scale-transition" max-width="290px" full-width
                    :nudge-right="40" :close-on-content-click="false"
                >
                    <template v-slot:activator="{on}">
                        <v-text-field
                            v-model="formatPOdate" label="Tanggal PO"
                            hide-details readonly v-on="on" outline
                        ></v-text-field>
                    </template>
                    <v-date-picker
                        v-model="form_order_asset.podate" no-title
                        @input="menuPOdate = false"
                    ></v-date-picker>
                </v-menu>
            </v-flex>
            <v-flex xs4 pa-1>
                <v-autocomplete
                    :items="list_supplier" hide-details outline
                    v-model="form_order_asset.supplierID" label="Supplier"
                    item-text="SupplierName" item-value="SupplierID"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs4 pa-1>
                <v-text-field
                    v-model="form_order_asset.reference" hide-details outline
                    label="Referensi" placeholder="nomor request" readonly
                ></v-text-field>
            </v-flex>
        </v-layout>

        <!-- 2nd row -->
        <v-layout row wrap>
            <v-flex xs4 pa-1>
                <v-autocomplete
                    :items="list_cabang" hide-details outline
                    v-model="form_order_asset.branchID" label="Cabang"
                    item-text="M_BranchName" item-value="M_BranchID"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-autocomplete
                    :items="['nominal', 'persen']" label="Tipe Nilai"
                    v-model="form_order_asset.typepajak" hide-details outline
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-if="form_order_asset.typepajak == 'persen'" label="Pajak"
                    v-model="form_order_asset.valuepajak" hide-details outline
                    placeholder="besar pajak dalam persen" suffix="%"
                ></v-text-field>
                <v-text-field
                    v-else label="Pajak" outline prefix="Rp."
                    v-model="form_order_asset.valuepajak" hide-details
                    placeholder="besar pajak dalam rupiah"
                ></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-autocomplete
                    :items="['nominal', 'persen']" hide-details outline
                    v-model="form_order_asset.typediskon" label="Tipe Nilai"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-if="form_order_asset.typediskon == 'persen'" label="Diskon"
                    v-model="form_order_asset.valuediskon" hide-details outline
                    placeholder="besar diskon dalam persen" suffix="%"
                ></v-text-field>
                <v-text-field
                    v-else label="Diskon" outline prefix="Rp."
                    v-model="form_order_asset.valuediskon" hide-details
                    placeholder="besar diskon dalam rupiah"s
                ></v-text-field>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            menuPOdate: false,
        }
    },
    computed: {
        form_order_asset: {
            get() {
                return this.$store.state.orderAsset.form_order_asset;
            },
            set(val) {
                this.$store.commit('orderAsset/update_form_order_asset', val);
            }
        },
        formatPOdate() {
            return this.formatDate(this.form_order_asset.podate);
        },
        list_supplier() {
            return this.$store.state.orderAsset.list_supplier;
        },
        list_cabang() {
            return this.$store.state.orderAsset.list_cabang;
        }
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split('-');
            return `${day}-${month}-${year}`;
        },
    }
}
</script>
