<template>
   <a-row :gutter="[8, 8]" >
      <a-col :xs="24" :md="24" :lg="12" >
        <a-alert :message=" 'Address: ' + state.summary.Address" type="info" />
      </a-col>
      <a-col :xs="24" :md="24" :lg="12" >
        <a-alert :message=" 'CPUUsage:' + state.summary.CPUUsage" type="info" />
      </a-col>
    </a-row>
  <a-card style="margin-top: 20px;" >
    <a-row :gutter="[12, 12]" >
      <a-col  :xs="24" :md="24" :lg="12">
        <a-spin :spinning="state.loading" >
          <a-descriptions title="Memory" bordered :column="2">
            <a-descriptions-item label="Total">{{state.summary.Memory?.Total}}</a-descriptions-item>
            <a-descriptions-item label="Usage">{{state.summary.Memory?.Usage}}</a-descriptions-item>
            <a-descriptions-item label="Used">{{state.summary.Memory?.Used}}</a-descriptions-item>
            <a-descriptions-item label="Free">{{state.summary.Memory?.Free}}</a-descriptions-item>
          </a-descriptions>
        </a-spin>
      </a-col>
      <a-col :xs="24" :md="24" :lg="12">
        <a-spin :spinning="state.loading" >
          <a-descriptions title="HardDisk" bordered :column="2">
            <a-descriptions-item label="Total">{{state.summary.HardDisk?.Total}}</a-descriptions-item>
            <a-descriptions-item label="Usage">{{state.summary.HardDisk?.Usage}}</a-descriptions-item>
            <a-descriptions-item label="Used">{{state.summary.HardDisk?.Used}}</a-descriptions-item>
            <a-descriptions-item label="Free">{{state.summary.HardDisk?.Free}}</a-descriptions-item>
          </a-descriptions>
        </a-spin>
      </a-col>
      <a-col :xs="24" :md="24" :lg="24">
        <a-spin :spinning="state.loading" >
          <a-descriptions title="NetWork" bordered :column="2">

          </a-descriptions>
          <a-table
              :columns="columns"
              :data-source="state.summary.NetWork"
              :pagination="false"
            >

            </a-table>
        </a-spin>
      </a-col>
    </a-row>
  </a-card>
</template>
<script lang="ts" setup >
import { RtsController } from '@/controller/rts'
import { onMounted, reactive } from 'vue'

const columns = [
  {
    title: '名称',
    dataIndex: 'Name'
  },
  {
    title: 'Receive',
    dataIndex: 'Receive'
  },
  {
    title: 'Sent',
    dataIndex: 'Sent'
  },
  {
    title: 'ReceiveSpeed',
    dataIndex: 'ReceiveSpeedame'
  },
  {
    title: 'SentSpeed',
    dataIndex: 'SentSpeed'
  }
]

const state = reactive<{
  loading: boolean,
  summary: Partial<RTS.SUMMARY.Detail>
}>({
  loading: false,
  summary: {}
})

const getSummary = async () => {
  state.loading = true
  const { data } = await RtsController.summary()
  state.loading = false
  state.summary = data
}

onMounted(() => {
  getSummary()
})

</script>

<style lang="less" scoped >
</style>
