<script setup>
import {ref} from "vue";
import {api} from "boot/axios";
import moment from "moment";
import {useQuasar} from "quasar";

const quasar = useQuasar()

const alertList = ref([])

const instanceId = ref()

function getAlerts() {
  api.get('/panel/alerts/list')
    .then(resp => {
      const response = resp.data
      const data = response.data
      alertList.value = data.data
    })
    .catch(msg => {
      quasar.dialog({
        title: '啊哈',
        message: `请求时出现问题：${msg}`
      })
    })
    .finally(() => quasar.loading.hide())
  quasar.loading.show({
    message: '与服务器通信中...'
  })
}

getAlerts()
</script>

<template>
  <div class="flex flex-col gap-2 p-2">
    <div class="flex flex-row gap-4 items-center">

      <q-input class="w-96" v-model="instanceId" label="实例ID"/>

      <q-separator vertical></q-separator>

      <q-btn unelevated color="primary" @click="getAlerts">刷新</q-btn>
    </div>

    <el-table :data="alertList" border style="width: 100%;height: 100%">
      <el-table-column fixed prop="id" label="ID"/>
      <el-table-column prop="instanceId" label="实例ID"/>
      <el-table-column prop="rule" label="触发规则"/>
      <el-table-column prop="value" label="触发值"/>
      <el-table-column label="时间">
        <template #default="scope">
          <span>{{ moment(scope.row.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<style scoped>

</style>
