<template>
  <main class="coal_main p0_75 gap_12" style="flex-grow: 1">
    <div class="text_center">
      <h2 class="pageTitle">1#隧道窑投煤器</h2>
    </div>
    <div class="flexs items_center justify_center gap1_5 py0_375 px1 bgWhite borderAll shadows">
      <div class="flexs items_center gap0_5">
        <span>站点总数</span>
        <span class="text_sm fontw700 color_black"
          >18
          <span class="fontw400 color_base ml0_25">台</span>
        </span>
      </div>
      <span class="h1 w_px bg_border"></span>
      <div class="flexs items_center gap0_5">
        <span>运行中</span>
        <span class="text_sm fontw700 color_green">
          16<span class="fontw400 color_base ml0_25">台</span>
        </span>
      </div>
      <span class="h1 w_px bg_border"></span>
      <div class="flexs items_center gap0_5">
        <span>自动模式</span>
        <span class="text_sm fontw700 color_primary">
          16<span class="fontw400 color_base ml0_25">台</span>
        </span>
      </div>
      <span class="h1 w_px bg_border"></span>
      <div class="flexs items_center gap0_5">
        <span>最高温度</span>
        <span class="text_sm fontw700 color_red">
          1000<span class="fontw400 color_base ml0_25">°C</span>
        </span>
      </div>
    </div>
    <div class="flex_1 flexs gap0_5">
      <!-- 点位列表 -->
      <tiny-button
        class="hiddenIcon"
        type="info"
        :icon="isPointVisible ? iconChevronLeft : iconChevronRight"
        plain
        circle
        @click="hidenPointList"
      ></tiny-button>
      <ul
        v-show="isPointVisible"
        class="flexs flex_col gap0_5 w10 borderAll bgWhite p0_5"
        id="pointContainer"
      >
        <li class="text_10">点位单元列表
          <tiny-button type="info" :icon="iconRefresh" plain size="small" @click="getPointList">刷新</tiny-button>
        </li>
        <li
          v-for="point in pointList"
          :key="point.id"
          class="point-item"
          draggable="true"
          @dragstart="onPointDragStart($event, point)"
        >
          <span class="text_10">{{ point.name }}</span>
          <span class="text_10" v-if="point.point_monitor">-[{{ point.point_monitor.value_text }}]</span>
        </li>
        <li class="text_10 flexs justify_center">
          <tiny-button type="success" plain size="small" @click="commitPointUpdates">提交关联</tiny-button>
        </li>
      </ul>
      <div class="flex_1 shrink0 overflowx_auto borderAll bg_card">
        <div class="control-panel">
          <div class="control-panel__labels">
            <div class="control-panel__corner">参数/站号</div>
            <div class="control-panel__section">
              <div
                v-for="row in upperBlockRows"
                :key="`upper-label-${row.key}`"
              class="control-panel__label control-panel__label--row"
            >
              {{ row.label }}
            </div>
              <div class="control-panel__label control-panel__label--motor" :style="{ minHeight: middleMotorHeight }">
                中间侧
              </div>
            </div>
            <div class="control-panel__label control-panel__label--temp">2侧温度</div>
            <div class="control-panel__label control-panel__label--car">车位号</div>
            <div class="control-panel__label control-panel__label--temp">1侧温度</div>
            <div class="control-panel__section">
            <div
              v-for="row in lowerBlockRows"
              :key="`lower-label-${row.key}`"
              class="control-panel__label control-panel__label--row"
            >
              {{ row.label }}
            </div>
              <div class="control-panel__label control-panel__label--motor" :style="{ minHeight: returnMotorHeight }">
                回车侧
              </div>
            </div>
          </div>
          <div class="control-panel__columns">
            <div
              v-for="(item, index) in dataList"
              :key="item.team"
              class="control-panel__column"
            >
              <div class="control-panel__column-header">
                <span class="inline_flex items_center justify_center h1_25 min_w_6 px0_375 rounded bg_primary text_primary_color fontw700 text_11">
                  {{ item.team }}
                </span>
              </div>
              <div class="control-panel__section">
                <div
                  v-for="row in upperBlockRows"
                  :key="`upper-${item.team}-${row.key}`"
                  :id="getCellId(row.idPrefix, index)"
                  class="control-panel__cell control-panel__cell--row"
                >
                  <template v-if="isTimeRow(row)">
                    <span v-if="item.statusAuto" class="control-panel__value">
                      {{ getCellValue(item, row) }}
                    </span>
                    <input
                      v-else
                      :value="getCellValue(item, row)"
                      class="control-panel__input control-panel__value"
                      @input="updateCellValue(item, row, $event)"
                    />
                  </template>
                  <span v-else class="control-panel__value">
                    {{ getCellValue(item, row) }}
                  </span>
                </div>
                <!-- 电机 -->
                <div class="control-panel__cell control-panel__cell--motor" :style="{ minHeight: middleMotorHeight }">
                  <div class="control-panel__motor-grid">
                    <div
                      v-for="dj in item.team_top.dianji"
                      :key="dj.id"
                      :id="dj.id"
                      class="control-panel__motor-card dianji_status"
                      @dragover="onDjDragOver"
                      @drop="onDjDrop($event, dj, 'id')"
                    >
                      <div class="flexs items_center gap0_25 justify_center">
                        <div
                          :class="[
                            'relative inline_flex items_center justify_center rounded_full border_2 Mcircle',
                            { c_pointer: !isDjToggleDisabled(item.team) },
                            { 'border_red_M bg_red_M': dj.isStop, 'border_green_M bg_green_M': !dj.isStop }
                          ]"
                          :style="{ cursor: isDjToggleDisabled(item.team) ? 'text' : 'pointer' }"
                          @click="!isDjToggleDisabled(item.team) && toggleDjStop(dj, item.team, item.statusAuto, 'team_top')"
                        >
                          <span :class="['fontw700 leading_none text_10', { 'text_red_M': dj.isStop, 'text_green': !dj.isStop }]">M</span>
                        </div>
                        <div class="flexs flex_col justify_center items_center gap0_25 my0_3">
                          <span v-if="dj.isBendi" class="border w1_2 text_8 rounded h0_9 bg_yellow border_yellow text_white">本地</span>
                          <span v-else class="border w1_2 text_8 rounded h0_9 bg_green_yc border_green_M text_white">远程</span>
                          <span
                            v-if="dj.isStop"
                            class="border w1_2 text_8 rounded h0_9 bg_red border_red text_white"
                            :style="{ cursor: isDjToggleDisabled(item.team) ? 'text' : 'pointer' }"
                            :class="{ c_pointer: !isDjToggleDisabled(item.team) }"
                            @click="!isDjToggleDisabled(item.team) && toggleDjStop(dj, item.team, item.statusAuto, 'team_top')"
                          >停止</span>
                          <span
                            v-else
                            class="border w1_2 text_8 rounded h0_9 bg_green_yx border_green_yx text_white"
                            :style="{ cursor: isDjToggleDisabled(item.team) ? 'text' : 'pointer' }"
                            :class="{ c_pointer: !isDjToggleDisabled(item.team) }"
                            @click="!isDjToggleDisabled(item.team) && toggleDjStop(dj, item.team, item.statusAuto, 'team_top')"
                          >运行</span>
                        </div>
                      </div>
                      <div class="items_center">
                        <span v-if="dj.eqm == '正常'" class="text_10 fontw600 text_emerald">{{ dj.eqm }}</span>
                        <span v-else class="text_10 fontw600 text_red">{{ dj.eqm }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 温度2 -->
              <div
                :id="getTempDropId('tempera2', item, index)"
                class="control-panel__cell control-panel__cell--temp"
                @dragover="onDjDragOver"
                @drop="onDjDrop($event, item, getTempDropId('tempera2', item, index))"
              >
                <span class="control-panel__value control-panel__value--temp">{{ item.tempera2 }}</span>
                <span> °C</span>
              </div>
              <!-- 车位号 -->
              <div class="control-panel__cell control-panel__cell--car">
                <span class="inline_flex items_center justify_center h1_25 min_w_1_75 px0_375 rounded_md bg_primary text_primary_color py0_125 fontw700 text_sm shadow_sm">
                  {{ item.carNumber }}
                </span>
              </div>
              <!-- 温度1 -->
              <div
                :id="getTempDropId('tempera1', item, index)"
                class="control-panel__cell control-panel__cell--temp"
                @dragover="onDjDragOver"
                @drop="onDjDrop($event, item, getTempDropId('tempera1', item, index))"
              >
                <span class="control-panel__value control-panel__value--temp">{{ item.tempera1 }}</span>
                <span> °C</span>
              </div>
              <div class="control-panel__section">
                <div
                  v-for="row in lowerBlockRows"
                  :key="`lower-${item.team}-${row.key}`"
                  :id="getCellId(row.idPrefix, index)"
                  class="control-panel__cell control-panel__cell--row"
                >
                  <template v-if="isTimeRow(row)">
                    <span v-if="item.statusAuto" class="control-panel__value">
                      {{ getCellValue(item, row) }}
                    </span>
                    <input
                      v-else
                      :value="getCellValue(item, row)"
                      class="control-panel__input control-panel__value"
                      @input="updateCellValue(item, row, $event)"
                    />
                  </template>
                  <span v-else class="control-panel__value">
                    {{ getCellValue(item, row) }}
                  </span>
                </div>
                <div class="control-panel__cell control-panel__cell--motor" :style="{ minHeight: returnMotorHeight }">
                  <div class="control-panel__motor-grid">
                    <div
                      v-for="dj in item.team_bottom.dianji2"
                      :key="dj.id"
                      class="control-panel__motor-card dianji_status"
                      @dragover="onDjDragOver"
                      @drop="onDjDrop($event, dj, 'id')"
                    >
                      <div class="flexs items_center gap0_25 justify_center">
                        <div
                          :class="[
                            'relative inline_flex items_center justify_center rounded_full border_2 Mcircle',
                            { c_pointer: !isDjToggleDisabled(item.team) },
                            { 'border_red_M bg_red_M': dj.isStop, 'border_green_M bg_green_M': !dj.isStop }
                          ]"
                          :style="{ cursor: isDjToggleDisabled(item.team) ? 'text' : 'pointer' }"
                          @click="!isDjToggleDisabled(item.team) && toggleDjStop(dj, item.team, item.statusAuto, 'team_bottom')"
                        >
                          <span :class="['fontw700 leading_none text_10', { 'text_red_M': dj.isStop, 'text_green': !dj.isStop }]">M</span>
                        </div>
                        <div class="flexs flex_col justify_center items_center gap0_25 my0_3">
                          <span v-if="dj.isBendi" class="border w1_2 text_8 rounded h0_9 bg_yellow border_yellow text_white">本地</span>
                          <span v-else class="border w1_2 text_8 rounded h0_9 bg_green_yc border_green_M text_white">远程</span>
                          <span
                            v-if="dj.isStop"
                            class="border w1_2 text_8 rounded h0_9 bg_red border_red text_white"
                            :style="{ cursor: isDjToggleDisabled(item.team) ? 'text' : 'pointer' }"
                            :class="{ c_pointer: !isDjToggleDisabled(item.team) }"
                            @click="!isDjToggleDisabled(item.team) && toggleDjStop(dj, item.team, item.statusAuto, 'team_bottom')"
                          >停止</span>
                          <span
                            v-else
                            class="border w1_2 text_8 rounded h0_9 bg_green_yx border_green_yx text_white"
                            :style="{ cursor: isDjToggleDisabled(item.team) ? 'text' : 'pointer' }"
                            :class="{ c_pointer: !isDjToggleDisabled(item.team) }"
                            @click="!isDjToggleDisabled(item.team) && toggleDjStop(dj, item.team, item.statusAuto, 'team_bottom')"
                          >运行</span>
                        </div>
                      </div>
                      <div class="items_center">
                        <span v-if="dj.eqm == '正常'" class="text_10 fontw600 text_emerald">{{ dj.eqm }}</span>
                        <span v-else class="text_10 fontw600 text_red">{{ dj.eqm }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="settings">
          <div class="flexs justify_center gap1_5">
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第一单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit1, btnsDisabled: isUnitLocal('第一单元') }"
                  @click="!isUnitLocal('第一单元') && statusChange('1')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit1, btnsDisabled: isUnitLocal('第一单元') }"
                  @click="!isUnitLocal('第一单元') && statusAuto('1')"
                >自动</span>
              </div>
            </div>
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第二单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit2, btnsDisabled: isUnitLocal('第二单元', unit2) }"
                  @click="!isUnitLocal('第二单元', unit2) && statusChange('2')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit2, btnsDisabled: isUnitLocal('第二单元', unit2) }"
                  @click="!isUnitLocal('第二单元', unit2) && statusAuto('2')"
                >自动</span>
              </div>
            </div>
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第三单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                 <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit3, btnsDisabled: isUnitLocal('第三单元') }"
                  @click="!isUnitLocal('第三单元') && statusChange('3')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit3, btnsDisabled: isUnitLocal('第三单元') }"
                  @click="!isUnitLocal('第三单元') && statusAuto('3')"
                >自动</span>
              </div>
            </div>
            <div class="flexs gap0_25 flex_col items_center">
              <span class="text_11 fontw600">第四单元投煤器手动切换</span>
              <div class="flexs items_center gap0_125">
                <span
                  :class="{ text_10: true, btns: true, btnsActive: !unit4, btnsDisabled: isUnitLocal('第四单元') }"
                  @click="!isUnitLocal('第四单元') && statusChange('4')"
                >手动</span>
                <span
                  :class="{ text_10: true, btns: true, btnsActive: unit4, btnsDisabled: isUnitLocal('第四单元') }"
                  @click="!isUnitLocal('第四单元') && statusAuto('4')"
                >自动</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
