<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>
          <template #create_time="{ valueData }">
            <span>{{ dateStringToDate(valueData.create_time) }}</span>
          </template>
          <template #update_time="{ valueData }">
            <span>{{ dateStringToDate(valueData.update_time) }}</span>
          </template>
        </Info>
      </div>
      <gap-title :hasLine="true" title="指标表达式"></gap-title>
      <div class="info">
        <div class="indicator-expression">
          <bg-code-editor v-model="info.indicator_expression" disabled></bg-code-editor>
        </div>
      </div>
      <gap-title :hasLine="true" title="预警范围"></gap-title>
      <div class="info">
        <bg-table border ref="ruletable" :headers="warningScopeHeaders" :rows="warningScopeRows" height="100%">
          <template #metric="{ row }">
            <span>{{ row.metric_name }}/{{ row.metric_label }}</span>
          </template>
          <template #is_required="{ row }">
            <span>{{ row.is_required ? "是" : "否" }}</span>
          </template>
          <template #is_linked="{ row }">
            <span>{{ row.is_linked ? "是" : "否" }}</span>
          </template>
        </bg-table>
      </div>
      <gap-title :hasLine="true" title="预警规则类型"></gap-title>
      <div class="info">
        <Info :labelData="rule_label" :valueData="rule_data">
          <template #alert_rule_type="{ valueData }">
            <span>
              {{ ruleTypeOptions[valueData.alert_rule_type]?.label || "" }}
            </span>
          </template>
        </Info>
      </div>
      <gap-title :hasLine="true" title="高级配置"> </gap-title>
      <div class="info">
        <Info :labelData="advanced_label" :valueData="advanced_data"></Info>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { useRoute } from "vue-router";
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";
import { GetRuleTypeOptions, Empty, dateStringToDate } from "@/components/env.js";
const route = useRoute();
const { id, type_name, target_name } = route.query;
const STATUS_OBJ = {
  1: "启用",
  2: "禁用",
};
const unitOptions = {
  s: "秒",
  m: "分钟",
  h: "小时",
};
const labelData = [
  [
    {
      label: "预警分类",
      prop: "warning_target",
    },
    {
      label: "预警对象",
      prop: "warning_type",
    },
  ],
  [
    {
      label: "预警指标",
      prop: "warning_index",
    },
    {
      label: "启用状态",
      prop: "status",
    },
  ],
  [
    {
      label: "创建人",
      prop: "create_by",
    },
    {
      label: "创建时间",
      prop: "create_time",
    },
  ],
  [
    {
      label: "更新时间",
      prop: "update_time",
    },
  ],
];
const info = ref({});
const rule_label = [
  [
    {
      prop: "alert_rule_type",
      label: "预警规则类型",
    },
  ],
];
const rule_data = ref({});
const ruleTypeOptions = ref({});
const getRuleTypeOptions = async () => {
  ruleTypeOptions.value = await GetRuleTypeOptions();
  console.log("ruleTypeOptions.value: ", ruleTypeOptions.value);
  getInfoData();
};
const advanced_label = [
  [
    {
      prop: "duration",
      label: "持续时间",
    },
  ],
  [
    {
      prop: "check_period",
      label: "检查周期",
    },
  ],
];
const advanced_data = ref({});
const warningScopeHeaders = [
  {
    prop: "variable_name",
    label: "变量名称",
    width: 100,
  },
  {
    prop: "metric",
    label: "指标标签",
  },
  {
    prop: "chinese_name",
    label: "中文名称",
  },
  {
    prop: "is_required",
    label: "是否必填",
    width: 150,
  },
  {
    prop: "is_linked",
    label: "是否联动",
    width: 150,
  },
];
const warningScopeRows = ref([]);
const getInfoData = () => {
  axios
    .get("/v1/api/metric_config", {
      params: {
        id: id,
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        let {
          metric_name,
          is_enabled,
          expr,
          created_by,
          created_at,
          updated_at,
          alert_range,
          duration,
          duration_unit,
          check_period,
          alert_rule_type,
        } = res.data.data;
        info.value = {
          warning_target: type_name,
          warning_type: target_name,
          warning_index: metric_name,
          status: is_enabled,
          indicator_expression: expr,
          created_by: created_by,
          create_time: created_at,
          update_time: updated_at,
        };
        warningScopeRows.value = alert_range || [];
        advanced_data.value = {
          duration: duration == 0 ? "直接产生预警" : duration + unitOptions[duration_unit],
          check_period: check_period + "分钟",
        };
        rule_data.value = {
          alert_rule_type: alert_rule_type,
        };
      } else {
        ElMessage.error(res.data.data);
      }
    });
};
onBeforeMount(() => {
  getRuleTypeOptions();
});
</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;
      }
      .indicator-expression {
        height: 300px;
        width: 100%;
        :deep(.vue-ace-editor) {
          margin-top: 0;
        }
      }
    }
    :deep(.bg-table) {
      th > .cell,
      td > .cell {
        line-height: 20px;
      }
    }
  }
}
.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>
