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

<div id="app">
    <div class="panel panel-default">
        <div class="navbar-form" role="search">
            <button :disabled="state.isTesting" type="submit" class="btn btn-default" @click="fetchData()">测试</button>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                <div ref="response"style="white-space: pre">
                    {{ state.dataProvider }}
                </div>
            </div>
        </div>
    </div>
</div>
<style scoped>
    .detail{
        cursor: pointer;
    }
    .detail:hover{
        color: #0000FF;
    }
</style>
<script>
    const { createApp, reactive, ref } = Vue

    createApp({
        setup() {
            const response = ref(null)
            const state = reactive({
                isTesting: false,
                dataProvider: '',
                searchDataProvider: {
                    date: '<?= date('Y-m-d', time()) ?>'
                }
            })

            function fetchData() {
                state.isTesting = true;
                state.dataProvider = ''
                fetch('/api/dashboard/unitTest', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    body: Qs.stringify(state.searchDataProvider)
                }).then(res => res.text()).then(res => {
                    state.dataProvider = res
                }).finally(() => {
                    state.isTesting = false
                })
            }

            // 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 {
                response,
                fetchData,
                state
            }
        }
    }).mount('#app')
</script>
