<script setup lang="ts">
import { getAlarmList } from "@/api/list";
import { onMounted, ref, reactive } from "vue";
import { BaseTable } from "@/components/CustomTable";
defineOptions({
  name: "AlarmList"
});

// TODO 根据需要提取到全局 告警等级~
const alarmLevelStatusEnum: Record<string, any>[] = [
  {
    color: "rgba(232, 13, 13, 1)",
    value: "1",
    label: "紧急",
    isDelete: false,
    icon: "ArrowUpOutlined",
    id: "1"
  },
  {
    color: "rgba(255, 136, 0, 1)",
    value: "2",
    label: "较高",
    isDelete: false,
    id: "2"
  },
  {
    color: "rgba(68, 139, 245, 1)",
    value: "3",
    label: "一般",
    isDelete: false,
    id: "3"
  },
  {
    color: "rgba(179, 214, 0, 1)",
    value: "4",
    label: "低",
    isDelete: true,
    id: "4"
  },
  {
    color: "rgba(81, 177, 6, 1)",
    value: "5",
    label: "较低",
    isDelete: true,
    id: "5"
  },
  {
    color: "rgba(43, 183, 136, 1)",
    value: "6",
    label: "非常低",
    isDelete: true,
    id: "6"
  }
];

const columns = [
  {
    type: "selection"
  },
  {
    label: "告警名称",
    property: "name"
  },
  {
    label: "告警代码",
    property: "code"
  },
  // TODO 告警等级渲染
  {
    label: "告警等级",
    property: "level"
  },
  {
    label: "设备组",
    property: "deviceGroup"
  },
  {
    label: "告警日期",
    property: "createTime"
  }
  // TODO 补充删除功能
  // {
  //   label: "设备组",
  //   property: "name"
  // }
];

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const pagination = ref({ current: 1, pageSize: 10, total: 0 });

const listData = ref([]);

// const searchValue = ref("");

const formData = reactive({
  deviceSort: "",
  deviceState: "",
  isEnabled: ""
});

const dataLoading = ref(true);

const getList = async () => {
  try {
    const { data } = await getAlarmList();
    listData.value = data.list;
    console.log(data.list);
    pagination.value = {
      ...pagination.value,
      total: data.list.length
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};
onMounted(() => {
  getList();
});
</script>

<template>
  <div class="p-4 main">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
      <el-form-item label="告警名称">
        <el-select
          v-model="formData.deviceState"
          placeholder="告警名称"
          clearable
        >
          <el-option label="名称1" value="1" />
          <el-option label="名称2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="告警等级">
        <el-select
          v-model="formData.deviceState"
          placeholder="告警等级"
          clearable
        >
          <el-option
            v-for="(v, k) in alarmLevelStatusEnum"
            :key="k"
            :label="v.label"
            :value="v.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div
      v-loading="dataLoading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <template v-if="pagination.total > 0">
        <BaseTable :total="48" :dataSource="listData" :columns="columns" />
      </template>
    </div>
  </div>
</template>
