<template>
  <div class="monitor-container">
    <el-table :data="tableData" style="width: 100%" header-row-class-name="custom_header_className">
      <el-table-column prop="zt" label="状态" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.zt" :type="typeArr[scope.row.type]">{{ scope.row.zt }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="yjqy" label="预警企业" show-overflow-tooltip>
        <template #default="scope">
          <div class="table-hidden ccw">{{ scope.row.yjqy }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="yjnr" label="预警内容" show-overflow-tooltip>
        <template #default="scope">
          <div class="table-hidden ccw">{{ scope.row.yjnr }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="yjsj" label="预警时间" width="180" show-overflow-tooltip>
        <template #default="scope">
          <div class="ccw ff-AvenirBook">{{ scope.row.yjsj }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
  import { onMounted, ref, reactive, toRefs } from 'vue'
  const typeArr = ['success', 'warning', 'danger']
  const state = reactive({
    tableData: [
      {
        zt: '未解除',
        yjqy: '西安东郊供暖公司',
        yjnr: '压力超限2级预警-一楼大厅压力20装置',
        yjsj: '2025-02-11 16:30:21',
        type: 2,
      },
      {
        zt: '处置中',
        yjqy: '陕西新奥燃气股份有限公司',
        yjnr: '液位超限1级预警-17号储罐液位监测装置',
        yjsj: '2025-02-11 16:22:58',
        type: 1,
      },
      {
        zt: '已解除',
        yjqy: '西安东营化工材料有限公司',
        yjnr: '温度超限2级预警-9号温度监测仪',
        yjsj: '2025-02-11 12:41:35',
        type: 0,
      },
      {
        zt: '已解除',
        yjqy: '西安钻石钨有色金属冶炼有限公司',
        yjnr: '温度超限2级预警-A6号温度监测仪',
        yjsj: '2025-02-10 16:28:32',
        type: 0,
      },
    ],
  })

  const { tableData } = toRefs(state)
  onMounted(() => {})
</script>

<style lang="scss" scoped>
  .monitor-container {
    height: calc(304px - 51px);
    padding: 16px 24px;
    box-sizing: border-box;
  }
</style>
