<template>
    <v-layout class="fill-height" column>
        <v-card class="mb-2 pa-2 ">
            <v-layout align-center row style="padding: 30px;">

            </v-layout>
        </v-card>        
        <v-card>
            <v-layout align-center row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="xlogapi" :isLoading="isLoading" hide-actions
                        class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <tr>
                                <td class="text-xs-left pa-2">
                                <pre>{{ props.item.log_ApiParam }}</pre>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
        </v-card>
    </v-layout>
</template>

<style scoped>
.notlunas {
    color: #c42d2d;
}

.cito {
    color: rgba(255, 255, 255, 0.945);
    background-color: #fb8c0087;
}

.citoo {
    color: #c42d2d;
}

span.xtd {
    margin-right: 10px;
}

.searchbox .v-input.v-text-field .v-input__slot {
    min-height: 40px;
}

.searchbox .v-btn {
    min-height: 40px;
}

table.v-table tbody td,
table.v-table tbody th {
    height: 40px;
}

table.v-table thead tr {
    height: 40px;
}

.v-messages {
    min-height: 0px !important;
}

.cursor_pointer {
    cursor: 'pointer' !important;
}
</style>

<script>
module.exports = {
    components: {

    },
    data() {
        return {
            headers: [
                {
                    text: "RAW DATA",
                    align: "center",
                    sortable: false,
                    value: "name",
                    width: "50%",
                    class: "pa-2 blue darken-2 white--text"
                }
            ],
        }
    },
    mounted() {

    },
    methods: {
        thr_search_log_api: _.debounce(function () {
            this.$store.dispatch("result/lookup_logapi")
        }, 1000),
    },
    computed: {
        xlogapi() {
            return this.$store.state.result.logapis
        },
        isLoading() {
            return this.$store.state.result.lookup_status
        },
        selected_result_id() {
            return this.$store.state.result.selected_result_id
        }
    },
    watch: {
        selected_result_id(val, old) {
            this.thr_search_log_api()
        }
    },
}
</script>
