<template>
    <div class="lighting-img">
      <div class="lighting-img-box">
        <img src="../image/bg.jpg" />
        <div class="bulbBox">
          <div class="wh100 bulbLogo1">
            <img class="bulbImg" src="../../../../public/bulbLogo/组 22419@2x.png" alt="" />
          </div>
          <div class="wh100 bulbLogo2">
            <img class="bulbImg" src="../../../../public/bulbLogo/组 22419.png" alt="" />
          </div>
          <div class="wh100 bulbLogo3">
            <img class="bulbImg" src="../../../../public/bulbLogo/组 22394@2x.png" alt="" />
          </div>
          <div class="wh100 bulbLogo4">
            <img class="bulbImg" src="../../../../public/bulbLogo/组 22396.png" alt="" />
          </div>
          <div class="wh100 bulbLogo5">
            <img class="bulbImg" src="../../../../public/bulbLogo/组 22396@2x.png" alt="" />
          </div>
          <div class="wh100 bulbLogo6">
            <img class="bulbImg" src="../../../../public/bulbLogo/组 22400.png" alt="" />
          </div>
          <div class="wh100 bulbLogo7">
            <img class="bulbImg" src="../../../../public/bulbLogo/组 22400@2x.png" 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 class="lightarea">
              <div class="lightareatab"></div>
              <span class="lightareatext"> 照明区域 </span>
              <button class="plan">计划启用</button>
            </div>
            <!-- 照明区域按钮部分 -->
            <div class="area">
              <button
                v-for="(button, index) in buttons"
                :key="index"
                :class="{ btn: true, selected: button === selectedButton }"
                @click="selectButton(button)"
              >
                {{ button.label }}
              </button>
            </div>
            <!-- 照明回路部分 -->
            <div class="circuitarea" v-if="selectedButton">
              <div class="circuittab"></div>
              <span class="circuittext">照明回路</span>
              <div class="btn2">
                <input
                  type="checkbox"
                  class="custom-checkbox"
                  v-model="selectAllCheckbox"
                  @change="toggleAllSelection"
                />
                <span class="both" @click="selectAll">全选</span>
                <button class="openplan">启用面板</button>
              </div>
            </div>
            <!-- 照明回路按钮部分 -->
            <div class="btnarea" v-if="selectedButton">
              <button
                v-for="(button2, index) in buttons2"
                :key="index"
                :class="{ btn: true, selected: button2.selected }"
                @click="toggleSelection(button2)"
              >
                {{ button2.label }}
              </button>
            </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 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 class="lightparametersarea">
              <div class="lightparameterstab"></div>
              <span class="lightparameterstext"> 灯具参数 </span>
            </div>
            <div class="lightparameterstextarea">
              <p>开启数量</p>
              <p>亮度(lux)</p>
              <p>色温(k)</p>
              <p>8/10</p>
              <p>100</p>
              <p>4200</p>
            </div>
            <div class="bottom">
              <button class="flushed">刷新</button>
              <button class="execute">执行</button>
            </div>
          </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">添加</button>
            </div>
          </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="562px"
              height="792px"
              v-model:visible="logModalVisible"
              :style="{ backgroundColor: '#000' }"
              @cancel="closeLogModal"
              :footer="null"
              :mask="false"
              :bodyStyle="{
                background: 'rgba(0, 0, 0, 0.9)',
                opacity: 0.8,
                height: '792px',
                maxHeight: '792px',
                boxSizing: 'borderBox',
              }"
            >
              <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="../../../../public/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
                      >
                      <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
                      >
  
                      <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
                      >
  
                      <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
                      >
  
                      <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="../../../../public/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
                      >
                      <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
                      >
  
                      <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
                      >
  
                      <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
                      >
  
                      <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="../../../../public/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
                      >
                      <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
                      >
  
                      <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
                      >
  
                      <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
                      >
  
                      <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>
      <div class="arrow-indicator" v-show="visible">
        <a-icon type="menu-fold" />
      </div>
    </a-drawer>
    <div class="drawer-title1" v-if="!visible">
      <a-button @click="toggleDrawer">
        <left-outlined />
      </a-button>
    </div>
    <div class="drawer-title2" v-if="visible">
      <a-button @click="toggleDrawer">
        <right-outlined />
      </a-button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from "vue";
  const toggleDrawer = () => {
    visible.value = !visible.value;
  };
  // 照明区域按钮单选
  const buttons = ref([
    { label: "A区", selected: false },
    { label: "B区", selected: false },
    { label: "C区", selected: false },
    { label: "D区", selected: false },
    { label: "计划启用", selected: false },
  ]);
  const selectedButton = ref<Button | null>(null);
  const selectButton = (button: Button) => {
    selectedButton.value = button;
  };
  // 照明回路按钮
  let singleSelection = true; // 默认为单选
  const selectAllCheckbox = ref(false);
  const showControlMode = ref(false);
  const buttons2 = ref([
    { label: "1区", selected: false },
    { label: "2区", selected: false },
    { label: "3区", selected: false },
    { label: "4区", selected: false },
  ]);
  const selectAll = () => {
    singleSelection = !singleSelection;
    if (singleSelection) {
      // 单选
      buttons2.value.forEach((button) => {
        button.selected = false;
      });
    } else {
      // 多选
      buttons2.value.forEach((button) => {
        button.selected = true;
      });
    }
    selectAllCheckbox.value = !singleSelection; // 更新全选 input 输入框的状态
  };
  const toggleAllSelection = () => {
    buttons2.value.forEach((button) => {
      button.selected = selectAllCheckbox.value;
    });
    singleSelection = !selectAllCheckbox.value; // 如果全选，切换为多选模式
  };
  const toggleSelection = (button) => {
    showControlMode.value = button.label;
    if (singleSelection) {
      // 单选模式
      buttons2.value.forEach((b) => {
        if (b !== button) {
          b.selected = false;
        }
      });
    }
    button.selected = !button.selected;
    selectAllCheckbox.value = buttons2.value.every((button) => button.selected);
  };
  
  // 控制模式按钮
  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 columns1 = [
  ]);
  const columns1 = [
    {
      title: "序号",
      dataIndex: "key",
    },
    {
      title: "执行时间",
      dataIndex: "data",
    },
    {
      title: "操作内容",
      dataIndex: "planname",
    },
    {
      title: "操作人",
      dataIndex: "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 showDrawer = () => {
    visible.value = true;
  };
  // 操作日志
  
  const logModalVisible = ref(false);
  
  const handleRowClick = (record: any, index: number) => {
    // 处理行点击事件，例如选中行或者其他操作
    console.log(record, "=================", index);
    // 显示模态框
    logModalVisible.value = true;
  };
  
  const closeLogModal = () => {
    logModalVisible.value = false;
  };
  </script>
  
  <style lang="less" scoped>
  .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 {
    width: 88px;
    height: 32px;
    opacity: 1;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    margin-left: 235px;
  }
  
  .openplan {
    width: 88px;
    height: 32px;
    opacity: 1;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
  }
  
  .btn2 {
    display: flex;
    align-items: center;
    margin-left: 177px;
  }
  
  .custom-checkbox {
    width: 13px;
    height: 13px;
  }
  
  .both {
    margin-left: 5px;
    margin-right: 15px;
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
  }
  
  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: 30px;
    background-color: red;
    margin: auto;
    z-index: 99999;
  }
  
  .drawer-title2 {
    position: fixed;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    right: 500px;
    background-color: red;
    margin: auto;
    z-index: 99999;
  }
  
  /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: 934px;
    object-fit: cover;
  }
  
  .lighting-img-box {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .lighting-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-fit: cover;
    position: relative;
  }
  
  .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: 111px;
    left: 111px;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo2 {
    position: absolute;
    top: 222px;
    left: 222px;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo3 {
    position: absolute;
    top: 333px;
    left: 333px;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo4 {
    position: absolute;
    top: 444px;
    left: 444px;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo5 {
    position: absolute;
    top: 555px;
    left: 555px;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo6 {
    position: absolute;
    top: 666px;
    left: 666px;
    display: flex;
    align-items: center;
  }
  .lighting-img-box > .bulbBox > .bulbLogo7 {
    position: absolute;
    top: 777px;
    left: 777px;
    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("../../../../public/bulbLogo/bgsquare.png");
    background-size: 482px 177px;
    width: 482px;
    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("../../../../public/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;
  }
  </style>
  