<template>
  <div class="lighting-img" style="overflow: hidden">
    <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 class="light-tag">
      <div class="light-tag-tit">
        <img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt="">
        <span class="tagtext" :style="{
          fontSize: '16px',
          fontWeight: 700, color: 'rgba(255, 255, 255, 1)'
        }">站厅照明 1区</span>
        <button :style="{
          width: ' 50px',
          height: '24px',
          opacity: 1,
          background: 'rgba(57, 215, 187, 0.1)',
          border: '1px solid rgba(57, 215, 187, 1)',
          fontSize: '12px',
          fontWeight: 400,
          lineHeight: ' 17.38px',
          color: 'rgba(57, 215, 187, 1)',
          marginLeft: '180px'
        }">正常</button>
      </div>
      <div class="light-tag-box">
        <img src="/asset/image//bulbLogo/22496.png" alt="">
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }">控制模式</span>
        <span
          :style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginRight: '20px' }">自动</span>
        <img src="/asset/image//bulbLogo/22546.png" alt="">
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">亮度</span>
        <span
          :style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginLeft: '20px' }">1000lux</span>
        <img src="/asset/image//bulbLogo/22554.png" alt="">
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }">控制场景</span>
        <span
          :style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginRight: '20px' }">舒适</span>
        <img src="/asset/image//bulbLogo/22553.png" alt="">
        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">色温</span>
        <span
          :style="{ color: 'rgba(255, 255, 255, 1)', fontSize: '16px', fontWeight: '700', marginLeft: '20px' }">4200k</span>
      </div>
    </div>
  </div>
  <a-drawer v-model:visible="visible" class="custom-class" width="496" height="1080" placement="right"
    :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" :closable="false" id="Odrawer"
    :maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }">
    <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 }" @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 }" @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>
                <a-switch v-model:checked="selectAllCheckbox" :class="{
                  'blue-background': selectAllCheckbox,
                  'grey-background': !selectAllCheckbox,
                }" @change="toggleAllSelection" />
                <button @click="allbtn1" class="allbtn">全选</button>            
                <button class="both" @click="selectAll">
                  {{ isAllchoose ? "多选" : "单选" }}
                </button>
              </div>
            </div>
            <div class="btnarea" v-if="selectedButton">
              <template v-if="!showAllButtons">
                <button v-for="(button2, index) in limitedButtons" :key="index"
                  :class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
                  <stop-outlined v-if="button2.zmhld" />
                  {{ 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">
              <table class="custom-table table1">
                <thead>
                  <tr :style="{ background: 'rgba(35,45,69)' }">
                    <th>开启数量</th>
                    <th>亮度(lux)</th>
                    <th>色温</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(row, index) in lightSource" :key="index" @click="handleRowClick(row.num)"
                    :style="{ height: '50px' }">
                    <td>{{ row.num }}</td>
                    <td>{{ row.light }}</td>
                    <td>{{ row.tempruter }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="bottom">
            <button class="flushed" @click="refresh">刷新</button>
            <button class="execute" @click="showModal">执行</button>
          </div>
          <a-modal :v-if="cxlist.length === 0" v-model:visible="executevisible" width="500px" height="792px" okText="执行"
            :closable="false" @ok="handleOk2" :mask="false" :bodyStyle="{
              opacity: 1,
              background: ' rgba(0,0,0)',
              color: 'rgba(255,83,0)',
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
              height: '100vh',
              maxHeight: '100vh',
              position: 'fixed',
              right: '496px',
              top: '0',
            }">
            <div :v-if="cxlist.length === 0" style="height: 792px">
              <div>
                <div class="div-operation"></div>
                <span class="text-operation">变更内容 </span>
              </div>
              <div class="jbox" v-for="item in cxlist" key="item.id">
                <div class="journal" style="margin-top: 20px">
                  <div class="imgText">
                    <div class="zjzm">
                      <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
                      <span class="titletext" style="
                          font-size: 20px;
                          font-weight: 500;
                          color: rgba(255, 255, 255, 1);
                        ">{{ item.name }}</span>
                    </div>
                    <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
                  </div>
                  <div class="control-btn">
                    <button style="
                          width: 96px;
                          height: 40px;
                          border-radius: 4px;
                          background: linear-gradient(
                            180deg,
                            rgba(1, 206, 255, 1) 0%,
                            rgba(0, 150, 229, 1) 100%
                          );

                          border: 1px solid rgba(95, 154, 251, 1);
                          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;
                          margin-left: 12px;
                          margin-right: 8px;
                        ">手动</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                          color: rgba(255, 255, 255, 1);
                          font-size: 14px;
                          font-weight: 400;
                          margin-left: 8px;
                          margin-right: 40px;
                        ">自动</span>
                  </div>
                  <div class="light-btn">
                    <button style="
                          width: 68px;
                          height: 40px;
                          border-radius: 4px;
                          background: linear-gradient(
                            180deg,
                            rgba(1, 206, 255, 1) 0%,
                            rgba(0, 150, 229, 1) 100%
                          );

                          border: 1px solid rgba(95, 154, 251, 1);
                          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;
                          margin-left: 12px;
                        margin-right: 8px;
                        ">100lux</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                          color: rgba(243, 97, 99, 1);
                          font-size: 14px;
                          font-weight: 400;
                          margin-left: 8px;
                        ">30lux</span>
                  </div>
                  <div class="controlarea-btn">
                    <button style="
                          width: 96px;
                          height: 40px;
                          border-radius: 4px;
                          background: linear-gradient(
                            180deg,
                            rgba(1, 206, 255, 1) 0%,
                            rgba(0, 150, 229, 1) 100%
                          );

                          border: 1px solid rgba(95, 154, 251, 1);
                          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;
                          margin-left: 12px;
                        margin-right: 8px;
                        ">手动</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                          color: rgba(255, 255, 255, 1);
                          font-size: 14px;
                          font-weight: 400;
                          margin-left: 8px;
                          margin-right: 40px;
                        ">自动</span>
                  </div>
                  <div class="temp-btn">
                    <button style="
                          width: 68px;
                          height: 40px;
                          border-radius: 4px;
                          background: linear-gradient(
                            180deg,
                            rgba(1, 206, 255, 1) 0%,
                            rgba(0, 150, 229, 1) 100%
                          );
                          border: 1px solid rgba(95, 154, 251, 1);
                          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;
                          margin-left: 12px;
                          margin-right: 8px;
                        ">4000k</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                          color: rgba(255, 255, 255, 1);
                          font-size: 14px;
                          font-weight: 400;
                          margin-left: 8px;
                        ">3800k</span>
                  </div>
                </div>

              </div>
            </div>
          </a-modal>
        </a-tab-pane>
        <a-tab-pane key="2" tab="计划列表" force-render>
          <div class="divadd">
            <button class="add" @click="addModal">添加</button>
          </div>
          <table class="custom-table table1">
            <thead>
              <tr :style="{ background: 'rgba(35,45,69)' }">
                <th>序号</th>
                <th>执行时间</th>
                <th>计划名称</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in dataSource" :key="index">
                <td>{{ row.key }}</td>
                <td>{{ row.data }}</td>
                <td>{{ row.planname }}</td>
                <td v-if="row.status === '待执行'">
                  <button style="
                      font-size: 12px;
                      background: rgba(57, 215, 187, 0.1);
                      color: rgba(57, 215, 187, 1);
                      border: 1px solid rgba(57, 215, 187, 1);
                    ">
                    {{ row.status }}
                  </button>
                </td>
                <td v-if="row.status !== '待执行'">
                  <button style="
                      font-size: 12px;
                      background: rgba(243, 97, 99, 0.1);
                      border: 1px solid rgba(243, 97, 99, 1);
                      color: rgba(243, 97, 99, 1);
                    ">
                    {{ row.status }}
                  </button>
                </td>
                <td>
                  <button class="tabreboot" @click="handlerefClick1">重启</button>
                  <button class="tabdelete">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <a-modal v-model:visible="addvisible" width="500px" height="792px" :closable="false" :mask="false" :bodyStyle="{
            opacity: 1,
            background: ' rgba(0,0,0)',
            color: 'rgba(255,83,0)',
            boxSizing: 'borderBox',
            display: 'flex',
            flexDirection: 'column',
            height: '100vh',
            maxHeight: '100vh',
            position: 'fixed',
            right: '496px',
            top: '0',
          }">
            <div>
              <div class="div-operation"></div>
              <span class="text-operation">计划库</span>
            </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"
                :listStyle="{ border: '2px solid rgba(25,74,125,1)' }" />
            </div>
          </a-modal>
        </a-tab-pane>
        <a-tab-pane key="3" tab="日志">
          <table class="custom-table table1">
            <thead>
              <tr :style="{ background: 'rgba(35,45,69)' }">
                <th>序号</th>
                <th>执行时间</th>
                <th>操作内容</th>
                <th>操作人</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)"
                :class="row.key === trindex ? 'istrindex' : ''">
                <td>{{ row.key }}</td>
                <td>{{ row.data }}</td>
                <td>{{ row.planname }}</td>
                <td>{{ row.status }}</td>
              </tr>
            </tbody>
          </table>
          <a-modal width="500px" v-model:visible="logModalVisible" :closable="false" @cancel="closeLogModal"
            :footer="null" :mask="false" :bodyStyle="{
              marginLeft: 200,
              background: 'rgba(0, 0, 0, 1)',
              opacity: 0.8,
              boxSizing: 'borderBox',
              display: 'flex',
              flexDirection: 'column',
              height: '100vh',
              maxHeight: '100vh',
              position: 'fixed',
              right: '496px',
              top: '0',
            }">
            <div style="height: calc(100vh - 96px)">
              <div>
                <div class="div-operation"></div>
                <span class="text-operation">操作日志</span>
              </div>
              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" key="item.id">
                <div class="imgText">
                  <div class="zjzm">
                    <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
                    <span style="
                        font-size: 20px;
                        font-weight: 500;
                        color: rgba(255, 255, 255, 1);
                      ">{{ item.name }}</span>
                  </div>
                </div>

                <div class="gird22">
                  <div class="control-btn">
                    <button style="
                        width: 96px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        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;
                        margin-left: 12px;
                        margin-right: 8px;
                      ">{{ item.manual }}</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                        margin-right: 40px;
                      ">{{ item.automatic }}</span>
                  </div>
                  <div class="light-btn">
                    <button style="
                        width: 68px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        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;
                        margin-left: 12px;
                        margin-right: 8px;
                      ">{{ item.brightness }}</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                       
                      ">{{ item.brightness2 }}</span>
                  </div>
                  <div class="controlarea-btn">
                    <button style="
                        width: 96px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );

                        border: 1px solid rgba(95, 154, 251, 1);
                        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;
                        margin-left: 12px;
                        margin-right: 8px;
                      ">{{ item.manual2 }}</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                        margin-right: 40px;
                      ">{{ item.automatic2 }}</span>
                  </div>
                  <div class="temp-btn">
                    <button style="
                        width: 68px;
                        height: 40px;
                        border-radius: 4px;
                        background: linear-gradient(
                          180deg,
                          rgba(1, 206, 255, 1) 0%,
                          rgba(0, 150, 229, 1) 100%
                        );
                        border: 1px solid rgba(95, 154, 251, 1);
                        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;
                        margin-left: 12px;
                        margin-right: 8px;
                      ">{{ item.brightness3 }}</span>
                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
                    <span style="
                        color: rgba(255, 255, 255, 1);
                        font-size: 14px;
                        font-weight: 400;
                        margin-left: 8px;
                      
                      ">{{ item.brightness4 }}</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">
      <double-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">
      <double-right-outlined style="color: rgba(255, 255, 255, 1)" />
    </a-button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import {
  DownOutlined,
  UpOutlined,
  DoubleLeftOutlined,
  DoubleRightOutlined,
  StopOutlined
} from "@ant-design/icons-vue";

