<template>
    <div class="og-realtime">
        <div class="time-container">
            <div>
                <div>系统时间：{{ realTime }}</div>
                <div>终端时间：{{ deviceTime }}</div>
            </div>
            <el-button icon="el-icon-RefreshLeft" type="primary" @click="synchronizeTime">对时</el-button>
        </div>
        <div :style="echartHeight" class="pl10 pr10">
            <MyEchart :options="echartsData" />
        </div>
        <div class="pl10 pr10">
            <el-table :data="tableData" border stripe :show-header="false" size="small" 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>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { formatToDateTime } from '@/utils/dateUtil'

defineOptions({
    name: 'operationalguidance/realTime'
})

const props = defineProps<{
    device?: anyObj
}>()

const echartHeight = mainHeight(185)
const realTime = ref<string>('')
const deviceTime = ref<string>('')
const timer = ref<ReturnType<typeof setInterval> | null>(null)

const echartsData = ref<any>({
    title: {
        text: '设备性能'
    },
    tooltip: {
        axisPointer: {
            type: 'cross',
            label: {
                color: '#fff',
                fontSize: 16
            }
        },
        textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            opacity: 0.35,
            fontSize: 14
        },
        backgroundColor: 'rgba(0,0,0,0.55)',
        borderWidth: 0
    },
    legend: {
        bottom: 0,
        data: ['CPU1使用率', 'CPU2使用率', '内存使用率', '磁盘使用率']
    },
    xAxis: {
        type: 'time',
        name: '时间',
        axisLabel: {
            formatter: {
                day: '{MM}-{dd}',
                month: '{MM}',
                year: '{yyyy}'
            }
        }
    },
    yAxis: {
        name: '%',
        type: 'value',
        min: 0,
        max: 100
    },
    series: [
        {
            name: 'CPU1使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 10],
                ['2025-01-01 09:00:00', 10],
                ['2025-01-01 010:00:00', 10]
            ]
        },
        {
            name: 'CPU2使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 11],
                ['2025-01-01 09:00:00', 11],
                ['2025-01-01 010:00:00', 11]
            ]
        },
        {
            name: '内存使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 12],
                ['2025-01-01 09:00:00', 12],
                ['2025-01-01 010:00:00', 12]
            ]
        },
        {
            name: '磁盘使用率',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: [
                ['2025-01-01 08:00:00', 13],
                ['2025-01-01 09:00:00', 13],
                ['2025-01-01 010:00:00', 13]
            ]
        }
    ]
})

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: ''
    }
])

watch(
    () => props.device,
    () => {
        // 设备切换时预留刷新入口
    }
)

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

onMounted(() => {
    timer.value = setInterval(() => {
        realTime.value = formatToDateTime(new Date())
    }, 1000)
})

onUnmounted(() => {
    if (timer.value) {
        clearInterval(timer.value)
        timer.value = null
    }
})
</script>

<style scoped lang="scss">
.og-realtime {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .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;
    }

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

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

    :deep(.custom-table .el-table__row .el-table__cell:nth-child(1)) {
        background-color: #f5f7fa;
        font-weight: bold;
    }
}
</style>
