<template>
  <el-dialog title="实时数据详情" v-model='dialogVisible' @close="handleClose" v-bind="dialogBig" >
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="被检设备1" name="channel1">
        <div class="table-toolbar">
          <el-form-item label="被检设备通道号" prop="createId">
               <el-select v-model="timeRange" placeholder="选择时间范围" style="width: 150px;">
                  <el-option label="通道1" value="1"></el-option>
                  <el-option label="通道2" value="2"></el-option>
                  <el-option label="通道3" value="3"></el-option>
                  <el-option label="通道4" value="4"></el-option>
               </el-select>
          </el-form-item>    
          <el-button type="primary" @click="exportData">导出数据</el-button>
        </div>
        <el-table 
          :data="tableData" 
          :header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
          :cell-style="{ textAlign: 'center' }"
          style="width: 100%"
          :style="{ height: '400px',maxHeight: '400px',overflow:'hidden'}">
          <el-table-column prop="monitorNum" label="数据时标" width="180"/>
          <el-table-column label="被检设备1-通道1">
            <el-table-column prop="Ua" label="A相(V)">
            </el-table-column>
            <el-table-column prop="Ub" label="B相(V)">
            </el-table-column>
            <el-table-column prop="Uc" label="C相(V)">
            </el-table-column>
          </el-table-column>
          <el-table-column label="标准设备-通道1">
            <el-table-column prop="Ua" label="A相(V)">
            </el-table-column>
            <el-table-column prop="Ub" label="B相(V)">
            </el-table-column>
            <el-table-column prop="Uc" label="C相(V)">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
       <el-tab-pane label="被检设备2" name="channel2"></el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup lang='tsx' name='realTimeDataAlign'>
import { dialogBig } from "@/utils/elementBind";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);
const activeTab = ref('channel1');
const timeRange = ref('1');


// 表格数据示例
const tableData = ref([
  {
    monitorNum: '2023-05-20 10:30:01',
    Ua: '220.5V',
    Ub: '219.8V',
    Uc: '220.2V',
    Ia: '4.98A',
    Ib: '5.01A',
    Ic: '4.99A'
  },
  {
    monitorNum: '2023-05-20 10:30:04',
    Ua: '220.3V',
    Ub: '220.1V',
    Uc: '219.9V',
    Ia: '5.02A',
    Ib: '4.99A',
    Ic: '5.00A'
  },
    {
    monitorNum: '2023-05-20 10:30:07',
    Ua: '220.5V',
    Ub: '219.8V',
    Uc: '220.2V',
    Ia: '4.98A',
    Ib: '5.01A',
    Ic: '4.99A'
  },
  {
    monitorNum: '2023-05-20 10:30:10',
    Ua: '220.3V',
    Ub: '220.1V',
    Uc: '219.9V',
    Ia: '5.02A',
    Ib: '4.99A',
    Ic: '5.00A'
  }
]);

const open = async () => {
  dialogVisible.value = true;
};

// 刷新数据
const refreshData = () => {
  ElMessage.info('正在刷新数据...');
  // 这里可以添加实际的数据刷新逻辑
};

// 导出数据
const exportData = () => {
  ElMessage.success('数据导出成功');
  // 这里可以添加实际的数据导出逻辑
};

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};

defineExpose({ open });
</script>

<style scoped lang="scss">
.table-toolbar {
  display: flex;
  justify-content: space-between; // 关键修改：将子元素分布到两端
}

// 移除这个样式，避免影响布局
// .table-toolbar .el-button {
//   margin-right: 10px;
// }

:deep(.el-dialog__body) {
  padding: 10px 20px 20px 20px;
}
</style>