<template>
  <div class="my-warn-detail">
    <div class="breadcrumb">
      <bg-breadcrumb />
    </div>
    <div class="content bg-scroll">
      <warn-detail :label-data="labelData" :value-data="info" :tabLabels="tabLabels" :tabDatas="tabDatas">
        <template #status="{ item, valueData }">
          <span class="status-body">
            <span class="status" :class="`status-${valueData.status}`"></span>
            <span>{{ statusOptions[valueData[item.prop]] }}</span>
          </span>
        </template>
      </warn-detail>
    </div>
  </div>
</template>

<script setup>
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import warnDetail from "@/components/warn-detail/index.vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { ref, onBeforeMount } from "vue";
import { dateStringToDate } from "@/components/env";
const route = useRoute();
const { id } = route.query;
const ruleTypeOptions = ref({});
const statusOptions = {
  1: "已恢复",
  2: "未恢复",
  3: "已关闭",
};
const riskLevels = {
  1: "低风险",
  2: "一般风险",
  3: "较大风险",
  4: "重大风险",
};
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 = ref({});
const tabLabels = [
  {
    label: "推送记录",
    prop: "push",
  },
  {
    label: "处置记录",
    prop: "dispose",
  },
];
const tabDatas = ref({});
const pushType = {
  1: "自动推送",
  2: "手动推送",
};
const getInfo = () => {
  const params = {
    id,
  };
  axios.get("/v1/api/alert", { params }).then((res) => {
    if (res.data.code == 200) {
      const { data } = res.data;
      info.value = {
        warning_point: data.alert_point,
        warning_type: data.class_parent_name,
        warning_index: data.class_name,
        risk_level: riskLevels[data.risk_level],
        status: data.status,
        warning_threshold: `${data.alert_condition.thresholds_min}${
          ruleTypeOptions.value[data.alert_rule_type]?.unit || ""
        }-${data.alert_condition.thresholds_max}${ruleTypeOptions.value[data.alert_rule_type]?.unit || ""}`,
        current_alarm_value: data.current_value + (ruleTypeOptions.value[data.alert_rule_type]?.unit || ""),
        warning_time: dateStringToDate(data.alert_time),
      };
      tabDatas.value = {
        push:
          data.push_records?.map((e) => {
            return {
              method: e.notify_method,
              person: e.system_account,
              push_time: dateStringToDate(e.push_time),
              push_type: pushType[e.push_type],
              status: e.status,
            };
          }) || [],
        dispose:
          data.disposed_list?.map((e) => {
            return {
              status: e.is_disposed,
              feedback: e.disposal_content,
              feedback_time: dateStringToDate(e.disposal_time),
              feedback_person: e.disposal_user,
            };
          }) || [],
      };
    }
  });
};
const GetRuleTypeOptions = () => {
  const params = {
    page: 1,
    page_size: 10000000000000,
    class: 3,
  };
  axios.get(`/v1/api/dict`, { params }).then((res) => {
    if (res.data.code == 200) {
      res.data.data?.forEach((e) => {
        let isEmptyOption = e.name == "空";
        ruleTypeOptions.value[e.id] = {
          label: e.name,
          unit: isEmptyOption ? "" : e.unit,
        };
      });
      getInfo();
    }
  });
};
onBeforeMount(() => {
  GetRuleTypeOptions();
});
</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;
    .status {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 8px;
      $statusObj: (
        1: #48ad97,
        3: #9e9e9e,
        2: #3759be,
      );
      @each $status, $color in $statusObj {
        &-#{$status} {
          background-color: $color;
        }
      }
    }
    .status-body {
      display: flex;
      align-items: center;
    }
  }
}
</style>
