<template>
  <!-- <div class="scale-controls" style="margin-bottom: 10px">
    <el-button @click="zoomIn" size="small">放大</el-button>
    <el-button @click="zoomOut" size="small">缩小</el-button>
    <span style="margin-left: 10px">{{ Math.round(tablesCale * 100) }}%</span>
  </div> -->
  <div class="compact-table-container-wrapper">
    <div class="compact-table-container">
      <el-table :data="tableNode" class="compact-table" size="small" height="100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="bType" label="类型" />
        <el-table-column prop="dateValue" label="遥值" />
        <el-table-column prop="runState" label="运行状态" />
        <el-table-column prop="sig" label="区间类型" />
      </el-table>
    </div>
  </div>
  <div style="margin-top: 10px" class="compact-button-container">
    <el-button @click="getDataList" size="small">获取数据</el-button>
    <!-- <el-button @click="setCurrent()" size="small">Clear selection</el-button> -->
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, toRefs, onMounted, watch, computed } from 'vue';
import { type ResponseVue } from '@/components/mt-edit/store/types';
import { useDataMapStore } from '@/utils/dataMapStore';
import { globalStore } from '@/components/mt-edit/store/global';
const emit = defineEmits(['update:modelValue']);

let store = useDataMapStore();

interface NodeDTO {
  id: string;
  name: string;
  bType: string;
  dateValue?: string;
  runState?: string;
  sig?: string;
}

// let fontSize = ref('12px');

function getTypeNameByNum(value: number) {
  switch (value) {
    case 1:
      return '遥信';
    case 2:
      return '遥测';
    case 3:
      return '遥控';
    case 4:
      return '遥调';
    default:
      return '其他';
  }
}

const tableNode: Array<NodeDTO> = reactive([]);

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

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

function getRunState(value: number) {
  switch (value) {
    case 0:
      return '不可用/不在线';
    case 1:
      return '工作状态';
    case 2:
      return '取代/屏蔽';
    default:
      return '未知状态';
  }
}

function getNodeSigType(value: number) {
  switch (value) {
    case -2000:
      return '未初始化';
    case 0:
      return '分/复归';
    case 1:
      return '合/告警';
    case 5:
      return '联动关';
    case -10:
      return '预警/低限联动';
    case 10:
      return '报警/高限联动';
    case -20:
      return '低限告警';
    case 20:
      return '高限告警';
    default:
      return '未知区间状态';
  }
}

onMounted(() => {
  getDataList();
});

async function getDataList() {
  // 发送 GET 请求获取数据
  try {
    const response: ResponseVue = await axios.get('/api/nrt');
    // 遍历 response.data 对象的所有属性
    if (response.data) {
      store.setDataMap(response.data);
      for (const key in response.data) {
        const dataItem = response.data[key];

        let valStr = ' - ';
        let val = dataItem.double;
        if (dataItem.bType) {
          switch (dataItem.bType) {
            case 1: //遥信
            case 3: //遥控
            case 4: //遥调
              if (val > 0) valStr = '开';
              else valStr = '关';
              break;
            case 2: //遥测
              valStr = dataItem.double + dataItem.node.unit;
              break;
            default:
              valStr = ' - ';
              break;
          }
        }
        if (dataItem.double !== undefined && dataItem.double) {
          valStr = dataItem.double + dataItem.node.unit;
        }

        tableNode.push({
          id: dataItem.id.toString(),
          name: dataItem.node.name,
          bType: getTypeNameByNum(dataItem.bType),
          dateValue: valStr,
          runState: getRunState(dataItem.runState),
          sig: getNodeSigType(dataItem.sig)
        });
      }
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
}
</script>

<style scoped>
.compact-table-container-wrapper {
  /* max-width: 1000px; */
  /* max-height: 400px; */

  width: 100%;
  height: 100%;

  overflow-y: auto;
}

.compact-table-container {
  width: 100%;
  height: 100%;

  /* max-width: 500px; */
  overflow-y: auto;
  /* font-size: 20; */
  fit: true;
  transition: transform 0.3s ease;
}

.compact-table {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* 修改表格整体背景色 */
::v-deep .el-table {
  background-color: #40beff; /* 浅蓝色背景 */
}

/* 修改表头背景色和文字颜色 */
::v-deep .el-table th.el-table__cell {
  /* background-color: #2e349e; 深蓝色表头 */
  background-color: #21264e;
  color: white; /* 白色文字 */
  font-weight: bold;
}

/* 修改表头边框颜色 */
::v-deep .el-table th.el-table__cell {
  border: 1px solid #151a3d; /* 深色边框 */
}

/* 修改奇偶行背景色 */
::v-deep .el-table .el-table__body-wrapper tr.el-table__row:nth-child(odd) {
  background-color: #40beff; /* 奇数行使用浅蓝色 */
  color: v-bind('props.testColor');
  font-family: v-bind('props.fontFamily');
}

::v-deep .el-table .el-table__body-wrapper tr.el-table__row:nth-child(even) {
  background-color: #2e349e; /* 偶数行使用深蓝色 */
  color: v-bind('props.testColor');
  font-family: v-bind('props.fontFamily');
}

/* 修改鼠标悬停时的行颜色 */
::v-deep .el-table .el-table__body tr:hover > td {
  background-color: rgba(21, 26, 61, 0.7); /* 半透明深蓝色悬停效果，基于#151a3d */
}

/* 修改选中行的颜色 */
::v-deep .el-table .el-table__body tr.current-row > td {
  background-color: #151a3d;
  color: white;
}

/* 修改单元格边框颜色 */
::v-deep .el-table td.el-table__cell {
  border: 1px solid #151a3d; /* 深色边框 */
}

.compact-table-container .el-table {
  font-size: v-bind('computedSize');
  /* font-size: 12px; */
}

.compact-table-container .el-table .el-table__cell {
  padding: 2px 0;
}

.compact-table-container .el-table th.el-table__cell > .cell {
  padding: 0 2px;
}

.compact-table-container .el-table td.el-table__cell > .cell {
  padding: 2px 2px;
}
</style>
