<template>
    <v-dialog v-model="dialog_pick_contract" persistent width="50vw">
        <v-card>
            <v-card-title class="headline grey lighten-2">PILIH KONTRAK ORDER ASET</v-card-title>
            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12>
                        <v-autocomplete :items="[]" :loading="loading" hide-no-data cache-items outline
                            :search-input.sync="searchkey" label="Kontrak Order Aset" return-object
                            v-model="temp_selected" hide-details></v-autocomplete>
                    </v-flex>
                    <v-flex xs12 mt-2>
                        <v-data-table :headers="headers" :items="[]" class="elevation-1" hide-actions>
                            <template v-slot:items="props">
                                <tr>
                                    <td class="text-xs-start pa-2">
                                        {{ }}
                                    </td>
                                    <td class="text-xs-start pa-2">
                                        {{ }}
                                    </td>
                                    <td class="text-xs-start pa-2">
                                        {{ }}
                                    </td>
                                </tr>
                            </template>
                        </v-data-table>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn @click="cancelPickContract()" color="error" class="white--text">Batal</v-btn>
                <v-btn @click="pickContractOrder()" color="primary" class="white--text">Simpan</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
module.exports = {
    data() {
        return {
            searchkey: "",
            loading: false,
            temp_selected: null,
            headers: [
                {
                    text: "ITEM", align: "center", sortable: false, value: "date",
                    width: "60%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "UNIT", align: "center", sortable: false, value: "date",
                    width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
                {
                    text: "SATUAN", align: "center", sortable: false, value: "date",
                    width: "20%", class: "pa-1 blue lighten-3 white--text",
                },
            ]
        }
    },
    computed: {
        dialog_pick_contract: {
            get() {
                return this.$store.state.roasset.dialog_pick_contract;
            },
            set(val) {
                this.$store.commit("roasset/update_dialog_pick_contract", val);
            }
        }
    },
    methods: {
        cancelPickContract() {
            this.dialog_pick_contract = false;
        },
        pickContractOrder() { }
    },
    watch: {}
}
</script>
