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

<div id="app">
    <div id="main" style="width: 100%;height:400px;"></div>
</div>

<script>
    const { createApp, reactive, onMounted } = Vue

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

            onMounted(() => {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '请求数量'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['00-01', '01-02', '02-03', '03-04', '04-05', '05-06', '06-07', '07-08', '08-09', '09-10', '10-11', '11-12', '12-13','13-14', '14-15', '15-16', '16-17', '17-18', '18-19', '19-20', '20-21', '21-22', '22-23']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        <?php foreach ($data as $item): ?>
                                {
                                    name: '<?= $item['name'] ?>',
                                    data: [<?= implode(',', $item['data']) ?>],
                                    type: 'line'
                                },
                        <?php endforeach; ?>
                    ]
                };
                myChart.setOption(option);
            })

            function fetchData() {
                fetch('/api/dashboard/form-log', {
                    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>
