<template>
  <div class="my-warn-detail">
    <div class="breadcrumb">
      <bg-breadcrumb />
    </div>
    <div class="content">
      <warn-detail :label-data="labelData" :value-data="info" :tabs="tabs"></warn-detail>
    </div>
  </div>
</template>

<script setup>
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import warnDetail from "@/components/warn-detail/index.vue";
const labelData = [
  [
    {
      label: "预警点",
      prop: "warning_point",
    },
    {
      label: "预警分类",
      prop: "warning_type",
    },
  ],
  [
    {
      label: "预警指标",
      prop: "warning_index",
    },
    {
      label: "风险等级",
      prop: "risk_level",
    },
  ],
  [
    {
      label: "状态",
      prop: "status",
    },
    {
      label: "预警阈值",
      prop: "warning_threshold",
    },
  ],
  [
    {
      label: "当前报警值",
      prop: "current_alarm_value",
    },
    {
      label: "预警时间",
      prop: "warning_time",
    },
  ],
];
const info = {
  warning_point: "SaaS层/数据治理系统",
  warning_type: "容器集群",
  warning_index: "响应时间超时",
  risk_level: "一般风险",
  status: "success",
  warning_threshold: "10ms",
  current_alarm_value: "16ms",
  warning_time: "2020-01-01 00:00:00",
};
const tabs = [
  {
    label: "推送记录",
    prop: "push",
    lists: [
      {
        method: "短信",
        person: [11, 22, 33, 44],
        push_time: "2022-07-29 10:23:59",
        push_type: "自动推送",
        status: "success",
      },
      {
        method: "钉钉",
        person: [11, 33, 44],
        push_time: "2022-07-29 10:23:59",
        push_type: "自动推送",
        status: "error",
      },
    ],
  },
  {
    label: "处置记录",
    prop: "dispose",
    lists: [
      {
        status: "error",
        feedback: "暂时无法处理，需要时间",
        feedback_time: "2022-07-29 10:23:59",
        feedback_person: "张三",
      },
      {
        status: "success",
        feedback: "暂时无法处理，需要时间",
        feedback_time: "2022-07-29 10:23:59",
        feedback_person: "张三",
      },
    ],
  },
];
</script>

<style lang="scss" scoped>
.my-warn-detail {
  width: 100%;
  height: 100%;
  padding: 0 24px 16px;
  .breadcrumb {
    width: 100%;
    height: 46px;
  }
  .content {
    width: 100%;
    height: calc(100% - 46px);
    background-color: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    padding: 32px;
  }
}
</style>
