<template>
    <el-dialog draggable v-model="dialogVisible" v-if="dialogVisible" title="终端使用详情" width="70%">
        <MyEchart :options="echartsXq" style="width: 100%; height: 300px" />
        <vxe-table v-bind="defaultAttribute" height="400" :data="tableData">
            <vxe-colgroup title="cup使用率">
                <vxe-column field="date" title="使用率"></vxe-column>
                <vxe-column field="date" title="总量"></vxe-column>
                <vxe-column field="date" title="使用量"></vxe-column>
                <vxe-column field="date" title="未使用量"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="内存使用率">
                <vxe-column field="date" title="使用率"></vxe-column>
                <vxe-column field="date" title="总量"></vxe-column>
                <vxe-column field="date" title="使用量"></vxe-column>
                <vxe-column field="date" title="未使用量"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="磁盘使用率">
                <vxe-column field="date" title="使用率"></vxe-column>
                <vxe-column field="date" title="总量"></vxe-column>
                <vxe-column field="date" title="使用量"></vxe-column>
                <vxe-column field="date" title="未使用量"></vxe-column>
            </vxe-colgroup>
        </vxe-table>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import {} from '@/api/device-boot/Business'

const echartsXq: any = ref([])
const dialogVisible = ref(false)
const tableData = ref([])

const open = (e: any) => {
    console.log("🚀 ~ open ~ e:", e)
    echartsXq.value = {
        title: {
            text: e.name + '性能详情'
        },

        legend: {
            data: ['cpu使用率', '内存使用率', '磁盘使用率'],
            icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z'
        },
        xAxis: {
            type: 'time',
            name: '时间'
        },
        yAxis: {
            max: '100',
            name: '%'
        },
        options: {
            series: [
                {
                    name: 'cpu使用率',
                    type: 'line',
                    smooth: true,
                    data: [
                        ['2022-02-01 12:12:11', 10],
                        ['2022-02-01 12:12:12', 20],
                        ['2022-02-01 12:12:13', 30],
                        ['2022-02-01 12:12:14', 44],
                        ['2022-02-01 12:12:15', 50],
                        ['2022-02-01 12:12:16', 65],
                        ['2022-02-01 12:12:17', 76]
                    ]
                },
                {
                    name: '内存使用率',
                    type: 'line',
                    smooth: true,
                    data: [
                        ['2022-02-01 12:12:11', 13],
                        ['2022-02-01 12:12:12', 54],
                        ['2022-02-01 12:12:13', 34],
                        ['2022-02-01 12:12:14', 44],
                        ['2022-02-01 12:12:15', 35],
                        ['2022-02-01 12:12:16', 53]
                    ]
                },
                {
                    name: '磁盘使用率',
                    type: 'line',
                    smooth: true,
                    data: [
                        ['2022-02-01 12:12:11', 13],
                        ['2022-02-01 12:12:12', 2],
                        ['2022-02-01 12:12:13', 2],
                        ['2022-02-01 12:12:14', 32],
                        ['2022-02-01 12:12:15', 43],
                        ['2022-02-01 12:12:16', 23],
                        ['2022-02-01 12:12:17', 23]
                    ]
                }
            ]
        }
    }

    dialogVisible.value = true
}

const cancel = () => {
    dialogVisible.value = false
}

defineExpose({ open })
</script>
<style lang="scss" scoped></style>
