<template>
    <PageWrapper>
        <el-card :bordered="false" style="margin-bottom:20px;">
            <template #header>
                <div class="flex item-center">
                    <el-icon class="el-input__icon" size="16px" style="margin-right:6px;">
                        <Monitor />
                    </el-icon>
                    基本信息
                </div>
            </template>
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="150" align="center">Redis版本</el-table-column>
                <el-table-column>{{ baseInfo.redis_version }}</el-table-column>
                <el-table-column width="150" align="center">运行模式</el-table-column>
                <el-table-column align="center">{{ baseInfo.redis_mode == 'standalone' ? '单机' : '集群' }}</el-table-column>
                <el-table-column width="150" align="center">端口</el-table-column>
                <el-table-column>{{ baseInfo.tcp_port }}</el-table-column>
                <el-table-column width="150" align="center">客户端数</el-table-column>
                <el-table-column align="center">{{ baseInfo.connected_clients }}</el-table-column>
            </el-table>
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="150" align="center">运行时间(天)</el-table-column>
                <el-table-column>{{ baseInfo.uptime_in_days }}</el-table-column>
                <el-table-column width="150" align="center">使用内存</el-table-column>
                <el-table-column align="center">{{ baseInfo.used_memory_human }}</el-table-column>
                <el-table-column width="150" align="center">使用CUP</el-table-column>
                <el-table-column>{{ baseInfo.used_cpu_user_children }}</el-table-column>
                <el-table-column width="150" align="center">内存配置</el-table-column>
                <el-table-column align="center">{{ baseInfo.maxmemory_human }}</el-table-column>
            </el-table>
            <el-table :data="tabledata" :show-header="false">
                <el-table-column width="150" align="center">AOF是否开启</el-table-column>
                <el-table-column>{{ baseInfo.aof_enabled == 0 ? '开启' : '关闭' }}</el-table-column>
                <el-table-column width="150" align="center">RDB是否成功</el-table-column>
                <el-table-column align="center">{{ baseInfo.aof_enabled == 'ok' ? '成功' : '失败' }}</el-table-column>
                <el-table-column width="150" align="center">key数量</el-table-column>
                <el-table-column>{{ baseInfo.dbSize }}</el-table-column>
                <el-table-column width="150" align="center">网络入口/出口</el-table-column>
                <el-table-column align="center">
                    {{ baseInfo.instantaneous_input_kbps }}
                    /
                    {{ baseInfo.instantaneous_output_kbps }}</el-table-column>
            </el-table>
        </el-card>
        <div class="cache-box">
            <el-card :bordered="false">
                <template #header>
                    <div class="flex item-center">
                    <el-icon class="el-input__icon" size="16px" style="margin-right:6px;">
                      <PieChart />
                    </el-icon>
                    命令统计
                    </div>
                </template>
                <pie-box :pieData="commandStats" v-if="commandStats.length > 0" />
            </el-card>
            <el-card :bordered="false">
                <template #header>
                    <div class="flex item-center">
                        <el-icon class="el-input__icon" size="16px" style="margin-right:6px;">
                        <Odometer />
                        </el-icon>
                        内存信息
                    </div>
                </template>
                <gauge-box :data="gaugeValue" v-if="gaugeValue"/>
            </el-card>
        </div>
    </PageWrapper>
</template>

<script lang="ts" setup>
import { ref, onMounted} from 'vue';
import { getCacheInfo } from '@/api/monitor/cache';
import pieBox from './pieBox.vue';
import gaugeBox from './gaugeBox.vue';
const tabledata = ref([{}])
const baseInfo = ref<any>({});
const commandStats = ref([])
const gaugeValue = ref('')
const loadCacheInfo = async () => {
    const result = await getCacheInfo();
    commandStats.value = result.commandStats
    baseInfo.value = result.info
    baseInfo.value.dbSize = result.dbSize;
    gaugeValue.value =  (result.info.used_memory / 1024 / 1024).toFixed(2);
};

onMounted(() => {
    loadCacheInfo()
})
</script>
<style lang="scss" scoped>
.cache-box {
    display: flex;

    >.el-card {
        flex: 1;

        &:nth-child(2) {
            margin: 0 15px;
        }
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>