<script setup lang="ts">
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDevCapacity } from '@/api/cs-device-boot/capacity'
import { queryCommonStatisticalByTime } from '@/api/cs-harmonic-boot/stable'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { yMethod, completeTimeSeries } from '@/utils/echartMethod'
import TableHeader from '@/components/table/header/index.vue'
import { RefreshLeft } from '@element-plus/icons-vue'
import { formatToDateTime } from '@/utils/dateUtil'

defineOptions({
    name: 'govern/manage/realTime'
})

//页面属性
const pageHeight = mainHeight(20)
const echartHeight = (mainHeight(180))

const echartsData = ref<any>({
    title: {
        text: '终端性能'
    },
    legend: {
        bottom: 0,
        data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
    },
    xAxis: {
        type: 'category',
        data: ['2023-05-01', '2023-05-02', '2023-05-03', '2023-05-04', '2023-05-05', '2023-05-06']
    },
    yAxis: {
        name: '使用率',
        type: 'value',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
            formatter: '{value} %'
        }
    },
    series: [
        {
            name: 'CPU1使用率',
            type: 'line',
            data: [10, 52, 20, 33, 39, 89]
        },
        {
            name: 'CPU2使用率',
            type: 'line',
            data: [9, 52, 10, 33, 69, 79]
        },
        {
            name: '内存使用率',
            type: 'line',
            data: [10, 62, 80, 13, 29, 39]
        },
        {
            name: '磁盘使用率',
            type: 'line',
            data: [50, 52, 40, 55, 49, 61]
        }
    ]
})

const tableData = ref([
    {
        label1: 'cpu1负载(%)',
        label2: '使用:',
        value1: '43',
        label3: '剩余:',
        value2: '57',
        label4: '',
        value3: ''
    },
    {
        label1: 'cpu2负载(%)',
        label2: '使用:',
        value1: '/',
        label3: '剩余:',
        value2: '/',
        label4: '',
        value3: ''
    },
    {
        label1: '终端内存详情(MB)',
        label2: '内存总量:',
        value1: '489',
        label3: '已使用:',
        value2: '143',
        label4: '未使用:',
        value3: '346.00'
    },
    {
        label1: '主存储器详情(GB)',
        label2: '主存储器总量:',
        value1: '6.44',
        label3: '已使用:',
        value2: '6.03',
        label4: '未使用:',
        value3: '0.41'
    },
    {
        label1: '其余信息',
        label2: '最后对时对标:',
        value1: '1970-01-01 08:00:00',
        label3: '信号强度(dBm):',
        value2: '-',
        label4: '',
        value3: ''
    }
])

const nodeClick = async (e: anyObj) => {
    console.log('点击设备树节点')
}

const handleClose = () => {
    console.log('close')
}

const synchronizeTime = async () => {
    console.log('对时')
}
</script>

<template>
    <div class="default-main manage-realTime" :style="{ height: pageHeight.height }">
        <DeviceTree @node-click="nodeClick" @init="" @deviceTypeChange=""></DeviceTree>
        <div class="manage-realTime-right">
            <div class="time-container">
                <span>系统时间：{{ formatToDateTime(new Date()) }}</span>
                <span>终端时间：{{ formatToDateTime(new Date()) }}</span>
                <el-button size="small" type="primary" @click="synchronizeTime">
                    <RefreshLeft style="width: 15px;margin-right: 5px" />
                    <span>对时</span>
                </el-button>
            </div>
            <div :style="echartHeight" style="padding: 10px 20px 0 20px;">
                <MyEchart :options="echartsData" />
            </div>
            <div style="padding: 0 20px 0 20px;">
                <el-table :data="tableData" border :show-header="false" class="custom-table">
                    <el-table-column prop="label1" />
                    <el-table-column prop="label2" />
                    <el-table-column prop="value1" />
                    <el-table-column prop="label3" />
                    <el-table-column prop="value2" />
                    <el-table-column prop="label4" />
                    <el-table-column prop="value3" />
                </el-table>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.manage-realTime {
    display: flex;

    &-right {
        height: 100%;
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        display: flex;
        flex-direction: column;
        border: 1px solid #ebeef5; // 加个边框方便查看效果

        .time-container {
            display: flex;
            justify-content: flex-end; // 让内容靠右
            align-items: center; // 让内容垂直居中（避免高度不一致时偏移）

            * {
                margin-right: 15px;
            }

            .el-button * {
                margin-right: 0;
            }
        }

        :deep(.el-table__cell) {
            text-align: center;
        }

        /* 1. 加深表格边框线条 */
        :deep(.custom-table.el-table) {
            border: 1px solid #dcdfe6;
            width: auto;
        }

        :deep(.custom-table .el-table__cell) {
            border: 1px solid #dcdfe6;
        }

        /* 2. 第 1、2、4、6 列显示深色背景 */
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)),
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(2)),
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(4)),
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(6)) {
            background-color: #f5f7fa;
            font-weight: bold;
        }

        /* 第 3、5、7 列显示白色背景 */
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(3)),
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(5)),
        :deep(.custom-table .el-table__row .el-table__cell:nth-child(7)) {
            background-color: #fff;
        }
    }
}
</style>