<template>
    <PageWrapper  contentFullHeight="true" contentClass="flex" style="height:100%;">
        <div style="background-color: #ececec; padding: 10px;height:100%;">
            <a-row :gutter="[10,10]">
                <a-col :span="6">
                    <a-row :gutter="[16,16]">
                        <a-col :span="24">
                            <a-card title="接口信息" :bordered="true">
                                <template #extra><a-button type="link" @click="autoCall()">控制活动列表</a-button></template>

                                

                                
                            </a-card>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :span="12">
                   
                </a-col>
                <a-col :span="6">
                    <a-row :gutter="[16,16]">
                        <a-col :span="24">
                            <a-card title="获取到的信息" :bordered="false">
                                <template #extra><a-button type="link" @click="saveMetric()">保存</a-button></template>
                                <div style="height:100%">
                                <p>名  称： {{dataInfo.name}} </p>
                                <p>采集值： {{dataInfo.val}}  </p>
                                <p>描  述： {{dataInfo.des}}  </p>
                                </div>
                            </a-card>
                        </a-col>
                    </a-row>
                    <a-row :gutter="[16,16]">
                        <a-col :span="24">
                            <a-card title="响应信息" :bordered="false">
                                <div style="max-height:200px; overflow-y: auto; ">
                                <p v-for="msg in saveMsgList" :key="msg"> {{msg}}</p>
                                </div>
                            </a-card>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
        </div>
    </PageWrapper>    
  </template>
  <script lang="ts" setup>
    import {ref} from 'vue';
    import {defHttp} from '/@/utils/http/axios';
    import axios from 'axios';
    import { MoreOutlined} from '@ant-design/icons-vue';
    import moment from 'moment';

   
    const metric = ref({})
    const socketBefore=ref("http://120.26.164.203:9001")
    const romateAddr = ref("/stm/actuator/metrics/system.cpu.usage?_t="+ new Date().getTime());
    const socketName=ref("获取远程主机CPU使用率")
    const resData = ref({})

    const saveMsgList = ref([]);
    const dataInfo = ref({});

    let i=0
    async function getProcessCpuUsage() {
        let url =  socketBefore.value+romateAddr.value
        await axios.get(url).then(response => {
            resData.value = response.data
            console.log(response.data)
            saveMetric()
        })
        .catch(error => {
            console.error(error);
        }); 
        i++
        saveMsgList.value.push("第【"+i+"】获取数据");
    };

  
    async function saveMetric() {
        let saveUrl ='/metric/metricReport/add'; 
        let params = {mtrcNo:metric.value.mtrcNo};
        let valAry = resData.value['measurements'];
        let des = resData.value['description']
        const date = moment(); // 使用 Moment.js 创建日期对象
        const dateStr = date.format('YYYY-MM-DD HH:mm:ss')
        params["fillTime"] = dateStr
        params["fillVals"] = (valAry[0].value*100).toFixed(2)
        params["des"] = des
        dataInfo.value["name"] = resData.value.name;
        dataInfo.value["val"] = params["fillVals"];
        dataInfo.value["des"] = des
        return defHttp.post({url: saveUrl, params}).then((ret) => {
            saveMsgList.value.push("第【"+i+"】保存数据");
        });
    }

     function autoCall() {
        getProcessCpuUsage()
        setInterval(function() {
             getProcessCpuUsage()
        }, 10000); 
    }

  </script>

<style scope>
.underline-input {
  border-left:none;
  border-top:none;
  border-right:none;
  width: 100%;
}
</style>