<template>
  <el-row :gutter="20" style="display: flex; align-items: center">
    <el-col :span="24" class="centered-col">
      <el-text class="mx-1" size="large" style="font-size: 16px; margin-bottom: 15px"
        >配置说明</el-text
      >
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="24" class="centered-col">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        :header-cell-style="{ color: '#3b3b3b ' }"
        :style="{ height: '200px' }"
      >
        <!-- 序号 -->
        <el-table-column
          type="index"
          label="序号"
          :resizable="false"
          min-width="60"
          align="center"
        />

        <!-- 站端名称 -->
        <el-table-column
          prop="pilotLamp"
          label="指示灯"
          :resizable="false"
          width="120"
          align="center"
        />

        <el-table-column label="正常时状态" :resizable="false" align="center" min-width="180">
          <template #default="scope">
            <el-tag v-if="!scope.row.order" type="info" :style="{ fontSize: computedSize }"
              >不亮</el-tag
            >
            <el-tag v-else type="primary" :style="{ fontSize: computedSize }">亮</el-tag>
          </template>
        </el-table-column>

        <!-- 事件内容 -->
        <el-table-column
          prop="explain"
          label="说明"
          :resizable="false"
          min-width="280"
          show-overflow-tooltip
          align="left"
        />
      </el-table>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, onMounted, computed } from 'vue';

const props = defineProps({
  fontFamily: {
    type: String,
    default: '黑体'
  },
  fontSize: {
    type: Number,
    default: 12
  },
  testColor: {
    type: String,
    default: '#ffffff'
  }
});

const form = reactive({
  fileId: null,
  fileName: null,
  fileDate: null
});

// 异常设备
interface UnitException {
  pilotLamp: string; // 指示灯
  order: boolean; //正常状态
  explain: string; //说明
}

const tableData: UnitException[] = [
  {
    pilotLamp: '火灾',
    order: false,
    explain: '未隔离系统中一个或多个设备启动了控制器的报警，变亮'
  },

  {
    pilotLamp: '故障',
    order: false,
    explain: '系统发生一个或多个故障，变亮'
  },
  {
    pilotLamp: '隔离',
    order: false,
    explain: '系统中任何设备或防区被隔离，变亮'
  },
  {
    pilotLamp: '主供电源',
    order: true,
    explain: '交流电源接通时亮'
  },
  {
    pilotLamp: '备用电源',
    order: false,
    explain: '交流电源不接通，且备用电源(直流24V)接通时，变亮'
  },
  {
    pilotLamp: '讯响器屏蔽',
    order: false,
    explain: '外部讯响器发生故障时，变亮'
  },
  {
    pilotLamp: '测试模式',
    order: false,
    explain: '控制板处于测试方式时，变亮'
  },
  {
    pilotLamp: '电源故障',
    order: false,
    explain: '主电或备电发生故障，变亮'
  },
  {
    pilotLamp: '讯响器故障',
    order: false,
    explain: '外部讯响器发生故障，变亮'
  },
  {
    pilotLamp: '接地故障',
    order: false,
    explain: '控制回路发生直流接地时，此信号灯亮'
  },
  {
    pilotLamp: '系统故障',
    order: false,
    explain: '控制器中主处理器发生故障，变亮'
  }
];

// 计算属性——既读取又修改
let computedSize = computed({
  // 读取
  get() {
    return props.fontSize + 'px';
  }, // 修改
  set(val) {
    console.log('有人修改了fullName', val);
  }
});
</script>

<style scoped>
.centered-col .el-table {
  font-size: v-bind('computedSize');
  /* font-size: 12px; */
}

.centered-col {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
