<template>
  <!-- 照明区域 -->
  <div>
    <div class="light-area">
      <div class="light-area-tab"></div>
      <span class="light-area-text"> 照明区域 </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 limitedButtons1" :key="index"
          :class="{ btn: true, selected: button.selected }" @click="selectButton(button, index)">
          {{ 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 props.treeData" :key="index"
          :class="{ btn: true, selected: button.selected }" @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="circuit-area" v-if="selectedButton">
      <div class="circuit-tab"></div>
      <span class="circuit-text">照明回路</span>
      <div class="btn2">
        <button class="openplan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
          {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
        </button>
        <a-switch v-model:checked="selectAllCheckbox" :disabled="singleSelection" :class="{
        'blue-background': selectAllCheckbox,
        'grey-background': !selectAllCheckbox,
      }" @change="toggleAllSelection" />
        <button class="allBtn">全选</button>
        <button class="both" @click="selectAll">
          {{ singleSelection ? '多选' : '单选' }}
        </button>
      </div>
    </div>
    <div class="btnarea" v-if="selectedButton">
      <template v-if="!showAllButtons">
        <button v-for="(button2, index) in limitedButtons2" :key="index"
          :class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
          <stop-outlined v-if="button2.stop" />
          {{ 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="control-area" v-show="showControlMode">
      <div class="control-tab"></div>
      <span class="control-text"> 控制模式 </span>
    </div>
    <!-- 控制模式按钮部分 -->
    <div class="control-mode-btn-area" v-show="showControlMode">
      <button v-for="(button3, index) in controlType" :key="index"
        :class="{ btn: true, selected: button3.type === thisButtonType }" @click="selectButton3(button3)">
        {{ button3.name }}
      </button>
    </div>
  </div>
  <!-- 控制场景 -->
  <div>
    <div class="control-scene-area" v-show="showControlScene">
      <div class="control-scene-tab"></div>
      <span class="control-scene-text"> 控制场景 </span>
    </div>
    <!-- 控制场景按钮部分 -->
    <div class="control-scene-btn-area" 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="light-parameters-area" v-if="selectedButton4">
      <div class="light-parameters-tab"></div>
      <span class="light-parameters-text"> 灯具参数 </span>
    </div>
    <div class="light-parameters-textarea" 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 style="margin-bottom: 60px;"></div>
    </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',
        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="control-area-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> -->
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { controlType } from './treeData'
import {
  DownOutlined,
  UpOutlined,
  StopOutlined,
} from '@ant-design/icons-vue';

// 初始化
onMounted(() => {
  const tree = props.treeData
  // 默认选中第一个分区
  tree[0].selected = true
  // 默认展示第一个分区的回路
  buttons2.value = tree[0].children
})

// 与父组件的交互  ===================================================================
const props = defineProps({
  // 分区结构（照明区域 > 照明回路）
  treeData: {
    type: Array
  },
});
const emit = defineEmits(['changeArea']);

// 照明区域 ==========================================================================

// 照明区域 - 计划启用状态
const isPlanEnabled = ref(false);
// 照明区域 - 计划启用切换事件
const togglePlan = () => {
  isPlanEnabled.value = !isPlanEnabled.value;
};

// 照明区域 - 按钮区展开与收起状态
const showAllButtonsArea = ref(false);
// 照明区域 - 分区 - 被选中的按钮  默认为1
const selectedButton = ref('1');
// 照明区域 - 区域切换（按钮点击）事件
const selectButton = (button: any, index: number) => {
  // 当前选中按钮
  selectedButton.value = button;
  // 分区只能单选
  props.treeData.forEach(item => {
    item.selected = false
  })
  button.selected = true
  // 切换1级分区时，重置二级分区
  buttons2.value.forEach(item => {
    item.selected = false
  })
  showControlMode.value = false
  buttons2.value = button.children
  // 反选area
  emit('changeArea', []);
  emit('changeArea', button.id);
};
// 照明区域 - 默认最多展示8个按钮
const limitedButtons1 = computed(() => props.treeData.slice(0, 8));

// 照明回路 ==========================================================================

// 照明回路 - 最近交互过的按钮，用于禁用和启用
const zmhlid = ref('');

// 照明回路 - 全选状态
const selectAllCheckbox = ref(false);

// 照明回路 - 面板启用/禁用状态
const isPlanEnabled2 = ref(true);
// 照明回路 - 面板启用/禁用切换事件
const togglePlan2 = () => {
  // 获取最近交互的按钮
  const item = buttons2.value.find((button) => button.id === zmhlid.value)
  isPlanEnabled2.value = !isPlanEnabled2.value;
  // 禁用 - 则取消选中，增加禁止图标
  if (isPlanEnabled2.value) {
    item.selected = false;
    item.stop = true
    let level1 = String(selectedButton.value.id)
    let arr = [level1]
    buttons2.value.forEach(item => {
      if (item.selected) {
        arr.push(item.id)
      }
    })
    emit('changeArea', arr)
  // 启用 - 去除禁止图标
  } else {
    item.stop = false
  }
};

// 照明回路 - 多选与单选切换事件
const selectAll = () => {
  emit('changeArea', [String(selectedButton.value.id)])
  selectAllCheckbox.value = false
  buttons2.value.forEach((button) => {
    button.selected = false;
  });
  singleSelection.value = !singleSelection.value;
  showControlMode.value = false
};

// 照明回路 - 是否单选，状态
let singleSelection = ref(true);
// 照明回路 - 全选切换事件（switch）
const toggleAllSelection = () => {
  let arr = [String(selectedButton.value.id)]
  // 全选
  if (selectAllCheckbox.value) {
    buttons2.value.forEach((item) => {
      if (!item.stop) {
        item.selected = true;
        arr.push(item.id)
      } 
    });
  // 全不选
  } else {
    buttons2.value.forEach((item) => {
      item.selected = false;
    });
    showControlMode.value = false
  }
  emit('changeArea', arr)
};

// 照明回路 - 按钮切换
const toggleSelection = (button: any) => {
  // 存储一次按钮ID，用于禁用/启用交互
  zmhlid.value = button.id
  // 如果已被锁定，则展示禁用/启用状态跳出
  if (button.stop) {
    return isPlanEnabled2.value = true
  } else {
    isPlanEnabled2.value = false
  }

  // 选择时反控俯视图
  let level1 = String(selectedButton.value.id)
  let level2 = button.id
  // 单选模式，需将所有按钮设为false
  if (singleSelection.value) {
    buttons2.value.forEach(item => {
      item.selected = false;
    });
    emit('changeArea', [level1, level2])
    button.selected = !button.selected;
  } else {
    // 多选模式传值
    button.selected = !button.selected;
    const arr = [level1]
    buttons2.value.forEach(item => {
      if (item.selected) {
        arr.push(item.id)
      }
    });
    console.log(arr)
    emit('changeArea', arr)
  }
  // 用于展示控制模式
  if (button.selected) {
    showControlMode.value = true
    thisButtonType.value = button.type
    thisButton.value = button
  } else {
    showControlMode.value = false
    thisButton.value = null
  }
  
};
// 照明回路 - 按钮区展开与收起状态
const showAllButtons = ref(false);
// 照明回路 - 默认最多展示8个按钮
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// 照明回路 - 所有按钮
const buttons2 = ref([]);

// 控制模式 =======================================================================
// 控制模式 - 决定该区域是否显示
const showControlMode = ref(false);
const thisButtonType = ref(null)
const thisButton = ref(null)
// 控制模式 - 当前选择按钮
const selectedButton3 = ref('');
// 控制模式 - 按钮切换
const selectButton3 = (button3) => {
  thisButton.value.type = button3.type
  thisButtonType.value = button3.type
  showControlScene.value = button3.name === '手动';
  selectedButton4.value = ''; // 清空选中的控制场景按钮
};

// 控制场景 =======================================================================
// 控制场景 - 决定该区域是否显示
const showControlScene = ref(false);
// 控制场景 - 所有按钮
const controlSceneButtons = ref([
  { label: '检修', selected: false },
  { label: '午休', selected: false },
  { label: '疏散', selected: false },
  { label: '客流高峰', selected: false },
]);
// 控制场景 - 当前选择按钮
const selectedButton4 = ref('');
// 控制场景 - 按钮切换
const selectButton4 = (button4) => {
  selectedButton4.value = button4.label;
};

// 灯具参数 ========================================================================
// 灯具参数 - 表格数据
const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);

const handleRowClick = (index: any) => {
    trindex.value = index;
    if (index === trindex.value) {
      console.log('tri');
    }
    // 显示模态框
    logModalVisible.value = true;
  };

// 底部表格 ========================================================================

const refresh = () => {
    selectedButton.value = {};
    showControlMode.value = false;
    showControlScene.value = false;
    selectedButton3.value = null;
    selectedButton4.value = null;
};
// 执行确认
const executevisible = ref<boolean>(false);
  const showModal = () => {
    executevisible.value = true;
  };
</script>
<style lang="less" scoped>
// 抽屉
.drawer-item {

  .light-area,
  .circuit-area,
  .control-area,
  .control-scene-area,
  .light-parameters-area {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }

  .light-area-tab,
  .circuit-tab,
  .control-tab,
  .control-scene-tab,
  .light-parameters-tab {
    width: 5px;
    height: 23px;
    opacity: 1;
    background: rgba(26, 174, 251, 1);
    margin-right: 4px;
  }

  .light-area-text,
  .circuit-text,
  .control-text,
  .control-scene-text,
  .light-parameters-text {
    font-size: 14px;
    color: white;
    padding-left: 5px;
    line-height: 23px;
    width: 110px;
    height: 23px;
    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
    user-select: none;
  }

  .light-area-tab,
  .light-area-text {
    display: inline-block;
    justify-content: center;
  }

  .plan.enabled {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    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: white;
    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: white;
    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: white;
    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 {
    cursor: pointer;
    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: white;
    border: none;
    border-radius: 5px;
  }

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

  .allBtn {
    border: 0;
    width: 40px;
    color: white;
    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: white;
  }

  .area,
  .btnarea,
  .control-mode-btn-area,
  .control-scene-btn-area {
    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: white;
    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 white;
  }

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

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

  .circuit-area,
  .control-scene-area,
  .light-parameters-area {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .circuit-tab,
  .circuit-text {
    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: white;
    margin-left: 11px;
  }

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

  .control-tab,
  .control-text {
    display: inline-block;
  }

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

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

  .control-scene-tab,
  .control-scene-text {
    display: inline-block;
  }

  .light-parameters-tab,
  .light-parameters-text {
    display: inline-block;
  }

  .light-parameters-textarea>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: white;
    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: white;
    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: white;
  }

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

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

  .light-area,
  .circuit-area,
  .control-area,
  .control-scene-area,
  .light-parameters-area {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
  .zmhlbtn {
    position: relative;
  }
  .anticon-stop {
    position: absolute;
    right: 3px;
    bottom: 3px;
  }
}
</style>
