<template>
  <div class="compact-table-container">
    <el-table ref="singleTableRef" :data="tableData" size="small" style="width: 100%">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="groupName" label="名称" />
      <el-table-column prop="temperatureStr" label="温度" />
      <el-table-column prop="humidityStr" label="湿度" />
    </el-table>
  </div>
  <div style="margin-top: 10px" class="compact-button-container">
    <el-button @click="getGroupDataList" size="small">获取数据</el-button>
    <!-- <el-button @click="setCurrent()" size="small">Clear selection</el-button> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onUnmounted, onMounted, toRefs, computed } from 'vue';
import { type ResponseMultipleValued, type GroupData } from '@/components/mt-edit/store/types';
import emitter from '@/utils/emitter.ts';
import { useDataMapStore } from '@/utils/dataMapStore.ts'; // 引入 store
import { storeToRefs } from 'pinia'; // 用于响应式绑定 store

interface User {
  date: string;
  name: string;
  address: string;
}

const dataMapStore = useDataMapStore();
const { dataMap } = storeToRefs(dataMapStore);

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

onUnmounted(() => {});

function getvirtualMap(): ResponseMultipleValued {
  return {
    config: null,
    data: [
      {
        groupName: '组名1001',
        temperatureId: 10384,
        humidityId: 10385
      },
      {
        groupName: '组名1002',
        temperatureId: 11384,
        humidityId: 11385
      },
      {
        groupName: '组名1003',
        temperatureId: 12384,
        humidityId: 12385
      },
      {
        groupName: '组名1004',
        temperatureId: 13384,
        humidityId: 13385
      }
    ],
    headers: null,
    request: null,
    status: 200,
    statusText: 'test'
  };
}

interface GroupDatStr {
  groupName: string;
  temperatureStr: string;
  humidityStr: string;
}

const tableData: Array<GroupDatStr> = reactive([]);

async function getGroupDataList() {
  // const response: ResponseVue = await axios.get('/api/nrt');
  const response: ResponseMultipleValued = getvirtualMap();

  response.data.forEach((item) => {
    let humidityData = '-';
    if (dataMap.value[item.humidityId]) {
      humidityData =
        dataMap.value[item.humidityId].double + dataMap.value[item.humidityId].node.unit;
    }
    let temperatureData = '-';
    if (dataMap.value[item.temperatureId]) {
      temperatureData =
        dataMap.value[item.temperatureId].double + dataMap.value[item.temperatureId].node.unit;
    }
    tableData.push({
      groupName: item.groupName,
      temperatureStr: humidityData,
      humidityStr: temperatureData
    });
  });
}

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);
  }
});
</script>

<style scoped>
.compact-button-container {
  max-width: 450px;
}

.compact-table-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  transition: transform 0.3s ease;
}

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

.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;
}
/* 修改表格整体背景色 */
::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; /* 深色边框 */
}
</style>
