<!-- 实时数据表格 -->
<script setup>
import { ref } from "vue";
import { useWsStore } from "../store";

const store = useWsStore();
const listData = ref((store.data2.lineDetailData || Array(3).fill({})).map(
  (item, index) => ({
    productLine: item.productLine || "---",
    mbt: item.edgingInput || "---",
    mbb: item.edgingOutput || "---",
    dkt: item.drillingInput || "---",
    dkb: item.drillingOutput || "---",
    dmt: item.coatingInput || "---",
    dmb: item.coatingOutput || "---",
    syt: item.silkInput || "---",
    syb: item.silkOutput || "---",
    ght: item.solidificationInput || "---",
    ghb: item.solidificationOutput || "---",
    gh1: item.temperingInput || "---",
    gh2: item.temperingOutput || "---",
    bzt: item.finalInput || "---",
    bzb: item.finalOutput || "---",
  })
));
store.$subscribe((mutation, state) => {
  listData.value = (state.data2.lineDetailData || Array(3).fill({})).map(
    (item, index) => ({
      productLine: item.productLine || "---",
      mbt: item.edgingInput || "---",
      mbb: item.edgingOutput || "---",
      dkt: item.drillingInput || "---",
      dkb: item.drillingOutput || "---",
      dmt: item.coatingInput || "---",
      dmb: item.coatingOutput || "---",
      syt: item.silkInput || "---",
      syb: item.silkOutput || "---",
      ght: item.solidificationInput || "---",
      ghb: item.solidificationOutput || "---",
      gh1: item.temperingInput || "---",
      gh2: item.temperingOutput || "---",
      bzt: item.finalInput || "---",
      bzb: item.finalOutput || "---",
    })
  );
});
</script>

<template>
  <div class="realtime-table">
    <el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
      header-row-class-name="dark-header">
      <el-table-column prop="productLine" label="产线"></el-table-column>
      <el-table-column prop="mbt" label="磨边上"></el-table-column>
      <el-table-column prop="mbb" label="磨边下"></el-table-column>
      <el-table-column prop="dkt" label="打孔上"></el-table-column>
      <el-table-column prop="dkb" label="打孔下"></el-table-column>
      <el-table-column prop="dmt" label="镀膜上"></el-table-column>
      <el-table-column prop="dmb" label="镀膜下"></el-table-column>
      <el-table-column prop="syt" label="丝印上"></el-table-column>
      <el-table-column prop="syb" label="丝印下"></el-table-column>
      <el-table-column prop="ght" label="固化上"></el-table-column>
      <el-table-column prop="ghb" label="固化下"></el-table-column>
      <el-table-column prop="gh1" label="钢化上"></el-table-column>
      <el-table-column prop="gh2" label="钢化下"></el-table-column>
      <el-table-column prop="bzt" label="包装上"></el-table-column>
      <el-table-column prop="bzb" label="包装下"></el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.realtime-table {
  /* background: #00f3; */
  height: 160px;
  width: 80%;
  align-self: self-start;
}

.dark-table {
  height: 100%;
}

.dark-table>>>.el-table__inner-wrapper::before {
  background-color: transparent !important;
}
</style>
