<template>
  <div class="column-row">
    <div class="column-row-title">
        <span class="title-text" @click="handleTarget" style="cursor: pointer"><img src="@/assets/images/title-icon.png"
                                                                                    alt=""/>异常分析及预测
          <span class="s-span">(截止前一天)</span>
        </span>
      <div>风险<span class="yellow-txt">{{ riskNum }}</span></div>
    </div>
    <div class="column-content">
      <div class="c-row" v-for="item in riskData">
        <span class="c-item">{{ item.objName }}</span>
        <span class="c-item">{{ item.metricsName }}</span>
        <span
            :class=" item.status==2 ? 'statue-risk' : 'statue-normal' ">{{ item.status == 1 ? '正常' : '存在风险' }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {riskList} from "@/api/index/hl"
import {onMounted, onUnmounted} from "vue";
import {useRouter} from "vue-router"

const props = defineProps(["refreshTime"])
const risk = ref(false)
const riskData = ref([])
const riskNum = ref(0)
const interval = ref(null)
const router = useRouter()

const handleTarget = () => {
  router.push("/risk/heterogeneous")
}

onMounted(() => {
  getRisk()
  interval.value = setInterval(() => {
    getRisk()
  }, props.refreshTime)
})

onUnmounted(() => {
  clearInterval(interval.value)
})

async function getRisk() {
  const {data} = await riskList(risk.value ? 2 : 1)
  riskData.value = data.data
  riskNum.value = data.num;
}

</script>
<style scoped lang="scss">
</style>
