<template>
<!--  <el-row :gutter="20">-->
<!--    <el-col :span="24">-->
<!--      <el-date-picker-->
<!--          v-model="dateTime"-->
<!--          type="datetimerange"-->
<!--          start-placeholder="开始时间"-->
<!--          end-placeholder="结束时间"-->
<!--          format="YYYY-MM-DD"-->
<!--          date-format="YYYY/MM/DD"-->
<!--          time-format="A hh:mm:ss"-->
<!--      />-->
<!--      <el-button type="primary" icon="Search" @click="getList">搜索</el-button>-->
<!--    </el-col>-->
<!--  </el-row>-->
  <div ref="commandstats" style="height: 420px" />
</template>
<script setup lang="ts">
import {nextTick, watchEffect} from "vue";
import {metricsHistory} from "@/api/obj/metrics"
import {parseTime} from "@/utils/ruoyi"
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();
const dateTime=ref([])

const commandstats = ref(null);
const objMetricsId = ref(null);

const props = defineProps(['objMetricsId'])
watchEffect(()=>{
  objMetricsId.value = props.objMetricsId
  nextTick(()=>{
    getList()
  })
})

function initDateTime(){
    const today = new Date();
    const halfMonthAgo = new Date();
    halfMonthAgo.setDate(today.getDate() - 15);
    dateTime.value = [halfMonthAgo, today];
}

function getList() {
  proxy.$modal.loading("正在加载缓存监控数据，请稍候！");
  metricsHistory(objMetricsId.value).then(res=>{
    proxy.$modal.closeLoading();
    const times = res.data.times.map(t=>parseTime(t,'{y}/{m}/{d} {h}:{mi}'))
    const commandstatsIntance = echarts.init(commandstats.value);
    commandstatsIntance.setOption({
      grid:{
        left: '1%',
        right: '1%',
        bottom: '1%',
        top: '1%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: times
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: res.data.values,
          type: 'line'
        }
      ]
    });
    window.addEventListener("resize", () => {
      commandstatsIntance.resize();
    });
  })
}


</script>
