<template>
  <el-form :model="form" label-width="auto" style="max-width: 100%; margin-left: 2vh" inline>
    <!-- 第一行 -->
    <el-row :gutter="1">
      <!-- 设备名称 -->
      <el-col :span="6">
        <el-form-item label="设备名称">
          <el-input v-model="form.fileName" style="width: 100%" />
        </el-form-item>
      </el-col>

      <!-- 所属展柜 -->
      <el-col :span="6">
        <el-form-item label="所属展柜">
          <el-input v-model="form.fileName" />
        </el-form-item>
      </el-col>

      <!-- 所属展柜 -->
      <el-col :span="6">
        <el-form-item label="子系统" style="width: 100%">
          <el-select v-model="form.fileId" style="width: 100%">
            <el-option label="消防系统" value="shanghai" />
            <el-option label="识别系统" value="beijing" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row :gutter="1">
      <el-col :span="6" style="display: flex; align-items: left">
        <el-form-item label="告警级别" style="width: 100%">
          <el-select v-model="form.fileDate" style="width: 100%">
            <el-option label="危急" value="shanghai" />
            <el-option label="一般" value="beijing" />
            <el-option label="正常" value="chengdu" />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 创建时间 -->
      <el-col :span="8">
        <el-form-item label="时间" style="display: flex; align-items: left">
          <el-date-picker
            v-model="form.fileDate"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="default"
          />
        </el-form-item>
      </el-col>

      <el-col :span="5"> </el-col>

      <el-col :span="5">
        <el-button type="primary">查询</el-button>
        <el-button type="info">重置</el-button>
      </el-col>
    </el-row>
  </el-form>

  <el-table
    :data="tableData"
    style="width: 100%; margin-left: 2vh"
    :row-class-name="tableRowClassName"
    :header-cell-style="{ color: '#3b3b3b ' }"
    :style="{ 'max-height': '470px' }"
  >
    <!-- 序号 -->
    <el-table-column type="index" label="序号" :resizable="false" min-width="60" align="center" />

    <!-- 站端名称 -->
    <el-table-column
      prop="inkanetName"
      label="站端名称"
      :resizable="false"
      width="180"
      align="center"
    />

    <!-- 时间 -->
    <el-table-column prop="date" label="时间" :resizable="false" min-width="180" align="center" />

    <!-- 设备名称 -->
    <el-table-column
      prop="equipmentName"
      label="设备名称"
      :resizable="false"
      min-width="180"
      align="center"
    />

    <!-- 事件内容 -->
    <el-table-column
      prop="eventContent"
      label="事件内容"
      :resizable="false"
      min-width="280"
      show-overflow-tooltip
      align="center"
    />

    <!-- 当前测量值 -->
    <el-table-column
      v-if="unauthorizedBool"
      prop="measurementValue"
      label="当前测量值"
      :resizable="false"
      min-width="180"
      show-overflow-tooltip
      align="center"
    />

    <!-- 越限范围 -->
    <el-table-column
      v-if="unauthorizedBool"
      prop="limit"
      label="越限范围"
      :resizable="false"
      min-width="180"
      show-overflow-tooltip
      align="center"
    />

    <!-- 偏移量 -->
    <el-table-column
      v-if="unauthorizedBool"
      prop="offset"
      label="偏移量"
      :resizable="false"
      min-width="180"
      show-overflow-tooltip
      align="center"
    />

    <!-- 告警级别 -->
    <el-table-column
      v-if="wholeSiteMessageBool"
      prop="alarmLevel"
      label="告警级别"
      :resizable="false"
      align="center"
      min-width="180"
    >
      <template #default="scope">
        <el-tag v-if="scope.row.alarmLevel === 1" type="danger">危急</el-tag>
        <el-tag v-else-if="scope.row.alarmLevel === 2" type="warning">一般</el-tag>
        <el-tag v-else type="primary">正常</el-tag>
      </template>
    </el-table-column>

    <!-- 所属子系统 -->
    <el-table-column
      prop="subsystem"
      label="所属子系统"
      :resizable="false"
      min-width="180"
      align="center"
    />

    <!-- 处理结果 -->
    <el-table-column
      v-if="wholeSiteMessageBool || unauthorizedBool"
      prop="processingStructure"
      label="处理结果"
      :resizable="false"
      min-width="180"
      align="center"
    />

    <!-- 操作 -->
    <el-table-column label="操作" :resizable="false" align="center" min-width="180" fixed="right">
      <template #default="scope">
        <el-button v-if="scope.row.operation === 0" type="primary" size="small">确认</el-button>
        <el-tag v-else type="primary">已解决</el-tag>
      </template>
    </el-table-column>
  </el-table>

  <div style="margin-left: 2vh">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20]"
      :pager-count="3"
      size="default"
      layout=",total,sizes,-> ,prev, pager, next"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from 'vue';

onMounted(() => {
  loadRequestUrl(props.dataSource);
});

const props = defineProps({
  dataSource: {
    type: String,
    default: '--'
  }
});

let requestUrl = ref<string>();
let wholeSiteMessageBool = ref(false); // 全站报文
let unitExceptionBool = ref(false); // 异常设备
let unauthorizedBool = ref(false); // 越权消息

const loadRequestUrl = (moduleId: string) => {
  console.log('moduleId:', moduleId);
  switch (moduleId) {
    case 'wholeSiteMessage':
      tableData.value = [];
      wholeSiteMessageBool.value = true;
      unitExceptionBool.value = false;
      unauthorizedBool.value = false;
      requestUrl.value = '/api/wholeSiteMessage';
      //发送请求
      tableData.value = wholeSiteMessageList;
      break;
    case 'unitException':
      tableData.value = [];
      wholeSiteMessageBool.value = false;
      unitExceptionBool.value = true;
      unauthorizedBool.value = false;
      requestUrl.value = '/api/unitException';
      //发送请求
      tableData.value = unitExceptionList;
      break;
    case 'unauthorized':
      tableData.value = [];
      wholeSiteMessageBool.value = false;
      unitExceptionBool.value = false;
      unauthorizedBool.value = true;
      requestUrl.value = '/api/unauthorized';
      //发送请求
      tableData.value = unauthorizedBoolList;
      break;
  }
};

