<template>
    <div>
        <v-layout row wrap>
            <v-flex xs4 pa-1>
                <v-text-field
                    :value="formattedPOdate" label="Tanggal PO"
                    hide-details readonly outline
                ></v-text-field>
            </v-flex>
            <v-flex xs4 pa-1>
                <v-autocomplete
                    :items="list_supplier" hide-details outline disabled
                    v-model="form_order.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.reference" hide-details outline
                    label="Referensi" placeholder="nomor request" readonly
                ></v-text-field>
            </v-flex>
        </v-layout>

        <v-layout row wrap>
            <v-flex xs2 pa-1>
                <v-autocomplete
                    :items="list_cabang" hide-details outline disabled
                    v-model="form_order.branchID" label="Cabang"
                    item-text="M_BranchName" item-value="M_BranchID"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-autocomplete
                    :items="list_gudang" hide-details outline disabled
                    v-model="form_order.gudangID" label="Gudang"
                    item-text="WarehouseName" item-value="WarehouseID"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-autocomplete
                    :items="['nominal', 'percent']" label="Tipe Nilai"
                    v-model="form_order.typepajak" hide-details outline disabled
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-if="form_order.typepajak == 'percent'" label="Pajak"
                    v-model="form_order.valuepajak" hide-details outline
                    placeholder="besar pajak dalam persen" suffix="%" readonly
                ></v-text-field>
                <v-text-field
                    v-else label="Pajak" outline prefix="Rp."
                    v-model="form_order.valuepajak" hide-details
                    placeholder="besar pajak dalam rupiah" readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-autocomplete
                    :items="['nominal', 'percent']" hide-details outline disabled
                    v-model="form_order.typediskon" label="Tipe Nilai"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-if="form_order.typediskon == 'percent'" label="Diskon"
                    v-model="form_order.valuediskon" hide-details outline
                    placeholder="besar diskon dalam persen" suffix="%" readonly
                ></v-text-field>
                <v-text-field
                    v-else label="Diskon" outline prefix="Rp."
                    v-model="form_order.valuediskon" hide-details
                    placeholder="besar diskon dalam rupiah" readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs12 pa-1>
                <v-textarea
                    v-model="form_order.catatan" auto-grow readonly
                    rows="1" outline label="Catatan" hide-details
                ></v-textarea>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {

        }
    },
    computed: {
        form_order: {
            get() {
                return this.$store.state.formView.form_order
            },
            set(val) {
                this.$store.commit("formView/update_form_order", val)
            }
        },
        formattedPOdate() {
            return this.formatDate(this.form_order.podate);
        },
        list_cabang() {
            return this.$store.state.orderAsset.list_cabang;
        },
        list_gudang() {
            return this.$store.state.orderAsset.list_gudang;
        },
        list_supplier() {
            return this.$store.state.orderAsset.list_supplier;
        }
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split('-');
            return `${day}-${month}-${year}`;
        }
    }
}
</script>
