<template>
    <div>
        <v-layout row wrap>
            <v-flex xs3 pa-1>
                <v-text-field
                    v-model="form_kontrak.nama_kontrak" hide-details outline
                    label="Nama Kontrak" placeholder="masukan nama kontrak" readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-text-field
                    :value="formattedDateKontrak" hide-details readonly outline
                    label="Tanggal Kontrak"
                ></v-text-field>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-text-field
                    :value="formattedStartdateKontrak" outline hide-details
                    label="Tanggal Mulai Kontrak" readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-text-field
                    :value="formattedEnddateKontrak" outline hide-details
                    label="Tanggal Akhir Kontrak" readonly
                ></v-text-field>
            </v-flex>
        </v-layout>

        <v-layout row wrap>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-model="form_kontrak.durasi_cicilan" hide-details outline
                    placeholder="1" label="Durasi Kontrak (Bulan)" readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-model="form_kontrak.jumlah_cicilan" hide-details
                    placeholder="1" outline label="Jumlah Cicilan" readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-model="form_kontrak.tanggalBayar_cicilan" hide-details
                    placeholder="1" outline label="Tanggal Bayar Cicilan" readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs2 pa-1>
                <v-text-field
                    v-model="form_kontrak.besarNilai_cicilan" hide-details
                    label="Besar Bayar Cicilan" placeholder="0" prefix="Rp."
                    outline readonly
                ></v-text-field>
            </v-flex>
            <v-flex xs1 pa-1>
                <v-autocomplete
                    :items="['nominal', 'percent']" label="Tipe Nilai"
                    v-model="form_kontrak.type_downpayment" hide-details
                    outline disabled
                ></v-autocomplete>
            </v-flex>
            <v-flex xs3 pa-1>
                <v-text-field
                    v-if="form_kontrak.type_downpayment == 'percent'"
                    label="Jumlah Uang Muka" hide-details
                    v-model="form_kontrak.besarNilai_downpayment"
                    placeholder="0" suffix="%" outline readonly
                ></v-text-field>
                <v-text-field
                    v-else label="Jumlah Uang Muka" hide-details
                    placeholder="0" prefix="Rp." outline readonly
                    v-model="form_kontrak.besarNilai_downpayment"
                ></v-text-field>
            </v-flex>
        </v-layout>
    </div>
</template>

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

        };
    },
    computed: {
        form_kontrak: {
            get() {
                return this.$store.state.formView.form_kontrak;
            },
            set(val) {
                this.$store.commit("formView/update_form_kontrak", val);
            }
        },
        formattedDateKontrak() {
            return this.formatDate(this.form_kontrak.tanggal_kontrak);
        },
        formattedStartdateKontrak() {
            return this.formatDate(this.form_kontrak.tanggalAwal_kontrak);
        },
        formattedEnddateKontrak() {
            return this.formatDate(this.form_kontrak.tanggalAkhir_kontrak);
        },
    },
    methods: {
        formatDate(date) {
            if (!date) return null;
            const [year, month, day] = date.split('-');
            return `${day}-${month}-${year}`;
        }
    }
}
</script>
