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

<div id="app">
    <div id="main" style="width: 100%;height:400px;"></div>
    <div class="panel panel-default">
        <!-- Table -->
        <table class="table">
            <thead>
            <tr>
                <th style="width: 100px">id</th>
                <th>请求参数</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in state.dataProvider">
                <td>{{ index }}</td>
                <td>{{ item }}</td>
            </tr>
            </tbody>
        </table>
    </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 = {
                    color: ['#91cc75', '#ee6666'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {},
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['<?= implode("','", $title) ?>']
                    },
                    series: [
                        {
                            name: '正常请求',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            data: [<?= implode(',', \Application\Service\Extension\Helper\ArrayHelper::getColumn($data, 'normal')) ?>]
                        },
                        {
                            name: '慢请求',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                show: true
                            },
                            data: [<?= implode(',', \Application\Service\Extension\Helper\ArrayHelper::getColumn($data, 'slow')) ?>]
                        },
                    ]
                };
                myChart.setOption(option);
                myChart.on('click', function(event) {
                    console.log(event.name)
                    fetchData(event.name)
                });
            })

            function fetchData(url) {
                fetch('/api/dashboard/analysisResponseTime?url=' + url, {
                    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>
