<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container bg-scroll">
      <gap-title :hasLine="true" title="基本信息"></gap-title>
      <div class="info">
        <Info :labelData="labelData" :valueData="info">
          <template #status="{ item, valueData }">
            <span class="status-body">
              <span class="status" :class="`status-${valueData.status}`"></span>
              <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
            </span>
          </template>
        </Info>
      </div>
      <gap-title :hasLine="true" title="预警范围"></gap-title>
      <div class="info">
        <Info :labelData="warning_scope_label" :valueData="watning_scope_data"> </Info>
      </div>
      <gap-title :hasLine="true" title="预警规则"></gap-title>
      <div class="info">
        <bg-table border ref="ruletable" :headers="ruleHeaders" :rows="ruleRows" height="100%"> </bg-table>
      </div>
      <gap-title :hasLine="true" title="高级配置"> </gap-title>
      <div class="info">
        <Info :labelData="advanced_label" :valueData="advanced_data"> </Info>
      </div>
      <gap-title :hasLine="true" title="预警工单推送"> </gap-title>
      <div class="info">
        <Info :labelData="ticket_push_label" :valueData="ticket_push_data">
          <template #notification_method="{ valueData }">
            <span>{{ valueData.notification_method.map((e) => METHODS[e]).join("，") }}</span>
          </template>
        </Info>
        <div class="push-lists">
          <bg-table border ref="pushtable" :headers="pushHeaders" :rows="pushRows" height="100%" :isIndex="true">
          </bg-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import gapTitle from "@/components/gap-title.vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const STATUS_OBJ = {
  enabled: "启用",
  disabled: "禁用",
};
const labelData = [
  [
    {
      label: "预警规则名称",
      prop: "warning_rule_name",
    },
    {
      label: "启用状态",
      prop: "status",
    },
  ],
  [
    {
      label: "预警对象",
      prop: "warning_target",
    },
    {
      label: "预警分类",
      prop: "warning_type",
    },
  ],
  [
    {
      label: "预警指标",
      prop: "warning_index",
    },
    {
      label: "创建人",
      prop: "create_by",
    },
  ],
  [
    {
      label: "创建时间",
      prop: "create_time",
    },
    {
      label: "更新时间",
      prop: "update_time",
    },
  ],
];
const info = {
  warning_rule_name: "服务中断推送规则1",
  status: "enabled",
  warning_target: "容器云",
  warning_type: "容器集群",
  warning_index: "CPU使用率",
  create_by: "admin",
  create_time: "2020-01-01 00:00:00",
  update_time: "2020-01-01 00:00:00",
};
const warning_scope_label = [
  [
    {
      prop: "colony",
      label: "集群",
    },
  ],
  [
    {
      prop: "core_com",
      label: "核心组件",
    },
  ],
];
const watning_scope_data = {
  colony: "等于 default",
  core_com: "等于 kube-apiserver/kube-apiserver2/kube-apiserver3",
};
const advanced_label = [
  [
    {
      prop: "duration",
      label: "持续时间",
    },
  ],
  [
    {
      prop: "inspection_cycle",
      label: "检查周期",
    },
  ],
];
const advanced_data = {
  duration: "直接产生预警",
  inspection_cycle: "1分钟",
};
const ticket_push_label = [
  [
    {
      prop: "notification_method",
      label: "预警通知方式",
    },
  ],
  [
    {
      prop: "push_num",
      label: "消息推送次数",
    },
  ],
  [
    {
      prop: "push_frequency",
      label: "消息推送频率",
    },
  ],
];
const ticket_push_data = {
  notification_method: ["1", "2"],
  push_num: "10次",
  push_frequency: "60分钟",
};
const ruleHeaders = [
  {
    prop: "warning_threshold",
    label: "预警阈值",
  },
  {
    prop: "risk_level",
    label: "风险程度",
  },
];
const ruleRows = [
  {
    warning_threshold: "12% - 50% ",
    risk_level: "较大风险",
  },
  {
    warning_threshold: "50% - 100%  ",
    risk_level: "重大风险",
  },
];
const pushHeaders = [
  {
    prop: "warning_threshold",
    label: "预警阈值",
  },
  {
    prop: "risk_level",
    label: "风险程度",
  },
];
const pushRows = [
  {
    warning_threshold: "12% - 50% ",
    risk_level: "较大风险",
  },
  {
    warning_threshold: "50% - 100%  ",
    risk_level: "重大风险",
  },
];
</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  height: calc(100vh - 56px);
  padding: 0 24px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .main_container {
    height: 100%;
    padding: 24px;
    :deep(.gap-title) {
      margin-bottom: 16px;
    }
    .info {
      max-width: 1072px;
      width: 100%;
      padding: 0 8px 0;
      &:not(:last-child) {
        padding-bottom: 24px;
      }
      .push-lists {
        margin-top: 16px;
      }
    }
  }
}
.status {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  $statusObj: (
    enabled: #48ad97,
    disabled: #9e9e9e,
  );
  @each $status, $color in $statusObj {
    &-#{$status} {
      background-color: $color;
    }
  }
}
.status-body {
  display: flex;
  align-items: center;
}
</style>
