<template>
  <div class="left">
    <!-- 运行日志 -->
    <div class="item yunxingrizhi">
      <div class="title">运行日志</div>
      <el-table :data="tableData" :max-height="240">
        <el-table-column prop="updateTime" label="时间" />
        <el-table-column prop="point.signalName" label="设备" />
        <el-table-column prop="val" label="状态">
          <template #default="scope">
            <div>{{ scope.row.val }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 操作记录 -->
    <div class="item caozuojilu">
      <div class="title">操作记录</div>
      <el-table :data="operationTableData" :max-height="240">
        <el-table-column prop="operateTime" label="时间" />
        <el-table-column prop="point.signalName" label="设备" />
        <el-table-column prop="newValue" label="操作状态">
          <template #default="scope">
            <div>{{ scope.row.val }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作员" />
      </el-table>
    </div>

    <!-- 报警信息 -->
    <div class="item baojingxinxi">
      <div class="title">报警信息</div>
      <el-table :data="alarmTableData" :max-height="240">
        <el-table-column prop="alarmTime" label="时间" />
        <el-table-column prop="alarmDesc" label="报警信息" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleAlarmDismiss(scope.row)">解除报警</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts"> 

// Props
defineProps<{
  tableData: any[]
  operationTableData: any[]
  alarmTableData: any[]
}>()

// Emits
const emit = defineEmits<{
  dismissAlarm: [alarm: any]
}>()

// 解除报警
const handleAlarmDismiss = (alarm: any) => {
  emit('dismissAlarm', alarm)
}
</script>

<style scoped>
/* 左侧面板样式在主 App.vue 中 */
</style>

