<template>
  <div class="lighting-img">
    <div class="lighting-img-box">
      <img src="../image/bg.jpg" />
      <div class="bulbBox">
        <div
          v-for="(bulb, index) in bulbs"
          :key="index"
          :class="['wh100', bulb.className]"
          v-show="bulb.visible">
          <img class="bulbImg" :src="bulb.imageUrl" alt="" />
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button class="F1">1F</button><br />
      <button class="F2">2F</button><br />
      <button class="platform">站台</button>
    </div>
  </div>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    width="496"
    height="1080"
    placement="right"
    :drawerStyle="{ background: 'rgba(0, 0, 0, 1)', opacity: 0.8 }"
    :closable="false"
    id="Odrawer">
    <div>
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="控制面板">
          <!-- 照明区域 -->
          <div>
            <div class="lightarea">
              <div class="lightareatab"></div>
              <span class="lightareatext"> 照明区域 </span>
              <button
                class="plan"
                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
                @click="togglePlan">
                {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
              </button>
            </div>
            <!-- 照明区域按钮部分 -->
            <div class="area">
              <template v-if="!showAllButtonsarea">
                <button
                  v-for="(button, index) in buttons1"
                  :key="index"
                  :class="{ btn: true, selected: button === selectedButton }"
                  :style="{
                    'pointer-events': isPlanEnabled ? 'auto' : 'none',
                    opacity: isPlanEnabled ? 1 : 0.5,
                  }"
                  @click="selectButton(button)">
                  {{ button.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtonsarea = true" class="openzm"
                    ><down-outlined />展开</span
                  >
                </div>
              </template>
              <template v-else>
                <button
                  v-for="(button, index) in buttons"
                  :key="index"
                  :class="{ btn: true, selected: button === selectedButton }"
                  :style="{
                    'pointer-events': isPlanEnabled ? 'auto' : 'none',
                    opacity: isPlanEnabled ? 1 : 0.5,
                  }"
                  @click="selectButton(button)">
                  {{ button.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtonsarea = false" class="openzm"
                    ><up-outlined />回缩</span
                  >
                </div>
              </template>
            </div>
          </div>
          <!-- 照明回路部分 -->
          <div>
            <div class="circuitarea" v-if="selectedButton">
              <div class="circuittab"></div>
              <span class="circuittext">照明回路</span>
              <div class="btn2">
                <button
                  class="openplan"
                  :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
                  @click="togglePlan2">
                  {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
                </button>
                <!-- <button >启用面板</button> -->
                <a-switch
                  v-model:checked="selectAllCheckbox"
                  :class="{
                    'blue-background': selectAllCheckbox,
                    'grey-background': !selectAllCheckbox,
                  }"
                  @change="toggleAllSelection" />
                <button class="both" @click="selectAll">多选</button>
              </div>
            </div>

            <div class="btnarea" v-if="selectedButton">
              <template v-if="!showAllButtons">
                <button
                  v-for="(button2, index) in limitedButtons"
                  :key="index"
                  :style="{
                    'pointer-events': isPlanEnabled2 ? 'auto' : 'none',
                    opacity: isPlanEnabled2 ? 1 : 0.5,
                  }"
                  :class="{ btn: true, selected: button2.selected }"
                  @click="toggleSelection(button2)">
                  {{ button2.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
                </div>
              </template>
              <template v-else>
                <button
                  v-for="(button2, index) in buttons2"
                  :key="index"
                  :class="{ btn: true, selected: button2.selected }"
                  @click="toggleSelection(button2)">
                  {{ button2.label }}
                </button>
                <div style="margin-top: 10px">
                  <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
                </div>
              </template>
            </div>
          </div>
          <!-- 控制模式 -->
          <div>
            <div class="controlarea" v-show="showControlMode">
              <div class="controltab"></div>
              <span class="controltext"> 控制模式 </span>
            </div>
            <!-- 控制模式按钮部分 -->
            <div class="controlmodebtnarea" v-show="showControlMode">
              <button
                v-for="(button3, index) in controlbutton"
                :key="index"
                :class="{ btn: true, selected: button3.label === selectedButton3 }"
                @click="selectButton3(button3)">
                {{ button3.label }}
              </button>
            </div>
          </div>
          <!-- 控制场景 -->
          <div>
            <div class="controlscenearea" v-show="showControlScene">
              <div class="controlscenetab"></div>
              <span class="controlscenetext"> 控制场景 </span>
            </div>
            <!-- 控制场景按钮部分 -->
            <div class="controlscenebtnarea" v-show="showControlScene">
              <button
                v-for="(button4, index) in controlscenebuttons"
                :key="index"
                :class="{ btn: true, selected: button4.label === selectedButton4 }"
                @click="selectButton4(button4)">
                {{ button4.label }}
              </button>
            </div>
          </div>
          <!-- 灯具参数 -->
          <div>
            <div class="lightparametersarea" v-if="selectedButton4">
              <div class="lightparameterstab"></div>
              <span class="lightparameterstext"> 灯具参数 </span>
            </div>
            <div class="lightparameterstextarea" v-if="selectedButton4">
              <p>开启数量</p>
              <p>亮度(lux)</p>
              <p>色温(k)</p>
              <p>8/10</p>
              <p>100</p>
              <p>4200</p>
            </div>
          </div>
          <div class="bottom">
            <button class="flushed" @click="refresh">刷新</button>
            <button class="execute" @click="showModal">执行</button>
          </div>
          <a-modal
            width="500px"
            height="792px"
            v-model:visible="executevisible"
            :closable="false"
            :style="{ backgroundColor: '#000', overflow: 'hidden' }"
            :mask="false"
            :bodyStyle="{
              background: 'rgba(0, 0, 0, 0.9)',
              opacity: 0.8,
              height: '792px',
              maxHeight: '792px',
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
            }">
            <div style="height: 792px">
              <div style="width: 100%; text-align: center">
                <span class="text-change">变更内容</span>
              </div>
              <div class="journal" style="margin-top: 20px">
                <div class="imgText">
                  <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                    >站厅照明 1区</span
                  >
                </div>
                <div class="gird22">
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >100lux</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >30lux</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >4000k</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >3800k</span
                    >
                  </div>
                </div>
              </div>
              <div class="journal" style="margin-top: 20px">
                <div class="imgText">
                  <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                    >站厅照明 1区</span
                  >
                </div>

                <div class="gird22">
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >100lux</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >30lux</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >4000k</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >3800k</span
                    >
                  </div>
                </div>
              </div>
              <div class="journal" style="margin-top: 20px">
                <div class="imgText">
                  <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                    >站厅照明 1区</span
                  >
                </div>

                <div class="gird22">
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >100lux</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >30lux</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >4000k</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >3800k</span
                    >
                  </div>
                </div>
              </div>
              <div class="excubtn">
                <button @click="excuModal" class="excuno">取消</button>
                <button @click="handleOk" class="excuok">执行</button>
              </div>
            </div>
          </a-modal>
        </a-tab-pane>
        <a-tab-pane key="2" tab="计划列表" force-render>
          <a-table bordered :data-source="dataSource" :columns="columns" class="atable">
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'name'">
                <div class="editable-cell">
                  <span @click="showInfo(text)">
                    {{ text || ' ' }}
                  </span>
                </div>
              </template>

              <template v-else-if="column.dataIndex === 'operation'">
                <a class="tabreboot">重启</a>
                <a class="tabdelete">删除</a>
              </template>
            </template>
          </a-table>
          <div class="divadd">
            <button class="add" @click="addModal">添加</button>
          </div>
          <a-modal
            v-model:visible="addvisible"
            width="500px"
            height="792px"
            :closable="false"
            :footer="null"
            :style="{ backgroundColor: '#000' }"
            :mask="false"
            :bodyStyle="{
              background: 'rgba(0, 0, 0, 0.9)',
              opacity: 0.8,
              height: '792px',
              maxHeight: '792px',
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
            }">
            <p style="font-size: 18px; font-weight: 700">计划库</p>
            <div style="width: 100%; border-top: 1px solid rgba(255, 255, 255, 1)"></div>
            <div style="margin-top: 20px">
              <a-transfer
                v-model:target-keys="targetKeys"
                :data-source="mockData"
                show-search
                :filter-option="filterOption"
                :render="(item) => item.title"
                @change="handleChange"
                :style="{ color: 'rgba(255,255,255,1)' }"
                @search="handleSearch" />
            </div>
            <button class="addok" @click="addhandleOk">确定</button>
          </a-modal>
        </a-tab-pane>
        <a-tab-pane key="3" tab="日志">
          <table class="custom-table table1">
            <thead>
              <tr>
                <th>序号</th>
                <th>执行时间</th>
                <th>操作内容</th>
                <th>操作人</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(row, index) in dataSource1"
                :key="index"
                @click="handleRowClick(row.id, row.name, row.age)">
                <td>{{ row.key }}</td>
                <td>{{ row.data }}</td>
                <td>{{ row.planname }}</td>
                <td>{{ row.status }}</td>
              </tr>
            </tbody>
          </table>
          <a-modal
            width="500px"
            height="792px"
            v-model:visible="logModalVisible"
            :closable="false"
            :style="{ backgroundColor: '#000', overflow: 'hidden' }"
            @cancel="closeLogModal"
            :footer="null"
            :mask="false"
            :bodyStyle="{
              background: 'rgba(0, 0, 0, 0.9)',
              opacity: 0.8,
              height: '792px',
              maxHeight: '792px',
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
            }">
            <div style="height: 792px">
              <div>
                <div class="div-operation"></div>
                <span class="text-operation">操作日志</span>
              </div>
              <div class="journal" style="margin-top: 20px">
                <div class="imgText">
                  <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                    >站厅照明 1区</span
                  >
                </div>
                <div class="gird22">
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >100lux</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >30lux</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >4000k</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >3800k</span
                    >
                  </div>
                </div>
              </div>
              <div class="journal" style="margin-top: 20px">
                <div class="imgText">
                  <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                    >站厅照明 1区</span
                  >
                </div>

                <div class="gird22">
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >100lux</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >30lux</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >4000k</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >3800k</span
                    >
                  </div>
                </div>
              </div>
              <div class="journal" style="margin-top: 20px">
                <div class="imgText">
                  <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                    >站厅照明 1区</span
                  >
                </div>

                <div class="gird22">
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制模式
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      亮度
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >100lux</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >30lux</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 96px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      控制场景
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >手动</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >自动</span
                    >
                  </div>
                  <div>
                    <button
                      style="
                        width: 68px;
                        height: 40px;
                        opacity: 0.7;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(86, 221, 253, 1) 0%,
                          rgba(25, 176, 255, 1) 100%
                        );
                        border: none;
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                      ">
                      色温
                    </button>
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >4000k</span
                    >
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
                      >3800k</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </a-modal>
          <div class="divadd">
            <button class="add">刷新</button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-drawer>
  <div class="drawer-title1" v-if="!visible">
    <a-button @click="toggleDrawer" class="arrowbtn">
      <left-outlined style="color: rgba(255, 255, 255, 1)" />
    </a-button>
  </div>
  <div class="drawer-title2" v-if="visible">
    <a-button @click="toggleDrawer" class="arrowbtn">
      <right-outlined style="color: rgba(255, 255, 255, 1)" />
    </a-button>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import { RightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  const toggleDrawer = () => {
    visible.value = !visible.value;
  };
  const bulbs = ref([
    { className: 'bulbLogo1', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
    { className: 'bulbLogo2', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
    { className: 'bulbLogo3', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
    { className: 'bulbLogo4', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
    { className: 'bulbLogo5', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
    { className: 'bulbLogo6', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
    { className: 'bulbLogo7', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
    { className: 'bulbLogo8', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
    { className: 'bulbLogo9', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
    { className: 'bulbLogo10', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
    { className: 'bulbLogo11', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
    { className: 'bulbLogo12', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
    { className: 'bulbLogo13', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
    { className: 'bulbLogo14', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
    { className: 'bulbLogo15', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
    { className: 'bulbLogo16', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
  ]);

  // 照明区域按钮单选
  const isPlanEnabled = ref(true); // 初始状态是启用
  const togglePlan = () => {
    isPlanEnabled.value = !isPlanEnabled.value;
  };
  const showAllButtonsarea = ref(false);

  const buttons1 = computed(() => buttons.value.slice(0, 8));
  const buttons = ref([
    { label: 'A区', selected: false, id: 1 },
    { label: 'B区', selected: false, id: 2 },
    { label: 'C区', selected: false, id: 3 },
    { label: 'D区', selected: false, id: 4 },
    { label: '计划启用', selected: false, id: 5 },
    { label: 'A区', selected: false, id: 6 },
    { label: 'B区', selected: false, id: 7 },
    { label: 'C区', selected: false, id: 8 },
    { label: 'D区', selected: false, id: 4 },
    { label: '计划启用', selected: false, id: 5 },
    { label: 'A区', selected: false, id: 6 },
    { label: 'B区', selected: false, id: 7 },
    { label: 'C区', selected: false, id: 8 },
  ]);
  const selectedButton = ref(null);
  const selectButton = (button) => {
    selectedButton.value = button;
    const startIndex = (button.id - 1) * 4; // 计算当前区域灯泡的起始索引
    const endIndex = startIndex + 4; // 计算当前区域灯泡的结束索引
    bulbs.value.forEach((bulb, index) => {
      bulb.visible = index >= startIndex && index < endIndex;
    });
  };

  // 照明回路按钮
  let singleSelection = ref(true); // 默认为单选
  const selectAllCheckbox = ref(false);
  const showControlMode = ref(false);
  const showAllButtons = ref(false);
  // 默认展示八个
  const limitedButtons = computed(() => buttons2.value.slice(0, 8));
  const buttons2 = ref([
    { label: '1区', selected: false },
    { label: '2区', selected: false },
    { label: '3区', selected: false },
    { label: '4区', selected: false },
    { label: '5区', selected: false },
    { label: '6区', selected: false },
    { label: '7区', selected: false },
    { label: '1区', selected: false },
    { label: '2区', selected: false },
    { label: '3区', selected: false },
  ]);
  const isPlanEnabled2 = ref(true);
  const togglePlan2 = () => {
    isPlanEnabled2.value = !isPlanEnabled2.value;
  };
  const selectAll = () => {
    singleSelection.value = !singleSelection.value;
    if (singleSelection.value) {
      // 单选
      buttons2.value.forEach((button) => {
        button.selected = false;
      });
    } else {
      // 多选
      buttons2.value.forEach((button) => {
        button.selected = false;
      });
    }

    selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
  };

  const toggleAllSelection = () => {
    if (selectAllCheckbox.value) {
      // 如果全选开关被打开，实现多选模式
      buttons2.value.forEach((button) => {
        button.selected = true;
      });
      singleSelection.value = false;
    } else {
      // 如果全选开关被关闭，实现单选模式
      buttons2.value.forEach((button) => {
        button.selected = false;
      });
      singleSelection.value = true;
    }
  };

  const toggleSelection = (button) => {
    if (singleSelection.value) {
      // 单选模式
      buttons2.value.forEach((b) => {
        if (b !== button) {
          b.selected = false;
        }
      });
    }
    button.selected = !button.selected;
    // 如果当前处于多选模式，更新全选开关的状态
    if (!singleSelection.value) {
      selectAllCheckbox.value = buttons2.value.some((button) => button.selected);
    } else {
      // 在单选模式下，全选开关应设为false，因为不可能所有按钮都被选中
      selectAllCheckbox.value = false;
    }
    showControlMode.value = button;
  };

  // 控制模式按钮
  const selectedButton3 = ref('');
  const showControlScene = ref(false);
  const controlbutton = ref([
    { label: '托管', selected: false },
    { label: 'AI', selected: false },
    { label: '手动', selected: false },
  ]);
  // 控制场景按钮
  const selectedButton4 = ref('');
  const controlscenebuttons = ref([
    { label: '检修', selected: false },
    { label: '午休', selected: false },
    { label: '疏散', selected: false },
    { label: '客流高峰', selected: false },
  ]);
  const selectButton3 = (button3) => {
    selectedButton3.value = button3.label;
    showControlScene.value = button3.label === '手动';
    selectedButton4.value = ''; // 清空选中的控制场景按钮
  };
  const selectButton4 = (button4) => {
    selectedButton4.value = button4.label;
  };
  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
    },
    {
      title: '执行时间',
      dataIndex: 'data',
    },
    {
      title: '计划名称',
      dataIndex: 'planname',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '状态',
      dataIndex: 'operation',
    },
  ];

  const dataSource = ref([
    {
      key: '1',
      data: '2024-05-01',
      planname: '劳动节',
      status: '暂停中',
    },
    {
      key: '2',
      data: '2024-05-01',
      planname: '国庆节',
      status: '待执行',
    },
    {
      key: '3',
      data: '2024-05-01',
      planname: '元旦',
      status: '待执行',
    },
  ]);
  const dataSource1 = ref([
    {
      key: '1',
      data: '2024-05-01',
      planname: '计划再开',
      status: '张三111',
    },
    {
      key: '2',
      data: '2024-05-01',
      planname: '检修模式',
      status: '李四12',
    },
    {
      key: '3',
      data: '2024-05-01',
      planname: '设备变更',
      status: '王五33',
    },
  ]);
  // 抽屉默认显示
  const visible = ref(true);
  const activeKey = ref('1');

  const refresh = () => {
    selectedButton.value = null;
    showControlMode.value = false;
    showControlScene.value = false;
    selectedButton3.value = null;
    selectedButton4.value = null;
  };
  // 操作日志
  const logModalVisible = ref(false);
  const handleRowClick = (record: any, index: number) => {
    // 处理行点击事件，例如选中行或者其他操作
    console.log(record, '=================', index);
    // 显示模态框
    logModalVisible.value = true;
  };
  const closeLogModal = () => {
    logModalVisible.value = false;
  };
  // 执行确认
  const executevisible = ref<boolean>(false);
  const showModal = () => {
    executevisible.value = true;
  };
  const excuModal = () => {
    console.log('取消111');
    executevisible.value = false;
  };
  const handleOk = (e: MouseEvent) => {
    console.log('ok1111');
    executevisible.value = false;
  };
  // 添加模态框
  const addvisible = ref<boolean>(false);
  const addModal = () => {
    addvisible.value = true;
  };
  // 穿梭框
  interface MockData {
    key: string;
    title: string;
    description: string;
    chosen: boolean;
  }
  const mockData = ref([
    {
      key: '1',

      title: '计划再开',
    },
    {
      key: '2',

      title: '检修模式',
    },
    {
      key: '3',

      title: '设备变更',
    },
  ]);
  // const mockData = ref<MockData[]>([]);
  const targetKeys = ref<string[]>([]);
  const filterOption = (inputValue: string, option: MockData) => {
    return option.description.indexOf(inputValue) > -1;
  };
  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
    console.log(keys, direction, moveKeys);
  };
  const handleSearch = (dir: string, value: string) => {
    console.log('search:', dir, value);
  };
  const addhandleOk = (e: MouseEvent) => {
    console.log(e);
    addvisible.value = false;
  };
</script>

<style lang="less" scoped>
  .bulbLogo1 {
    margin-top: 40%;
    margin-left: 12%;
  }
  .bulbLogo2 {
    margin-top: 35%;
    margin-left: 20%;
  }
  .bulbLogo3 {
    margin-top: 23%;
    margin-left: 10%;
  }
  .bulbLogo4 {
    margin-top: 10%;
    margin-left: 15%;
  }
  .bulbLogo5 {
    margin-top: 8%;
    margin-left: 13%;
  }
  .bulbLogo6 {
    margin-top: 8%;
    margin-left: 15%;
  }
  .bulbLogo7 {
    margin-top: 0%;
    margin-left: 12%;
  }
  .bulbLogo9 {
    margin-top: 35%;
    margin-left: 20%;
  }
  .bulbLogo10 {
    margin-top: 35%;
    margin-left: 20%;
  }
  .bulbLogo11 {
    margin-top: 35%;
    margin-left: 20%;
  }
  .bulbLogo12 {
    margin-top: 35%;
    margin-left: 20%;
  }
  .custom-table {
    border-collapse: collapse;
    width: 416px;
    height: 195px;
    color: rgba(255, 255, 255, 1);
  }

  .custom-table th,
  .custom-table td {
    border: 1px solid rgba(163, 192, 243, 1);
    text-align: left;
    padding: 8px;
    text-align: center;
  }

  .custom-table tr:hover {
    background-color: rgba(67, 136, 251, 1);
    cursor: pointer;
  }

  .table1 {
    margin-top: 20px;
    width: 100%;
    cellspacing: 0;
    cellpadding: 0;
    border: 1px solid rgba(255, 255, 255);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
  }

  .lightarea,
  .circuitarea,
  .controlarea,
  .controlscenearea,
  .lightparametersarea {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }

  .lightareatab,
  .circuittab,
  .controltab,
  .controlscenetab,
  .lightparameterstab {
    width: 5px;
    height: 23px;
    opacity: 1;
    background: rgba(26, 174, 251, 1);
    margin-right: 4px;
  }

  .lightareatext,
  .circuittext,
  .controltext,
  .controlscenetext,
  .lightparameterstext {
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    line-height: 19px;
    width: 110px;
    height: 23px;
    opacity: 1;
    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
  }

  .lightareatab,
  .lightareatext {
    display: inline-block;
    justify-content: center;
  }

  .plan.enabled {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    margin-left: 235px;
    width: 88px;
    height: 32px;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    color: white;
  }

  .plan.disabled {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    margin-left: 235px;
    width: 88px;
    height: 32px;
    background-color: red;
  }

  .plan:disabled {
    cursor: not-allowed;
  }

  .openplan.enabled2 {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    width: 88px;
    height: 32px;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    color: white;
  }

  .openplan.disabled2 {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    width: 88px;
    height: 32px;
    background-color: red;
  }

  .openplan:disabled {
    cursor: not-allowed;
  }

  .btn2 {
    display: flex;
    align-items: center;
    margin-left: 157px;
  }

  .openzm {
    color: rgba(34, 183, 255, 1);
    margin-left: 20px;
    font-size: 14px;
  }

  .custom-checkbox {
    width: 13px;
    height: 13px;
  }

  .both {
    width: 59.79px;
    height: 32px;
    opacity: 1;
    background: linear-gradient(
      180deg,
      rgba(255, 187, 0, 1) 0%,
      rgba(255, 112, 3, 1) 91.21%,
      rgba(255, 129, 3, 1) 100%
    );
    margin-left: 5px;
    margin-right: 15px;
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 5px;
  }

  .blue-background.ant-switch-checked {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch {
    background-color: grey !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch .ant-switch-handle {
    background-color: grey !important;
  }

  p {
    color: rgba(255, 255, 255, 1);
  }

  .area,
  .btnarea,
  .controlmodebtnarea,
  .controlscenebtnarea {
    margin-left: -17px;
  }

  .btn {
    width: 92px;
    height: 40px;
    border-radius: 4px;
    opacity: 1;
    margin-top: 10px;
    margin-left: 17px;
    font-size: 14px;
    font-weight: 400;
    opacity: 1;
    border: 1px solid rgba(207, 212, 219, 1);
    line-height: 20.27px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: top;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .selected {
    background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
    color: rgba(0, 61, 90, 1);
    border: 1px solid rgba(255, 255, 255, 1);
  }

  .btn:hover {
    background-color: rgba(207, 212, 219, 1);
  }

  .btn:active {
    background-color: rgba(102, 102, 102, 1);
    color: white;
  }

  .circuitarea,
  .controlscenearea,
  .lightparametersarea {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .circuittab,
  .circuittext {
    display: inline-block;
  }

  .batch {
    width: 60px;
    height: 32px;
    opacity: 1;
    border: 1px solid rgba(67, 136, 251, 1);
    color: rgba(67, 136, 251, 1);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 1);
    margin-left: 11px;
  }

  .controlarea {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .controltab,
  .controltext {
    display: inline-block;
  }

  :deep(.cell) {
    text-align: center;
  }

  :deep(#pane-first) {
    height: 100%;
  }

  .controlscenetab,
  .controlscenetext {
    display: inline-block;
  }

  .lightparameterstab,
  .lightparameterstext {
    display: inline-block;
  }

  .lightparameterstextarea {
    border: 1px solid rgba(236, 239, 245, 1);
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .lightparameterstextarea > p {
    height: 100%;
    display: flex;
    border: 1px solid rgba(236, 239, 245, 1);
    justify-content: center;
    align-items: center;
  }

  .bottom {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 10px;
  }

  .execute {
    margin-right: 20px;
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    border: 0;
    margin-left: 10px;
  }

  .flushed {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(193, 197, 204, 1);
  }

  .tabreboot,
  .tabdelete {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: rgba(67, 136, 251, 1);
  }

  .tabreboot {
    margin-right: 8px;
  }

  .add {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    border: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .divadd {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 10px;
    margin-right: 20px;
  }

  .atable {
    margin-top: 20px;
  }

  :deep(.ant-table-pagination) {
    visibility: hidden;
  }

  .drawer-content {
    margin-left: 20px;
    /* 留出空间给小箭头 */
  }

  .arrow-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
    /* 控制箭头显示在最上层 */
  }

  .drawer-title1 {
    position: fixed;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    z-index: 99999;
  }

  .drawer-title2 {
    position: fixed;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    right: 495px;
    margin: auto;
    z-index: 99999;
  }

  .arrowbtn {
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 1);
    opacity: 0.5;
    border: none;
  }

  :deep(.ant-tabs-tab-btn) {
    color: white;
    /* 背景颜色改为白色 */
  }

  :deep(.ant-table) {
    background-color: transparent;
  }

  :deep(.ant-table-bordered) {
    background-color: transparent;
  }

  :deep(.ant-table-thead) {
    background-color: transparent;
  }

  :deep(.ant-table-cell) {
    background-color: transparent;
    color: #fff;
  }

  .lighting-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (min-width: 0px) and (max-width: 959px) {
    .lighting-img {
    }
  }

  @media screen and (min-width: 960px) and (max-width: 1023px) {
    .lighting-img {
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1279px) {
    .lighting-img {
    }
  }

  /*>=1280,<1440的设备屏幕*/
  @media screen and (min-width: 1280px) and (max-width: 1439px) {
    .lighting-img {
    }
  }

  @media screen and (min-width: 1440px) and (max-width: 1679px) {
    .lighting-img {
    }
  }

  /*>=1680,<1920px的设备屏幕*/
  @media screen and (min-width: 1680px) and (max-width: 1919px) {
    .lighting-img {
    }
  }

  /*>=1920的设备屏幕*/
  @media (min-width: 1920px) {
    .lighting-img {
      height: 1191px;
    }
  }

  .lighting-img-box {
    width: 100%;
    height: 100vh;
    /* 设置图片容器的高度为视口高度 */
    overflow: hidden;
    /* 隐藏溢出部分 */
    position: relative;
    /* 使内部绝对定位元素基于此容器定位 */
  }

  .lighting-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-fit: cover;
    position: relative;
  }

  .lighting-img-box img {
    width: 100%;
    height: auto;
  }

  .lighting-img-box {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .lighting-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .F1 {
    width: 120px;
    height: 50.72px;
    border-radius: 4px;
    background: rgba(39, 120, 255, 1);
    border: 1px solid rgba(51, 199, 255, 1);
    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
    font-size: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .F2,
  .platform {
    width: 120px;
    height: 50.72px;
    border-radius: 4px;
    background: rgba(7, 72, 116, 1);
    box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
    font-size: 24px;
    font-weight: 400;
    color: rgba(146, 187, 255, 1);
    border: 1px solid rgba(39, 120, 255, 1);
    margin-top: 20px;
  }

  .btn-box {
    position: fixed;
    top: 100px;
    left: 250px;
  }

  .lighting-img-box > .bulbBox > .wh100 {
    width: 38px;
    height: calc(38px + 19px);
  }

  .lighting-img-box > .bulbBox > .bulbLogo1 {
    position: absolute;
    top: 10%;
    left: 10%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo2 {
    position: absolute;
    top: 9%;
    left: 15%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo3 {
    position: absolute;
    top: 34%;
    left: 25%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo4 {
    position: absolute;
    top: 45%;
    left: 30%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo5 {
    position: absolute;
    top: 45%;
    left: 30%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo6 {
    position: absolute;
    top: 55%;
    left: 30%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo7 {
    position: absolute;
    top: 60%;
    left: 40%;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo8 {
    position: absolute;
    top: 55%;
    left: 70%;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo9 {
    position: absolute;
    top: 10%;
    left: 60%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo10 {
    position: absolute;
    top: 10%;
    left: 40%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo11 {
    position: absolute;
    top: 15%;
    left: 50%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo12 {
    position: absolute;
    top: 15%;
    left: 60%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo13 {
    position: absolute;
    top: 55%;
    left: 70%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo14 {
    position: absolute;
    top: 45%;
    left: 60%;
    display: flex;
    align-items: center;
  }

  .lighting-img-box > .bulbBox > .bulbLogo15 {
    position: absolute;
    top: 45%;
    left: 80%;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo16 {
    position: absolute;
    top: 45%;
    left: 90%;
    display: flex;
    align-items: center;
  }
  .editable-cell {
    position: relative;

    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
      padding-right: 24px;
    }

    .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
    }

    .editable-cell-icon {
      margin-top: 4px;
      display: none;
    }

    .editable-cell-icon-check {
      line-height: 28px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
      color: #108ee9;
    }

    .editable-add-btn {
      margin-bottom: 8px;
    }
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .div-operation {
    width: 3px;
    height: 13px;
    opacity: 1;
    border-radius: 1px;
    background: rgba(67, 136, 251, 1);
  }

  .text-operation {
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 700;
    margin-left: 5px;
  }

  .div-operation,
  .text-operation {
    display: inline-block;
  }

  .journal {
    padding: 3% 10%;
    background-image: url('/asset/image/bulbLogo/bgsquare.png');
    background-size: 450px 177px;
    width: 450px;
    height: 177px;
  }

  .gird22 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 20px;
    margin-top: 10px;
  }

  .bulbLogo1 {
    background-image: url('/asset/t/image/bulbLogo/bulbLogo1.png');
  }

  .imgText {
    display: flex;
    align-items: center;
  }

  :deep(.ant-modal-content) {
    width: 555px;
    height: 792px;
  }

  :deep(.ant-modal-body) {
    width: 555px;
    max-height: 792px !important;
    box-sizing: border-box;
  }

  .text-change {
    text-align: center;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
  }

  .excuno {
    width: 150px;
    height: 40px;
    margin-top: 30px;
  }

  .excuok {
    width: 150px;
    height: 40px;
    margin-top: 30px;
  }

  .excubtn {
    display: flex;
    justify-content: space-between;
  }

  .addok {
    width: 74px;
    height: 40px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    border: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-top: 440px;
    margin-left: 350px;
  }
</style>
