<template>
    <div class="workbench">
        <div class="flex box-border">
            <el-card class="flex-1 m-2 !border-none" shadow="never">
                <template #header>
                    <div class="card-header flex items-center justify-between">
                        <span class="text-2xl">销售额</span>
                        <span class="pt-1 pb-1 pl-2 pr-2 text-sm rounded-md bg-success text-white">今日</span>
                    </div>
                </template>
                <div class="text-6xl">{{ workbenchData.today.today_sales }}</div>
                <template #footer>
                    <div class="flex items-center justify-between">
                        <span class="text-tx-secondary text-xs">总销售额:</span>
                        <span class="text-tx-secondary text-xs">{{ workbenchData.today.today_sales }}元</span>
                    </div>
                </template>
            </el-card>
            <el-card class="flex-1 m-2 !border-none" shadow="never">
                <template #header>
                    <div class="card-header flex items-center justify-between">
                        <span class="text-2xl">成交订单</span>
                        <span class="pt-1 pb-1 pl-2 pr-2 text-sm rounded-md bg-success text-white">今日</span>
                    </div>
                </template>
                <div class="text-6xl">{{ workbenchData.today.order_num }}</div>
                <template #footer>
                    <div class="flex items-center justify-between">
                        <span class="text-tx-secondary text-xs">总成交订单</span>
                        <span class="text-tx-secondary text-xs">{{ workbenchData.today.order_sum }}单</span>
                    </div>
                </template>
            </el-card>
            <el-card class="flex-1 m-2 !border-none" shadow="never">
                <template #header>
                    <div class="card-header flex items-center justify-between">
                        <span class="text-2xl">新增用户</span>
                        <span class="pt-1 pb-1 pl-2 pr-2 text-sm rounded-md bg-success text-white">今日</span>
                    </div>
                </template>
                <div class="text-6xl">{{ workbenchData.today.today_new_user }}</div>
                <template #footer>
                    <div class="flex items-center justify-between">
                        <span class="text-tx-secondary text-xs">总新增用户</span>
                        <span class="text-tx-secondary text-xs">{{ workbenchData.today.total_new_user }}位</span>
                    </div>
                </template>
            </el-card>
            <el-card class="flex-1 m-2 !border-none" shadow="never">
                <template #header>
                    <div class="card-header flex items-center justify-between">
                        <span class="text-2xl">新增访问量</span>
                        <span class="pt-1 pb-1 pl-2 pr-2 text-sm rounded-md bg-success text-white">今日</span>
                    </div>
                </template>
                <div class="text-6xl">{{ workbenchData.today.today_visitor }}</div>
                <template #footer>
                    <div class="flex items-center justify-between">
                        <span class="text-tx-secondary text-xs">总新增访问量</span>
                        <span class="text-tx-secondary text-xs">{{ workbenchData.today.total_visitor }}Pv</span>
                    </div>
                </template>
            </el-card>
        </div>
        <!-- <div class="function flex box-border">
            <el-card shadow="never" v-for="item in workbenchData.menu"
                class="flex-1 m-2 !border-none md:w-[12.5%] w-1/4 flex flex-col items-center" :key="item">
                <router-link :to="item.url" class="mb-3 flex flex-col items-center w-full h-full">
                    <image-contain width="40px" height="40px" :src="item?.image" />
                    <div class="mt-2">{{ item.name }}</div>
                </router-link>
            </el-card>
        </div> -->
        <div class="flex box-border">
            <el-card class="flex-1 m-2 !border-none" shadow="never">
                <template #header>
                    <div class="flex items-center justify-between">
                        <span>访问量趋势图</span>
                    </div>
                </template>
                <div>
                    <v-charts style="height: 350px" :option="workbenchData.visitorOption" :autoresize="true" />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup name="workbench">
import { getWorkbench } from '@/api/app'
import vCharts from 'vue-echarts'
// 表单数据
const workbenchData: any = reactive({
    version: {
        version: '', // 版本号
        website: '', // 官网
        based: '',
        channel: {
            gitee: '',
            website: ''
        }
    },
    support: [],
    today: {}, // 今日数据
    menu: [], // 常用功能
    visitor: [], // 访问量
    article: [], // 文章阅读量

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

// 获取工作台主页数据
const getData = () => {
    getWorkbench()
        .then((res: any) => {
            workbenchData.version = res.version
            workbenchData.today = res.today
            workbenchData.menu = res.menu
            workbenchData.visitor = res.visitor
            workbenchData.support = res.support

            // 清空echarts 数据
            workbenchData.visitorOption.xAxis.data = []
            workbenchData.visitorOption.series[0].data = []

            // 写入从后台拿来的数据
            res.visitor.date.reverse().forEach((item: any) => {
                workbenchData.visitorOption.xAxis.data.push(item)
            })
            res.visitor.list[0].data.forEach((item: any) => {
                workbenchData.visitorOption.series[0].data.push(item)
            })
            console.log(workbenchData.visitorOption);
            
        })
        .catch((err: any) => {
            console.log('err', err)
        })
}

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

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