<template>
  <!--右下 暂降事件聚合成功暂降事件聚合成功列表 -->
  <div class="plan">
    <div class="titleBox">
      事件列表
      <div class="titles">
        <div
          class="react-right"
          :class="flag == 0 ? 'titleClick' : ''"
          @click="flag = 0"
        >
          <span class="text"> 暂降</span>
        </div>
        <div
          class="react-right"
          :class="flag == 1 ? 'titleClick' : ''"
          @click="flag = 1"
        >
          <span class="text"> 谐波</span>
        </div>
      </div>
    </div>
    <div class="tableBox" v-if="flag == 0">
      <el-table
      :scrollbar-always-on="true"   :data="tableData"
        height="250px"
        size="small"
        :header-cell-style="{ textAlign: 'center' }"
        border
      >
        <el-table-column prop="date" align="center" label="时间" width="160" />
        <el-table-column
          prop="name"
          align="center"
          label="事件关联分析名称"
          width="160"
        />
        <el-table-column prop="cj" align="center" label="事件关联分析描述" />

        <el-table-column prop="address" align="center" label="操作" width="90">
          <template #default="scope">
            <el-button size="small" type="primary" text> 影响范围 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tableBox" v-if="flag == 1">
      <el-table
      :scrollbar-always-on="true"   :data="tableData"
        height="250px"
        size="small"
        :header-cell-style="{ textAlign: 'center' }"
        border
      >
        <el-table-column prop="date" align="center" label="时间" width="160" />
        <el-table-column
          prop="center"
          align="center"
          label="事件内容"
        
        />
        <!-- <el-table-column prop="cj" align="center" label="事件关联分析描述" /> -->

        <el-table-column prop="address" align="center" label="操作" width="70">
          <template #default="scope">
            <el-button size="small" type="primary" text> 编辑 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
const flag = ref(0); // 0 for 暂降, 1 for 谐波
const tableData = [
  {
    date: "2024-01-01 17:49:03",
    name: "2024-01-01 17:49:03.475",
    cj: "事件关联分析编号2024-01-01 17:49:03.475共包含1个事件",
    center:
      "监测点ID:xxxxxxxxx;起始时间:2024-01-01 17:49:03;结束时间:2024-01-01 17:49:03.475;触发类型:暂降;",
  },
  {
    date: "2024-01-02 19:28:40",
    name: "2024-01-02 19:28:40.090",
    cj: "事件关联分析编号2024-01-01 17:49:03.475共包含1个事件",
    center:
      "监测点ID:xxxxxxxxx;起始时间:2024-01-01 17:49:03;结束时间:2024-01-01 17:49:03.475;触发类型:暂降;",
  },
  {
    date: "2024-01-02 19:29:35",
    name: "2024-01-02 19:28:40.090",
    cj: "事件关联分析编号2024-01-01 17:49:03.475共包含1个事件",
    center:
      "监测点ID:xxxxxxxxx;起始时间:2024-01-01 17:49:03;结束时间:2024-01-01 17:49:03.475;触发类型:暂降;",
  },
  {
    date: "2024-01-02 19:29:52",
    name: "2024-01-02 19:28:40.090",
    cj: "事件关联分析编号2024-01-01 17:49:03.475共包含1个事件",
    center:
      "监测点ID:xxxxxxxxx;起始时间:2024-01-01 17:49:03;结束时间:2024-01-01 17:49:03.475;触发类型:暂降;",
  },
  {
    date: "2024-01-02 19:29:52",
    name: "2024-01-02 19:28:40.090",
    cj: "事件关联分析编号2024-01-01 17:49:03.475共包含1个事件",
    center:
      "监测点ID:xxxxxxxxx;起始时间:2024-01-01 17:49:03;结束时间:2024-01-01 17:49:03.475;触发类型:暂降;",
  },
];
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.plan {
  width: 100%;
  height: 295px;
  .titles {
    margin-right: 10px;
    .react-right {
      width: 60px !important;
      line-height: 20px !important;
      font-size: 14px !important;
    }
  }
}
</style>