watch(
  () => props.dataSource,
  (newVal, oldVal) => {
    console.log('moduleId:', newVal, oldVal);
    loadRequestUrl(newVal);
  }
);

let currentPage = ref(1);
let pageSize = ref(10);
let pageTotal = ref(45);

const handleSizeChange = (val: number) => {
  console.log('size点击:', `${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log('Current点击:', `current page: ${val}`);
};

const form = reactive({
  fileId: null,
  fileName: null,
  fileDate: null
});

// 全局报文
interface WholeSiteMessage {
  inkanetName: string; // 站端名称
  date: string; // 时间
  equipmentName: string; // 设备名称
  eventContent: string; // 事件内容
  alarmLevel: number; // 告警级别   1危急  2一般  3正常
  subsystem: string; // 所属子系统
  processingStructure: string; // 处理结果
  operation: number; // 操作   0确认  1已确认
}

// 越权消息
interface UnauthorizedBool {
  inkanetName: string; // 站端名称
  date: string; // 时间
  equipmentName: string; // 设备名称
  eventContent: string; // 事件内容
  offset: number; // 偏移量
  limit: string; // 越限范围
  measurementValue: string; // 当前测量值
  subsystem: string; // 所属子系统
  processingStructure: string; // 处理结果
  operation: number; // 操作   0确认  1已确认
}

// 异常设备
interface UnitException {
  inkanetName: string; // 站端名称
  date: string; // 时间
  equipmentName: string; // 设备名称
  eventContent: string; // 事件内容
  subsystem: string; // 所属子系统
  operation: number; // 操作   0确认  1已确认
}

const tableRowClassName = ({ row }: { row: WholeSiteMessage }) => {
  if (row.alarmLevel === 1) {
    return 'danger-row';
  } else if (row.alarmLevel === 2) {
    return 'warning-row';
  }
  return '';
};
let tableData = ref<any[]>([]);

const unitExceptionList: UnitException[] = [
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警,生',
    subsystem: '消防系统',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报',
    subsystem: '消防系统',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警',
    subsystem: '消防系统',
    operation: 0
  }
];

const unauthorizedBoolList: UnauthorizedBool[] = [
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警,生产综合楼1楼蓄电池室3号感烟探头报警',
    offset: 10,
    limit: '10-20',
    measurementValue: '10.0',
    subsystem: '消防系统',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警,生产综合楼1楼蓄电池室3号感烟探头报警',
    offset: 10,
    limit: '10-20',
    measurementValue: '10.0',
    subsystem: '消防系统',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警,生产综合楼1楼蓄电池室3号感烟探头报警',
    offset: 10,
    limit: '10-20',
    measurementValue: '10.0',
    subsystem: '消防系统',
    processingStructure: '成功',
    operation: 0
  }
];

const wholeSiteMessageList: WholeSiteMessage[] = [
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警,生产综合楼1楼蓄电池室3号感烟探头报警',
    alarmLevel: 1,
    subsystem: '消防系统',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-01-27 15:28:08',
    equipmentName: '荣耀科技',
    eventContent: '荣耀科技打卡指纹识别告警',
    alarmLevel: 3,
    subsystem: '指纹识别',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-01-25 12:48:08',
    equipmentName: '电子围栏',
    eventContent: '电子围栏一区（东一）入侵告警',
    alarmLevel: 2,
    subsystem: '安全防范',
    processingStructure: '成功',
    operation: 1
  },
  {
    inkanetName: '南河变电站',
    date: '2026-01-26 15:28:08',
    equipmentName: '荣耀科技',
    eventContent: '荣耀科技研发部人脸识别告警',
    alarmLevel: 3,
    subsystem: '人脸识别',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警',
    alarmLevel: 3,
    subsystem: '消防系统',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-01-27 15:28:08',
    equipmentName: '荣耀科技',
    eventContent: '荣耀科技打卡指纹识别告警',
    alarmLevel: 3,
    subsystem: '指纹识别',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-01-25 12:48:08',
    equipmentName: '电子围栏',
    eventContent: '电子围栏一区（东一）入侵告警',
    alarmLevel: 3,
    subsystem: '安全防范',
    processingStructure: '成功',
    operation: 1
  },
  {
    inkanetName: '南河变电站',
    date: '2026-01-26 15:28:08',
    equipmentName: '荣耀科技',
    eventContent: '荣耀科技研发部人脸识别告警',
    alarmLevel: 3,
    subsystem: '人脸识别',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-02-04 20:48:08',
    equipmentName: '3号感烟探头',
    eventContent: '生产综合楼1楼蓄电池室3号感烟探头报警',
    alarmLevel: 3,
    subsystem: '消防系统',
    processingStructure: '成功',
    operation: 0
  },
  {
    inkanetName: '南河变电站',
    date: '2026-01-27 15:28:08',
    equipmentName: '荣耀科技',
    eventContent: '荣耀科技打卡指纹识别告警',
    alarmLevel: 3,
    subsystem: '指纹识别',
    processingStructure: '成功',
    operation: 0
  }
];
</script>

<style>
.el-table .danger-row {
  /* background-color: #3b3b3b !important; */
  color: rgb(196, 86, 86) !important;
}

.el-table .warning-row {
  /* background-color: #fdf6ec !important; */
  color: rgb(184, 130, 48) !important;
}
</style>