const lightSource = ref([{ num: "8/10", light: "100", tempruter: "4200" }]);
const toggleDrawer = () => {
  visible.value = !visible.value;
};
const handleOk2 = (e: MouseEvent) => {
  console.log(e);
  console.log("ok2");
  executevisible.value = false;
};
const cxlist = ref([
  {
    id: "1",
    name: "站厅照明  1区",
    manual: "手动",
    automatic: "自动",
    brightness: "100lux",
    brightness2: "30lux",
    manual2: "手动",
    automatic2: "自动",
    brightness3: "4000k",
    brightness4: "3800k",
  },
  {
    id: "2",
    name: "站厅照明  2区",
    manual: "手动",
    automatic: "自动",
    brightness: "100lux",
    brightness2: "30lux",
    manual2: "手动",
    automatic2: "自动",
    brightness3: "4000k",
    brightness4: "3800k",
  },
  {
    id: "3",
    name: "站厅照明  3区",
    manual: "手动",
    automatic: "自动",
    brightness: "100lux",
    brightness2: "30lux",
    manual2: "手动",
    automatic2: "自动",
    brightness3: "4000k",
    brightness4: "3800k",
  },
]);

const bulbs = ref([
  {
    className: "bulbLogo1",
    imageUrl: "/asset/image/bulbLogo/22419.png",
    visible: true,
  },
  {
    className: "bulbLogo2",
    imageUrl: "/asset/image/bulbLogo/22419.png",
    visible: true,
  },
  {
    className: "bulbLogo3",
    imageUrl: "/asset/image/bulbLogo/22419.png",
    visible: true,
  },
  {
    className: "bulbLogo4",
    imageUrl: "/asset/image/bulbLogo/22419.png",
    visible: true,
  },
  {
    className: "bulbLogo5",
    imageUrl: "/asset/image/bulbLogo/22394.png",
    visible: true,
  },
  {
    className: "bulbLogo6",
    imageUrl: "/asset/image/bulbLogo/22394.png",
    visible: true,
  },
  {
    className: "bulbLogo7",
    imageUrl: "/asset/image/bulbLogo/22394.png",
    visible: true,
  },
  {
    className: "bulbLogo8",
    imageUrl: "/asset/image/bulbLogo/22394.png",
    visible: true,
  },
  {
    className: "bulbLogo9",
    imageUrl: "/asset/image/bulbLogo/22396.png",
    visible: true,
  },
  {
    className: "bulbLogo10",
    imageUrl: "/asset/image/bulbLogo/22396.png",
    visible: true,
  },
  {
    className: "bulbLogo11",
    imageUrl: "/asset/image/bulbLogo/22396.png",
    visible: true,
  },
  {
    className: "bulbLogo12",
    imageUrl: "/asset/image/bulbLogo/22396.png",
    visible: true,
  },
  {
    className: "bulbLogo13",
    imageUrl: "/asset/image/bulbLogo/22400.png",
    visible: true,
  },
  {
    className: "bulbLogo14",
    imageUrl: "/asset/image/bulbLogo/22400.png",
    visible: true,
  },
  {
    className: "bulbLogo15",
    imageUrl: "/asset/image/bulbLogo/22400.png",
    visible: true,
  },
  {
    className: "bulbLogo16",
    imageUrl: "/asset/image/bulbLogo/22400.png",
    visible: true,
  },
]);

