<template>
  <!-- 报警分析统计 -->
  <div class="alarmAnaly">
    <!-- 表格 -->
    <div class="tableBox animate__animated animate__zoomIn" v-if="tableData.length > 0">
      <el-table v-loading="tableLoading" :data="tableData">
        <el-table-column label="站点编号" prop="stCode" />
        <el-table-column label="监测指标" prop="warnFactorName" />
        <el-table-column label="监测值" prop="warnFactorValueName">
          <template #default="{ row }">
            <span>{{ row.warnFactorValueName }}</span>
            <!-- <span>{{ row.warnFactorValueName.substring(1, row.warnFactorValueName.length - 1) }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="警情类别" prop="warnLevel">
          <template #default="scope">
            <span>{{ scope.row.warnLevel == 'warn' ? '告警' : scope.row.warnLevel == 'early_warn' ? '预警' : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="警情阀值" prop="warnFormulaName" />
        <el-table-column label="预警/报警数" prop="warnCount" />
        <el-table-column label="累计预警时长(H)" prop="continueMinute" />
        <!-- <el-table-column label="警情状态" prop="jobId" /> -->
        <el-table-column label="通讯时间" prop="warnDatetime" />
      </el-table>
      <Pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 暂无数据 -->
    <el-empty v-loading="tableLoading" :image-size="200" v-if="tableData.length == 0" />
  </div>
</template>
<script setup>
import { getAlarmAnalysis } from '@/api/dataAnalysis/syntherticData';

const props = defineProps({
  searchDate: Array,
  stationCode: String,
});
const { proxy } = getCurrentInstance();

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  start: props.searchDate ? props.searchDate[0] : '',
  end: props.searchDate ? props.searchDate[1] : '',
});
const total = ref(0);
const tableData = ref([]);
const tableLoading = ref(false);

// 获取列表数据
function getList(code) {
  // console.log('报警分析---', props.stationCode);
  tableLoading.value = true;
  let params = {
    startTime: props.searchDate ? props.searchDate[0] : '',
    endTime: props.searchDate ? props.searchDate[1] : '',
    stCode: code,
  };
  getAlarmAnalysis(params).then(res => {
    tableData.value = res.data;
    total.value = res.total;
    tableLoading.value = false;
  });
}

// 初始化
onMounted(() => {
  getList(props.stationCode);
});
defineExpose({
  getList,
});
onBeforeUnmount(() => {});
</script>
<style lang="scss">
.alarmAnaly {
  width: 100%;
  .tableBox {
    .el-pagination {
      right: 25%;
    }
    .el-scrollbar {
      height: calc(100vh - 650px);
    }
  }
}
</style>