import { IconRefresh,IconChevronLeft,IconChevronRight } from "@opentiny/vue-icon";
import api from "../api";
const iconRefresh = IconRefresh()
const iconChevronLeft = IconChevronLeft()
const iconChevronRight = IconChevronRight()
const pointList = ref<PointItem[]>([]);
const isPointVisible = ref(false);
const ws = ref<WebSocket | null>(null);
const pageDataMap = ref<Record<string, string>>({});
const error = ref(null);
type PointItem = {
  id?: string | number;
  name: string;
  point_monitor?: {
    value_text: string;
  };
};
type djItem = {
  isStop: boolean;
  isBendi: boolean;
  eqm: string;
  id: string;
  name?: string;
};
type TimeFieldKey = "run_time_sec" | "top_time_sec" | "acc_time_sec" | "bl_time_sec";
type DisplayFieldKey = "tmljsjs" | "tmljsjx" | "tempera1" | "tempera2" | "carNumber";
type SectionKey = "team_top" | "team_bottom";
type CoalSectionTop = {
  run_time_sec: number | string;
  top_time_sec: number | string;
  acc_time_sec: number | string;
  bl_time_sec: number | string;
  dianji: djItem[];
};
type CoalSectionBottom = {
  run_time_sec: number | string;
  top_time_sec: number | string;
  acc_time_sec: number | string;
  bl_time_sec: number | string;
  dianji2: djItem[];
};
type BlockRowConfig = {
  key: TimeFieldKey | DisplayFieldKey;
  label: string;
  kind: "time" | "display";
  section?: SectionKey;
  idPrefix?: string;
};
type CoalUnit = {
  team: string;
  unit: number;
  statusAuto: boolean;
  tempera1: number | string;
  tempera2: number | string;
  carNumber: number | string;
  tmljsjs: number | string;
  tmljsjx: number | string;
  team_top: CoalSectionTop;
  team_bottom: CoalSectionBottom;
};
const upperBlockRows: BlockRowConfig[] = [
  { key: "run_time_sec", label: "投煤运行时间设定", kind: "time", section: "team_top", idPrefix: "tmyxsds" },
  { key: "top_time_sec", label: "投煤停止时间设定", kind: "time", section: "team_top", idPrefix: "tmtzsds" },
  { key: "acc_time_sec", label: "投煤累积时间设定", kind: "time", section: "team_top", idPrefix: "tmljsds" },
  { key: "bl_time_sec", label: "布料运行时间设定", kind: "time", section: "team_top", idPrefix: "blyxsds" },
  { key: "tmljsjs", label: "投煤累积时间", kind: "display", idPrefix: "tmljsjs" },
];
const lowerBlockRows: BlockRowConfig[] = [
  { key: "run_time_sec", label: "投煤运行时间设定", kind: "time", section: "team_bottom", idPrefix: "tmyxsdx" },
  { key: "top_time_sec", label: "投煤停止时间设定", kind: "time", section: "team_bottom", idPrefix: "tmtzsdx" },
  { key: "acc_time_sec", label: "投煤累积时间设定", kind: "time", section: "team_bottom", idPrefix: "tmljsdx" },
  { key: "bl_time_sec", label: "布料运行时间设定", kind: "time", section: "team_bottom", idPrefix: "blyxsdx" },
  { key: "tmljsjx", label: "投煤累积时间", kind: "display", idPrefix: "tmljsjx" },
];
const dataList = reactive<CoalUnit[]>([
  {
    team: "第一单元",
    unit: 1,
    tempera1: 103,
    tempera2: 50,
    carNumber: 14,
    tmljsjs: 49,
    tmljsjx: 50,
    statusAuto: true,
    team_top: {
      run_time_sec: 3,
      top_time_sec: 55,
      acc_time_sec: 55,
      bl_time_sec: 3,
      dianji: [
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj1"
        },
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj2"
        },
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj3"
        },
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj4"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 3,
      top_time_sec: 55,
      acc_time_sec: 58,
      bl_time_sec: 3,
      dianji2: [
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj1"
        },
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj2"
        },
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj3"
        },
        {
          isStop: false,
          isBendi: true,
          eqm: "正常",
          id: "unit1_dj4"
        }
      ]
    }
  },
  {
    team: "第二单元第一组",
    unit: 2,
    tempera1: 70,
    tempera2: 44,
    carNumber: 15,
    tmljsjs: 39,
    tmljsjx: 23,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 120,
      acc_time_sec: 57,
      bl_time_sec: 40,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj1"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj2"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj3"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj4"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 3,
      top_time_sec: 120,
      acc_time_sec: 57,
      bl_time_sec: 40,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj1"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj2"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj3"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj4"
        }
      ]
    }
  },
  {
    team: "第二单元第二组",
    unit: 2,
    tempera1: 131,
    tempera2: 91,
    carNumber: 16,
    tmljsjs: 12,
    tmljsjx: 9,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 480,
      acc_time_sec: 58,
      bl_time_sec: 40,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj5"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj6"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj7"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj8"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 480,
      acc_time_sec: 58,
      bl_time_sec: 40,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj5"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj6"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj7"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj8"
        }
      ]
    }
  },
  {
    team: "第二单元第三组",
    unit: 2,
    tempera1: 274,
    tempera2: 359,
    carNumber: 17,
    tmljsjs: 12,
    tmljsjx: 27,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 240,
      acc_time_sec: 59,
      bl_time_sec: 38,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj9"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj10"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj11"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj12"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 240,
      acc_time_sec: 59,
      bl_time_sec: 38,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj9"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj10"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj11"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj12"
        }
      ]
    }
  },
  {
    team: "第二单元第四组",
    unit: 2,
    tempera1: 292,
    tempera2: 60,
    carNumber: 18,
    tmljsjs: 41,
    tmljsjx: 36,
    statusAuto: true,
    team_top: {
      run_time_sec: 3,
      top_time_sec: 120,
      acc_time_sec: 60,
      bl_time_sec: 38,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj13"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj14"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj15"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj16"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 3,
      top_time_sec: 120,
      acc_time_sec: 60,
      bl_time_sec: 38,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj13"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj14"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj15"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj16"
        }
      ]
    }
  },
  {
    team: "第二单元第五组",
    unit: 2,
    tempera1: 395,
    tempera2: 368,
    carNumber: 19,
    tmljsjs: 32,
    tmljsjx: 22,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 240,
      acc_time_sec: 57,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj17"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj18"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj19"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj20"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 240,
      acc_time_sec: 57,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj17"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj18"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj19"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj20"
        }
      ]
    }
  },
  {
    team: "第二单元第六组",
    unit: 2,
    tempera1: 558,
    tempera2: 477,
    carNumber: 20,
    tmljsjs: 21,
    tmljsjx: 25,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 180,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj21"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj22"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj23"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj24"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 180,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj21"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj22"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj23"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit2_dj24"
        }
      ]
    }
  },
  {
    team: "第三单元第一组",
    unit: 3,
    tempera1: 683,
    tempera2: 652,
    carNumber: 21,
    tmljsjs: 30,
    tmljsjx: 48,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 90,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj1"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj2"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj3"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj4"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 90,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj1"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj2"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj3"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj4"
        }
      ]
    }
  },
  {
    team: "第三单元第二组",
    unit: 3,
    tempera1: 916,
    tempera2: 905,
    carNumber: 22,
    tmljsjs: 58,
    tmljsjx: 31,
    statusAuto: true,
    team_top: {
      run_time_sec: 3,
      top_time_sec: 90,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj5"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj6"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj7"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj8"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 3,
      top_time_sec: 90,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj5"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj6"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj7"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj8"
        }
      ]
    }
  },
  {
    team: "第三单元第三组",
    unit: 3,
    tempera1: 939,
    tempera2: 898,
    carNumber: 23,
    tmljsjs: 6,
    tmljsjx: 6,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 180,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj9"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj10"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj11"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj12"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 180,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj9"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj10"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj11"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj12"
        }
      ]
    }
  },
  {
    team: "第三单元第四组",
    unit: 3,
    tempera1: 1000,
    tempera2: 995,
    carNumber: 24,
    tmljsjs: 46,
    tmljsjx: 37,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 480,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj13"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj14"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj15"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj16"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 480,
      acc_time_sec: 60,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj13"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj14"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj15"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj16"
        }
      ]
    }
  },
  {
    team: "第三单元第五组",
    unit: 3,
    tempera1: 967,
    tempera2: 950,
    carNumber: 25,
    tmljsjs: 3,
    tmljsjx: 41,
    statusAuto: true,
    team_top: {
      run_time_sec: 3,
      top_time_sec: 90,
      acc_time_sec: 59,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj17"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj18"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj19"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "故障",
          id: "unit3_dj20"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 3,
      top_time_sec: 90,
      acc_time_sec: 59,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj17"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj18"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj19"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "故障",
          id: "unit3_dj20"
        }
      ]
    }
  },
  {
    team: "第三单元第六组",
    unit: 3,
    tempera1: 919,
    tempera2: 920,
    carNumber: 26,
    tmljsjs: 41,
    tmljsjx: 26,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 60,
      acc_time_sec: 63,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj21"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj22"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj23"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj24"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 60,
      acc_time_sec: 63,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj21"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj22"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj23"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit3_dj24"
        }
      ]
    }
  },
  {
    team: "第四单元",
    unit: 4,
    tempera1: 716,
    tempera2: 755,
    carNumber: 27,
    tmljsjs: 34,
    tmljsjx: 41,
    statusAuto: true,
    team_top: {
      run_time_sec: 2,
      top_time_sec: 90,
      acc_time_sec: 65,
      bl_time_sec: 36,
      dianji: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit4_dj1"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit4_dj2"
        }
      ]
    },
    team_bottom: {
      run_time_sec: 2,
      top_time_sec: 90,
      acc_time_sec: 65,
      bl_time_sec: 36,
      dianji2: [
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit4_dj1"
        },
        {
          isStop: false,
          isBendi: false,
          eqm: "正常",
          id: "unit4_dj2"
        }
      ]
    }
  }
]);
const unit1 = ref(true);
const unit2 = ref(true);
const unit3 = ref(true);
const unit4 = ref(true);
// 清除错误信息
const clearError = () => {
  error.value = null;
};
const getCellId = (prefix: string | undefined, index: number) => {
  return prefix ? `${prefix}${index}` : undefined;
};
const getTempDropId = (side: "tempera1" | "tempera2", item: CoalUnit, index: number) => {
  return `${side}_unit${item.unit}_${index + 1}`;
};
const isTimeRow = (row: BlockRowConfig) => row.kind === "time";
const getCellValue = (item: CoalUnit, row: BlockRowConfig) => {
  if (row.kind === "time" && row.section) {
    return item[row.section][row.key as TimeFieldKey];
  }
  return item[row.key as DisplayFieldKey];
};
const MOTOR_GRID_COLUMNS = 2;
const MOTOR_SECTION_MIN_HEIGHT = 120;
const MOTOR_CARD_HEIGHT = 80;
const MOTOR_GRID_ROW_GAP = 8;
const getMotorRowCount = (count: number) => Math.max(1, Math.ceil(count / MOTOR_GRID_COLUMNS));
const getMotorSectionHeight = (count: number) => {
  const rows = getMotorRowCount(count);
  console.log('rows:', rows);
  const computedHeight =  rows * MOTOR_CARD_HEIGHT + (rows - 1) * MOTOR_GRID_ROW_GAP;
  return `${Math.max(MOTOR_SECTION_MIN_HEIGHT, computedHeight)}px`;
};
const middleMotorHeight = computed(() => {
  const maxCount = dataList.reduce((max, item) => Math.max(max, item.team_top.dianji.length), 0);
  return getMotorSectionHeight(maxCount);
});
const returnMotorHeight = computed(() => {
  const maxCount = dataList.reduce((max, item) => Math.max(max, item.team_bottom.dianji2.length), 0);
  return getMotorSectionHeight(maxCount);
});
const updateCellValue = (item: CoalUnit, row: BlockRowConfig, event: Event) => {
  const target = event.target as HTMLInputElement | null;
  if (!target) return;
  if (row.kind !== "time" || !row.section) return;
  item[row.section][row.key as TimeFieldKey] = target.value;
};
const onPointDragStart = (event: DragEvent, point: PointItem) => {
  if (event.dataTransfer) {
    event.dataTransfer.setData('text/plain', JSON.stringify(point));
  }
};
const onDjDragOver = (event: DragEvent) => {
  event.preventDefault();
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = "copy";
  }
};
const pendingPointUpdates = ref<Array<{ key: string; value: string }>>([]);
const onDjDrop = (event: DragEvent, dropItem: any, temp: string) => {
  event.preventDefault();
  if (!event.dataTransfer) return;
  const rawJson = event.dataTransfer.getData("text/plain");
  if (!rawJson) return;
  const raw = JSON.parse(rawJson);
  const key = temp;
  const existing = pendingPointUpdates.value.find((item) => item.key === key);
  if (existing) {
    existing.value = String(raw.id);
  } else {
    pendingPointUpdates.value.push({ key, value: String(raw.id) });
  }
};
const isUnitLocal = (unitName: string, _unitState?: boolean) => {
  return dataList
    .filter((item) => item.team.indexOf(unitName) > -1)
    .some(
      (item) =>
        item.team_top.dianji.some((dj) => dj.isBendi) ||
        item.team_bottom.dianji2.some((dj) => dj.isBendi),
    );
};
const isDjToggleDisabled = (team: string) => {
  return team.includes("第一单元") && isUnitLocal("第一单元");
};
const getUnitNameByTeam = (team: string) => {
  if (team.includes("第一单元")) return "第一单元";
  if (team.includes("第二单元")) return "第二单元";
  if (team.includes("第三单元")) return "第三单元";
  if (team.includes("第四单元")) return "第四单元";
  return "";
};
const toggleDjStop = (
  dj: djItem,
  team: string,
  statusAuto?: boolean,
  section: SectionKey = "team_top"
) => {
  const next = !dj.isStop;
  if (statusAuto) {
    const unitName = getUnitNameByTeam(team);
    if (unitName) {
      dataList.forEach((unitGroup) => {
        if (!unitGroup?.team?.includes(unitName)) return;
        unitGroup.team_top.dianji.forEach((d) => {
          d.isStop = next;
        });
        unitGroup.team_bottom.dianji2.forEach((d) => {
          d.isStop = next;
        });
      });
      return;
    }
  }
  if (section === "team_top") {
    dj.isStop = next;
    return;
  }
  dj.isStop = next;
};
const commitPointUpdates = () => {
  if (!pendingPointUpdates.value.length) return;
  const data: Record<string, string> = {};
  pendingPointUpdates.value.forEach((item) => {
    data[item.key] = item.value;
  });
  const mergedData = { ...pageDataMap.value, ...data };
  api.pageUpdate('97ca2e2a-a8af-44ab-a705-55cd0d191422',{name:"control",data: mergedData}).then(() => {
    pageDataMap.value = mergedData;
    pendingPointUpdates.value = [];
    isPointVisible.value = false;
  }).catch((err) => {
    console.error("点位关联失败:", err);
  });
};
// 初始化WebSocket连接
const initWebSocket = () => {
  ws.value = new WebSocket(`ws://10.0.11.74:60309/ws/public`);
  ws.value.onmessage = (event) => {
    const data = JSON.parse(event.data);
     console.log('WebSocketdata:', data);
    if (data.type === "PointNewValue") {
      pointList.value.forEach(item => {
        if (item.id === data.data.point_id) {
          item.point_monitor = data.data;
        }
      });
      const entries = Object.entries(pageDataMap.value).filter(
        ([, pointId]) => pointId === data.data.point_id
      );
      console.log('entries:', entries);
      if (entries.length) {
        entries.forEach(([elementId]) => {
          const el = document.getElementById(elementId);
          const span = el?.querySelector("span");
          if (span) {
            span.textContent = data.data.value_text ?? "";
          }
        });
        // entries.forEach(([elementId]) => {
        //   const targetItem = dataList.find((item) => item.tempera2id === elementId);
        //   if (targetItem) {
        //     targetItem.tempera2 = data.data.value_text ?? "";
        //   }
        // });
      }
    }
  };
  
  ws.value.onclose = () => {
    console.log('WebSocket连接关闭');
    // 5秒后尝试重连
    setTimeout(initWebSocket, 5000);
  };
  
  ws.value.onerror = (err) => {
    console.error('WebSocket错误:', err);
  };
};
const getPointList = async () => {
  clearError();
  try {
    const res = await api.unitList({});
    pointList.value = res.data || [];
  } catch (err) {
    console.error("获取点位列表失败:", err);
  }
};
const hidenPointList = () => {
  isPointVisible.value = !isPointVisible.value;
};
const getPageData = async () => {
  try {
    const res = await api.getPage({name:"control"});
    const raw = Array.isArray(res) ? res[0]?.data : res?.data;
    pageDataMap.value = raw || {};
    console.log("页面数据pageDataMap:", pageDataMap.value);
  } catch (err) {
    console.error("获取页面数据失败:", err);
  }
};
// 组件挂载时初始化WebSocket
onMounted(() => {
  initWebSocket();
  getPointList();
  getPageData();
});
// 组件卸载时关闭WebSocket
onUnmounted(() => {
  if (ws.value) {
    ws.value.close();
  }
});
const statusChange = (unit: string) => {
  if (unit == "1") {
    unit1.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第一单元") > -1) {
        item.statusAuto = false;
      }
    });
  } else if (unit == "2") {
    unit2.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第二单元") > -1) {
        item.statusAuto = false;
      }
    });
  } else if (unit == "3") {
    unit3.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第三单元") > -1) {
        item.statusAuto = false;
      }
    });
  } else if (unit == "4") {
    unit4.value = false;
    dataList.forEach((item) => {
      if (item.team.indexOf("第四单元") > -1) {
        item.statusAuto = false;
      }
    });
  }
};
const statusAuto = (unit: string) => {
  if (unit == "1") {
    unit1.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第一单元") > -1) {
        item.statusAuto = true;
      }
    });
  } else if (unit == "2") {
    unit2.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第二单元") > -1) {
        item.statusAuto = true;
      }
    });
  } else if (unit == "3") {
    unit3.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第三单元") > -1) {
        item.statusAuto = true;
      }
    });
  } else if (unit == "4") {
    unit4.value = true;
    dataList.forEach((item) => {
      if (item.team.indexOf("第四单元") > -1) {
        item.statusAuto = true;
      }
    });
  }
};
</script>
<style scoped>
.point-list {
  max-height: 400px;
  overflow-y: auto;
}
.hover:bg_gray_100:hover {
  background-color: #f5f5f5;
}
.cursor-pointer {
  cursor: pointer;
}
.btnsDisabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
th.sticky.left0,
td.sticky.left0 {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}
.hiddenIcon{
  position: absolute;
  left: 0;
  top: 30vh;
  z-index: 999;
}
.control-panel {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
  width: 100%;
  /* border: 1px solid rgba(148, 163, 184, 0.6); */
}
.control-panel__labels {
  flex: 0 0 130px;
  border-right: 1px solid rgba(148, 163, 184, 0.6);
}
.control-panel__columns {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
}
.control-panel__column {
  flex: 0 0 110px;
  min-width: 110px;
  border-right: 1px solid rgba(148, 163, 184, 0.6);
}
.control-panel__section {
  display: flex;
  flex-direction: column;
}
.control-panel__corner,
.control-panel__column-header{
  box-sizing: border-box;
  border-bottom: 1px solid rgba(148, 163, 184, 0.6);
}
.control-panel__corner,
.control-panel__column-header,
.control-panel__label,
.control-panel__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  background: #ffffff;
}
.control-panel__corner,
.control-panel__column-header {
  height: 42px;
  background: #edeff3;
  font-weight: 600;
}
.control-panel__label,
.control-panel__cell--row,
.control-panel__cell--temp,
.control-panel__cell--car {
  min-height: 35px;
}
.control-panel__label {
  justify-content: flex-start;
  font-size: 12px;
  font-weight: bold;
  color: #666;
  white-space: nowrap;
}
.control-panel__label--temp {
  background: #fff1e8;
  color: rgb(234, 88, 12);
}
.control-panel__label--car {
  background: #dbeafe;
  color: rgb(30, 64, 175);
  font-weight: 700;
}
.control-panel__label--motor {
  min-height: 120px;
  background: #eff6ff;
  color: rgb(29, 78, 216);
  font-weight: 700;
}
.control-panel__cell--row {
  font-size: 11px;
  color: var(--color-text-mute);
}
.control-panel__cell--temp {
  background: #fff1e8;
  color: rgb(220, 38, 38);
}
.control-panel__cell--car {
  background: #dbeafe;
}
.control-panel__cell--motor {
  background: #eff6ff;
  padding: 0.3rem;
  justify-content: flex-start;
  align-items: flex-start;
}
.control-panel__motor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  align-items: start;
}
.control-panel__motor-card {
  /* min-height: 92px; */
  width: 100%;
  display: flex;
  flex-direction: column;
  /* gap: 0.25rem; */
  align-items: center;
  justify-content: center;
}
.control-panel__input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  color: inherit;
  height: 25px;
    border-bottom: 1px solid #eeeeee;
}
.control-panel__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.control-panel__value--temp {
  min-width: 2.25rem;
  justify-content: flex-end;
  font-weight: 700;
}
</style>