// 照明区域按钮单选
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;
  });
};

// 照明回路按钮
const isAllchoose = ref(true);
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([
  { id: 1, label: "1区", selected: false, zmhld: true },
  { id: 2, label: "2区", selected: false, zmhld: false },
  { id: 3, label: "3区", selected: false, zmhld: false },
  { id: 4, label: "4区", selected: false, zmhld: false },
  { id: 5, label: "5区", selected: false, zmhld: false },
  { id: 6, label: "6区", selected: false, zmhld: false },
  { id: 7, label: "7区", selected: false, zmhld: false },
  { id: 8, label: "1区", selected: false, zmhld: false },
  { id: 9, label: "2区", selected: false, zmhld: false },
  { id: 10, label: "3区", selected: false, zmhld: false },
]);
const zmhlid = ref();
const isPlanEnabled2 = ref(true);
const togglePlan2 = () => {
  isPlanEnabled2.value = !isPlanEnabled2.value;
  if (selectAllCheckbox.value) {
    buttons2.value.forEach((button) => {
      button.zmhld = true;
      button.selected = false;
    });
  } else {
    const item = buttons2.value.find((button) => button.id === zmhlid.value);
    if (item) {
      item.zmhld = !item.zmhld;
      item.selected = false;
    }
  }
};
const selectAll = () => {
  if (isAllchoose.value === false) {
    isPlanEnabled2.value = limitedButtons.value[0].zmhld;
  }
  singleSelection.value = !singleSelection.value;
  isAllchoose.value = !isAllchoose.value;
  if (singleSelection.value) {
    // 单选
    buttons2.value.forEach((button) => {
      button.selected = false;
    });
  } else {
    // 多选
    buttons2.value.forEach((button) => {
      button.selected = true;
    });
  }
  selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
};
const allbtn1 = () => {
  buttons2.value.forEach((button) => {
    if (!button.zmhld) {
      button.selected = true;
    }
  });
  selectAllCheckbox.value = true;
};
const toggleAllSelection = () => {
  if (selectAllCheckbox.value) {
    // 如果全选开关被打开，实现多选模式
    buttons2.value.forEach((button) => {
      button.selected = false;
    });
    singleSelection.value = false;
  } else {
    // 如果全选开关被关闭，实现单选模式
    buttons2.value.forEach((button) => {
      button.selected = false;
    });
    singleSelection.value = true;
  }
};

