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

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

        <!-- Table -->
        <table class="table">
            <thead>
            <tr>
                <th>path</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in state.dataProvider.files">
                    <td>
                        <span class="detail" @click="detail(item, index)">{{ item }}</span>
                        <div ref="detailWrapper" style="white-space: pre">

                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<style scoped>
    .detail{
        cursor: pointer;
    }
    .detail:hover{
        color: #0000FF;
    }
</style>
<script>
    const { createApp, reactive, ref } = Vue

    createApp({
        setup() {
            const detailWrapper = ref(null)
            const state = reactive({
                dataProvider: {
                    files: <?= json_encode($files) ?>,
                },
                searchDataProvider: {
                    date: '<?= date('Y-m-d', time()) ?>'
                }
            })

            function fetchData() {
                fetch('/api/dashboard/exception', {
                    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.files = res.data
                    this.detailWrapper.forEach(element => {
                        element.innerHTML = '';
                    });
                })
            }

            function detail(path, index) {
                console.log('点了', index)
                fetch('/api/dashboard/exception/detail', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    body: Qs.stringify({
                        path: path
                    })
                }).then(res => res.json()).then(res => {
                    // state.dataProvider = res.data
                    this.detailWrapper[index].innerHTML = res.data[0]
                })
            }
            return {
                detailWrapper,
                detail,
                fetchData,
                state
            }
        }
    }).mount('#app')
</script>
