<template>
    <div class="workbench">
        <div class="lg:flex">
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <template #header>
                    <div>
                        <span class="card-title">今日数据</span>
                        <span class="text-tx-secondary text-xs ml-4">
                            更新时间：{{ workbenchData.today.time }}
                        </span>
                    </div>
                </template>

                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">基地数</div>
                        <div class="text-6xl">{{ workbenchData.today.total_land }}</div>
                        <div class="text-tx-secondary">
                            今日新增：{{ workbenchData.today.today_land }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">产品数</div>
                        <div class="text-6xl">{{ workbenchData.today.total_product }}</div>
                        <div class="text-tx-secondary">
                            今日新增：{{ workbenchData.today.today_product }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">设备数</div>
                        <div class="text-6xl">{{ workbenchData.today.total_device }}</div>
                        <div class="text-tx-secondary">
                            今日新增：{{ workbenchData.today.today_device }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">报警数</div>
                        <div class="text-6xl">{{ workbenchData.today.total_alarm }}</div>
                        <div class="text-tx-secondary">
                            今日新增：{{ workbenchData.today.today_alarm }}
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="function mb-4">
            <el-card class="flex-1 !border-none" shadow="never">
                <template #header>
                    <span>快捷入口</span>
                </template>
                <div class="flex flex-wrap">
                    <div
                        v-for="item in workbenchData.menu"
                        class="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">
                            <image-contain width="40px" height="40px" :src="item?.image" />
                            <div class="mt-2">{{ item.name }}</div>
                        </router-link>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="md:flex">
            <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
                <div>
                    <v-charts
                        style="height: 350px"
                        :option="workbenchData.dataOption"
                        :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({
    today: {}, // 今日数据
    menu: [], // 常用功能
    chart_data: [], // 图表数据

    dataOption: {
        xAxis: {
            type: 'category',
            data: [0],
        },
        yAxis: {
            type: 'value'
        },
        legend: {
            data: ['基地数', '产品数', '设备数', '报警数']
        },
        itemStyle: {
            // 点的颜色。
            color: 'red'
        },
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
                name: '基地数',
                data: [0],
                type: 'line',
                smooth: true
            },
            {
                name: '产品数',
                data: [1],
                type: 'line',
                smooth: true
            },
            {
                name: '设备数',
                data: [2],
                type: 'line',
                smooth: true
            },
            {
                name: '报警数',
                data: [3],
                type: 'line',
                smooth: true
            }
        ]
    }
})

// 获取工作台主页数据
const getData = () => {
    getWorkbench()
        .then((res: any) => {
            workbenchData.today = res.today
            workbenchData.menu = res.menu
            workbenchData.chart_data = res.chart_data
            // 清空echarts 数据
            workbenchData.dataOption.xAxis.data = []
            workbenchData.dataOption.series[0].data = []
            workbenchData.dataOption.series[1].data = []
            workbenchData.dataOption.series[2].data = []
            workbenchData.dataOption.series[3].data = []

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

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

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