const toggleSelection = (button) => {
  console.log(button);
  zmhlid.value = button.id;
  console.log(zmhlid.value);
  isPlanEnabled2.value = button.zmhld;
  if (button.zmhld) {
    return;
  } else {
    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;
  }
};

// 控制模式按钮 vv
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 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 handlerefClick1 = () => {
  console.log(1111);
  executevisible.value = true;
};


let trindex = ref("-1");
const handleRowClick = (index: any) => {
  trindex.value = index;
  if (index === trindex.value) {
    console.log("tri");
  }
  // 显示模态框
  logModalVisible.value = true;
};
const closeLogModal = () => {
  logModalVisible.value = false;
};
// 执行确认
const executevisible = ref<boolean>(false);
const showModal = () => {
  executevisible.value = true;
};
// 添加模态框
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 targetKeys = ref<string[]>([]);
const filterOption = (inputValue: string, option: MockData) => {
  console.log(option.description);

  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 delbtn = (id: any) => {
  console.log(id);
  cxlist.value.pop(id);
  console.log(cxlist.value.length);

  if (cxlist.value.length === 0) {
    executevisible.value = false
  }
};
</script>
<style lang="less" scoped>
:deep(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover){
  background-color: rgba(20,41,76,1);
  color:rgb(29, 83, 172)
}
:global(.ant-transfer-list-header-selected) {
  color: rgba(255, 83, 0)
}

:global(.ant-transfer-list-header > *:not(:last-child)) {
  color: rgba(255, 83, 0)
}

.tagtext {
  margin-left: 8px;
}

.light-tag {
  position: fixed;
  bottom: 135px;
  left: 450px;
  width: 396px;
  height: 200px;
  opacity: 0.8;
  border-radius: 8px;
  background: rgba(0, 0, 0, 1);
}

.light-tag-tit {
  display: flex;
  margin-top: 18px;
  margin-left: 18px;
}

.light-tag-box {
  padding: 15px 15px;
}

.light-tag-box>img {
  width: 120px;
  height: 51px;
  margin-bottom: 10px;
}

.light-tag-box>span {
  color: #fff;
}

.titleimg,
.titletext {
  display: inline-block;
  align-items: center;
  justify-content: center;
}

.control-btn,
.light-btn {
  display: inline-block;
  margin-top: 10px;
}

.controlarea-btn,
.temp-btn {
  display: inline-block;
  margin-top: 16px;
}

:global(.ant-drawer-content) {
  background-color: rgba(0, 0, 0, 1);
  opacity: 0.8;
}

:global(.ant-modal-content) {
  background-color: rgba(0, 0, 0, 1);
  opacity: 0.8;
}

:deep(.ant-transfer-list) {
  width: 230px;
  height: 450px;
}

:deep(.ant-transfer-list-header) {
  background-color: rgba(0, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}

.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: 60px;
  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;
}

.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: 80px;
}

