<template>
  <BasicDrawer placement="right" @register="registerDrawer" v-bind="$attrs" :title="problemItem" width="80%" height="70%">
    <PageWrapper contentFullHeight="true" contentClass="flex" style="height: 100%">
      <div style="background-color: #ececec; padding: 20px; height: 100%">
        <a-row :gutter="[16, 16]">
          <a-col :span="14">
            <a-row :gutter="[16, 16]">
              <a-col :span="24">
                <a-card title="指标详情" :bordered="true">
                  <template #extra>
                    <a-dropdown>
                      <a class="ant-dropdown-link" @click.prevent>
                        <MoreOutlined />
                      </a>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item>
                            <a href="javascript:;">刷新</a>
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </template>
                  <a-list item-layout="horizontal">
                    <a-list-item>
                      <a-list-item-meta :description="metric.mtrcNo">
                        <template #title> 指标编号 </template>
                      </a-list-item-meta>
                    </a-list-item>
                    <a-list-item>
                      <a-list-item-meta :description="metric.mtrcName">
                        <template #title> 指标名称 </template>
                      </a-list-item-meta>
                    </a-list-item>
                    <a-list-item>
                      <a-list-item-meta :description="metric.des">
                        <template #title> 指标说明 </template>
                      </a-list-item-meta>
                    </a-list-item>
                  </a-list>
                </a-card>
              </a-col>
              <a-col :span="24">
                <a-card title="接口信息" :bordered="true">
                  <template #extra><a-button type="link" @click="autoCall()">获取远程数据</a-button></template>
                  <a-row :gutter="[16, 16]">
                    <a-col :span="23"> 接口名称：<a-input class="underline-input" v-model:value="socketName" /> </a-col>

                    <a-col :span="23">
                      接口地址：<a-input class="underline-input" v-model:value="romateAddr">
                        <template #addonBefore>
                          <a-select v-model:value="socketBefore" style="width: 300px">
                            <a-select-option value="Http://">Http://120.26.164.203:9001</a-select-option>
                            <a-select-option value="Http://">Https:/47.110.158.206:9001</a-select-option>
                          </a-select>
                        </template>
                      </a-input>
                    </a-col>
                    <a-col :span="23"> 其它参数：<a-input class="underline-input" /> </a-col>
                  </a-row>
                </a-card>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="10">
            <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>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import axios from 'axios';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { MoreOutlined } from '@ant-design/icons-vue';
  import moment from 'moment';

  const metric = ref({});
  const [registerDrawer] = useDrawerInner(async (data) => {
    metric.value = data.record;
  });

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