<template>
  <div class="p-5">
    <div class="w-30% flex items-center gap-4 mb-4">
      <span class="whitespace-nowrap">选择时间：</span>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="flex-grow w-full"
        clearable
      />
      <el-button type="primary" @click="search">搜索</el-button>
    </div>

    <div>
      <el-card shadow="hover" class="mb-4">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">井盖统计</span>
          </div>
        </template>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="stat-card bg-blue-50 p-4 rounded-lg">
            <div class="text-blue-500 text-lg font-medium">当年报警数</div>
            <div class="text-2xl font-bold mt-2">1</div>
          </div>
          <div class="stat-card bg-green-50 p-4 rounded-lg">
            <div class="text-green-500 text-lg font-medium">当月报警数</div>
            <div class="text-2xl font-bold mt-2">1</div>
          </div>
          <div class="stat-card bg-red-50 p-4 rounded-lg">
            <div class="text-red-500 text-lg font-medium">当天报警数</div>
            <div class="text-2xl font-bold mt-2">0</div>
          </div>
        </div>
      </el-card>
    </div>

    <el-table :data="tableData" v-loading="tableLoading" border stripe>
      <el-table-column prop="imeiCardNumber" label="设备编号" width="200" />
      <el-table-column prop="batteryLevel" label="电池电量" />
      <!-- <el-table-column prop="alarmStatus" label="报警状态" /> -->
      <el-table-column label="报警状态" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.alarmStatus === 0 ? 'success' : 'danger'"
            effect="dark"
          >
            <div class="flex items-center">
              <AlertTriangle v-if="scope.row.alarmStatus === 1" class="w-4 h-4 mr-1" />
              {{ scope.row.alarmStatus === 0 ? "正常" : "告警" }}
            </div>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="tiltAngle" label="倾斜角度" />
      <el-table-column prop="createTime" label="创建时间" width="400" />
    </el-table>

    <pagination
      v-show="totals > 0"
      :total="totals"
      v-model:page="currentPage"
      v-model:limit="pageSize"
      @pagination="getManholeAllData"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {getflipalarmDataAll} from "@/api/ldzh/index";
import {parseTime, parseTimeEnd} from "@/utils/ruoyi.js";

const tableData = ref([]);
const totals = ref(0);
const dateRange = ref([]);
const tableLoading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);

// 构建查询参数
const buildQueryParams = () => {
  return ({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    query: [
      { column: "alarm_status", type: "ne", value: "0" },
      ...(dateRange.value?.length === 2
          ? [
            {
              column: "create_time",
              type: "between",
              value: `${parseTime(dateRange.value[0])},${parseTimeEnd(dateRange.value[1])}`,
            },
          ]
          : []),
    ],
  })
};

// 获取数据
const getManholeAllData = async () => {
  // console.log(12321, buildQueryParams());
  try {
    tableLoading.value = true;
    const res = await getflipalarmDataAll(buildQueryParams());

    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    totals.value = res.data.total;
    tableData.value = res.data.records || [];
    console.log(
      "初始数据值",
      res,
      parseTime(dateRange.value[0]),
        parseTimeEnd(dateRange.value[1])
    );
    if (totals.value === 0) {
      ElMessage.warning("暂无数据");
    }
  } catch (error) {
    console.error("获取数据失败:", error);
    ElMessage.error("数据加载失败，请稍后重试");
  } finally {
    tableLoading.value = false;
  }
};

const getEchartsAllData = async () => {
  try {
    let etime = "2025-01-01 00:00:00,2025-03-28 23:59:59";
    let end = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      query: [
        { column: "alarm_status", type: "ne", value: "0" },
        {
          column: "create_time",
          type: "between",
          value: `${etime}`,
        },
      ],
    };
    console.log("获取图标数据条件", end);

    const res = await getflipalarmDataAll(end);
    console.log("获取图标数据值", res);

    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    if (totals.value === 0) {
      ElMessage.warning("暂无数据");
    }
  } catch (error) {
    console.error("获取数据失败:", error);
    ElMessage.error("数据加载失败，请稍后重试");
  } finally {
  }
};

getEchartsAllData();

// 搜索时重置页码
const search = () => {
  currentPage.value = 1;
  getManholeAllData();
};

// 初始化加载
onMounted(getManholeAllData);
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
  max-width: 400px;
}
</style>
