<template>
    <v-layout row>
        <v-flex xs6 pr-3>
            <v-layout column>
                <v-flex>
                    <v-text-field
                    model="mr"
                    label="No RM"
                    readonly
                    ></v-text-field>
                </v-flex>

                <v-flex>
                    <v-layout row>
                        <v-flex xs2>
                            <v-select
                            :items="d_pretitle"
                            item-text="text"
                            item-value="value"
                            label="Titel"
                            model="pretitle"
                            >

                            </v-select>
                            
                        </v-flex>

                        <v-flex xs8 pl-2 pr-2>
                            <v-text-field
                            label="Nama Lengkap"
                            model="name"
                            ></v-text-field>
                        </v-flex>
                        
                        <v-flex xs2>
                            <v-text-field
                            label="Gelar"
                            model="posttitle"
                            ></v-text-field>
                        </v-flex>
                    </v-layout>
                </v-flex>

                <v-flex>
                    <v-flex xs2>
                        <v-select
                        :items="d_sex"
                        item-text="text"
                        item-value="value"
                        label="Jenis Kelamin"
                        model="sex"
                        >

                        </v-select>
                    </v-flex>
                    
                </v-flex>

                <v-flex>
                    <v-layout row>
                        <v-flex xs10 pr-2>
                            <v-text-field
                            label="Tempat Lahir"
                            model="pob"
                            >

                            </v-text-field>
                        </v-flex>
                        <v-flex xs2>
                            <one-date-picker
                            label="Tanggal Lahir"
                            ></one-date-picker>
                        </v-flex>
                    </v-layout>
                    
                </v-flex>

                <v-flex>
                    <v-flex xs12>
                        <v-select
                        :items="d_religion"
                        item-text="text"
                        item-value="value"
                        label="Agama"
                        model="religion"
                        >

                        </v-select>
                    </v-flex>
                    
                </v-flex>
            </v-layout>
        </v-flex>

        <v-flex xs6 pl-3>
            <v-layout column>
                <v-flex>
                    <v-textarea
                    label="Alamat lengkap"
                    model="address"
                    row="2"
                    ></v-textarea>
                </v-flex>

                <v-flex>
                    <v-select
                    label="Propinsi"
                    model="province"
                    :items="d_province"
                    item-text="text"
                    item-value="value"
                    ></v-select>
                </v-flex>

                <v-flex>
                    <v-select
                    label="Kota"
                    model="city"
                    :items="d_city"
                    item-text="text"
                    item-value="value"
                    ></v-select>
                </v-flex>

                <v-flex>
                    <v-select
                    label="Kecamatan"
                    model="subdistrict"
                    :items="d_subdistrict"
                    item-text="text"
                    item-value="value"
                    ></v-select>
                </v-flex>

                <v-flex>
                    <v-select
                    label="Desa / Kelurahan"
                    model="village"
                    :items="d_village"
                    item-text="text"
                    item-value="value"
                    ></v-select>
                </v-flex>
            </v-layout>
        </v-flex>
    </v-layout>
</template>

<script>
module.exports = {
    components : {
        'one-date-picker': httpVueLoader('./oneDatePicker2.vue')
    },

    data () {
        return {
            pretitle: {text:'', value:'0'},
            name: '',
            posttitle: '',
            sex: {text:'', value:'0'},
            pob: '',
            dob: '',
            religion: {text:'', value:'0'},

            address: '',
            province: {text:'', value:'0'},
            city: {text:'', value:'0'},
            subdistrict: {text:'', value:'0'},
            village: {text:'', value:'0'},

            d_pretitle: [
                { text: 'Bpk', value: '1' },
                { text: 'Tn', value: '2' },
                { text: 'Ibu', value: '3' },
                { text: 'Ny', value: '4' },
                { text: 'Nn', value: '5' },
                { text: 'Anak', value: '6' },
                { text: 'Lainnya', value: '7' }
            ],

            d_sex: [
                { text: 'Laki - laki', value: '1' },
                { text: 'Perempuan', value: '2' }
            ],

            d_religion: [
                { text: 'Islam', value: '1' },
                { text: 'Kristen', value: '2' },
                { text: 'Katolik', value: '3' },
                { text: 'Hindu', value: '4' },
                { text: 'Buddha', value: '5' },
                { text: 'Lainnya', value: '6' }
            ],

            d_province: [
                { text: 'Jawa Barat', value: '1' },
                { text: 'Jawa Tengah', value: '1' },
                { text: 'Jawa Timur', value: '1' }
            ],

            d_city: [],
            d_subdistrict: [],
            d_village: []
        }
    }
}
</script>
