<template>
    <div>
        <v-card class="pa-4 rounded-lg" elevation="0">
            <v-toolbar color="amber-lighten-5 rounded-md" density="compact">
                <v-toolbar-title class="text-title-1 font-weight-bold">KEL. PELANGGAN DAN AGREEMENT</v-toolbar-title>
            </v-toolbar>
            <div class="mt-4">
                <v-select 
                    :items="kelpelanggan" return-object class="mb-2" hide-details="auto" color="primary"
                    density="compact" label="Kel. Pelanggan" item-title="name" variant="outlined"
                ></v-select>
                <v-select 
                    :items="agreement" return-object hide-details="auto" color="primary"
                    density="compact" label="Agreement" item-title="name" variant="outlined"
                ></v-select>
            </div>
        </v-card>
    </div>
</template>

<script>
    export default {
        name: "pelangganagreementcomp",
        components: {},
        mounted() {},
        data() {
            return {
                kelpelanggan: [
                    { id: 1, name: "sasone 2024" },
                    { id: 2, name: "sasone 2023" },
                ],
                agreement: [
                    { id: 1, name: "mcu karyawan 2024" },
                    { id: 2, name: "mcu karyawan 2023" }
                ]
            }
        },
        computed: {
            
        },
        methods: {
            
        },
    }
</script>