<template>
    <div class="workbench">
        <data-overview />
        <div class="mb-4 function">2</div>
        <div class="lg:flex">
            <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
                <template #header>
                    <span>销售额趋势图（近15天）</span>
                </template>
                <div>
                    <v-charts style="height: 350px" :option="workbenchData.businessOption" :autoresize="true" />
                </div>
            </el-card>

            <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
                <template #header>
                    <span>用户访问量（近15天）</span>
                </template>
                <div>
                    <v-charts style="height: 350px" :option="workbenchData.visitorOption" :autoresize="true" />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import dataOverview from './components/data-overview.vue'
import vCharts from 'vue-echarts'
// 表单数据
const workbenchData: any = reactive({
    businessOption: {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
                name: '销售量',
                data: [],
                type: 'line',
                smooth: true
            }
        ]
    },

    visitorOption: {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
                name: '访问量',
                data: [],
                type: 'line',
                smooth: true
            }
        ]
    }
})

// 获取工作台主页数据
const getData = async () => {}

onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped></style>