.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: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 5px;
}

.btn2 {
  button {
    margin: 0 5px;
  }
}

.allbtn {
  border: 0;
  width: 40px;
  color: rgba(255, 255, 255, 1);
  background-color: transparent;
}

.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;

  button {
    width: 21%;
    padding: 0 2%;
  }
}

.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>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 {
  border: none;
  background-color: rgba(0,0,0,0);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  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;
  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-box {
  width: 100%;
  max-height: calc(100% - 79px);
}
.lighting-img-box>img {
  width: 100%;
  height: calc(100vh - 96px);
  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;
}

.jbox {
  background-color: #000;
  opacity: 1;
  z-index: 99999;
}

.journal {
  padding: 3% 5%;
  background-size: 450px 177px;
  width: 482px;
  height: 177px;
  background-color: rgba(0, 0, 0);
  border-radius: 12px;
  border: 2px solid transparent;
  border-image: linear-gradient(to bottom, #0077FF, #00F6FF, #000000) 1;
}

.imgText {
  display: flex;
  align-items: center;
  justify-content: space-between;

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

  .cxbtn {
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 6px;
    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%);
  }
}

: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;
}

.zmhlbtn {
  position: relative;
}

.anticon-stop {
  position: absolute;
  right: 3px;
  bottom: 3px;
}

.istrindex {
  background: rgba(67, 136, 251, 1);
}

:deep(.ant-modal-mask.ant-modal-content) {
  height: 100vh;
  position: fixed;
  right: 496px;
  top: 0%;
}
:global(.ant-modal-content) {
  position: fixed;
  bottom: 20px;
  right: 500px;
}
</style>

