<template>
  <div class="tableBox">
    <el-tabs v-model="activeTab" type="card" class="tabs-container">
      <el-tab-pane v-for="(channel, index) in channels" :key="index" :label="'OPCH' + (index + 1)">
        <el-table :data="channelData[channel]" border height="80vh" stripe style="width: 100%">
          <el-table-column align="center" label="序号" type="index" width="60"/>
          <el-table-column align="center" label="信号通道" prop="信号通道" width="130"/>
          <el-table-column align="center" label="信号名称" prop="信号名称"/>
          <el-table-column align="center" label="信号地址" prop="信号地址" width="120"/>
          <el-table-column align="center" label="信号状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.当前值 == '1' ? 'success' : 'warning'" effect="dark">
                {{ scope.row.当前值 == '1' ? 'true' : 'false' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="变化时间" prop="变化时间" width="200"/>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {inject, onMounted, onUnmounted, reactive, ref} from 'vue'

const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')

const channels = ['AssemblyCH1', 'AssemblyCH2', 'AssemblyCH3', 'AssemblyCH4']
const activeTab = ref('0') // 默认显示第一个tab
const channelData = reactive({
  OPCH1: [],
  OPCH2: [],
  OPCH3: [],
  OPCH4: []
})
let autoQueryTimer = null

const searchTable = () => {
  var param = []
  var Data = CreateData('11', 'CRRC_平台信号监控_查询', param)
  ExecDatabase(Data).then(response => {
    // 清空现有数据
    channels.forEach(channel => {
      channelData[channel] = []
    })
    
    if (response?.data) {
      // 按通道分类数据
      response.data.forEach(item => {
        const channel = item.信号通道
        if (channels.includes(channel)) {
          channelData[channel].push(item)
        }
      })
    }
  })
}

const startAutoQuery = () => {
  if (autoQueryTimer) return
  searchTable()
  autoQueryTimer = setInterval(() => {
    searchTable()
  }, window.g.keyDataSearchCycle * 1000) // 将秒转换为毫秒
}

onMounted(() => {
  startAutoQuery()
})

onUnmounted(() => {
  if (autoQueryTimer) {
    clearInterval(autoQueryTimer)
    autoQueryTimer = null
  }
})
</script>

<style lang="scss" scoped>
.tableBox {
  width: 97vw;
  margin: 2vh auto 0 auto;
  border: 1px solid #9f9f9f;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;

  .tabs-container {
    :deep(.el-tabs__item) {
      font-size: 16px;
      font-weight: bold;
    }
    
    :deep(.el-tabs__item.is-active) {
      color: #409EFF;
    }
  }
}
</style>
