<?php
$this->layout('layout/dashboardLayout');
?>

<div id="app">
    <div class="navbar-form" role="search">
        <div class="form-group">
            <input v-model="state.searchDataProvider.params" type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default" @click="fetchData">Submit</button>
    </div>

    <div class="panel panel-default">
        <!-- Table -->
        <table class="table">
            <thead>
            <tr>
                <th>value</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in state.dataProvider">
                <td>{{ item }}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    const { createApp, reactive } = Vue

    createApp({
        setup() {
            const state = reactive({
                dataProvider: {},
                searchDataProvider: {
                    params: 'get key'
                }
            })

            function fetchData() {
                fetch('/api/dashboard/redis', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    body: Qs.stringify(state.searchDataProvider)
                }).then(res => res.json()).then(res => {
                    state.dataProvider = res.data
                    console.log(res)
                })
            }
            return {
                fetchData,
                state
            }
        }
    }).mount('#app')
</script>
